How does the example project avoid importing the library without path?

[wwen0]

I created a library using create-react-native-library. When I was working on the example react native inside the library, I can import without including the path, i.e., I don't need "../my-library". I wonder is there some setup to do to avoid the path?

I created an independent react native app, and I put it next to the library. I followed "How does the library get linked to the example app in the generated project?" in FAQ to include the library in the react native app. This is because my library has a lot of native code. The problem I have is that if I don't use a path, for example: import { someFunction} from 'my-library', it will complain that it cannot find the module, although the app still runs fine. I found that if I import like this: import { someFunction} from '../..my-library', then error is gone, and the app still runs fine.

My question is how can I avoid the path, just like how this is achieved in the example app?

[satya164]

It's mentioned under "Aliasing the JavaScript Code" https://github.com/callstack/react-native-builder-bob#how-does-the-library-get-linked-to-the-example-app-in-the-generated-project. Is there anything unclear there?

You can generate a project with create-native-library and look at the files mentioned there to get a better idea of what configuration needs to be done.

[wwen0]

I read "Aliasing the JavaScript Code" carefully, and followed it to update metro.config.js and babel.config.js for my project. Like I said, it builds and runs fine. The only issue is that in Visual Studio Code, the red wiggly underline is shown under the library name, saying it cannot find the library. My question is how to avoid this issue.

[satya164]

Oh, you mean for TypeScript. Check the generated paths property in tsconfig.json that adds an alias for TS.

[wwen0]

All I can think of to change in tsconfig.json is this in the library:

"compilerOptions": {
   "baseUrl": "./",
  "paths": {
      "my-library": ["./src/index"]
  }
}

I think the above configuration is correct. It points to the correct location. Do you think if I change something in here, like the baseUrl, then I don't need to have a path when importing it into a react native app outside of this library? Probably not.

All I want to know is if I import the library into a react-native app outside of this library, how can I avoid using path, like:
import {myFunc} from 'my-library';
rather than having to do this:
import {myFunc} from '../../my-library';

[satya164]

@wwen0 yeah, only those 2 changes are needed to be able to import like that.

[wwen0]

All I can think of is to update tsconfig.json in the react native app project, not the library. So I added baseUrl and paths like this:

"baseUrl": "./",
"paths": {
    "my-library": ["../my-library/src/index"]
}

But I don't see the red wiggly line gone. I still need to use the path.
Did I do the above correct? If so, what else do I need to do?

[wwen0]

I found that I can just run "yarn tsc" for the changes in tsconfig.json to be picked up.

If my project code is javascript, do I need to create a jsconfig.json and add the baseUrl and paths?

[satya164]

Yeah, sometimes you may need to restart VSCode for it to pick up the changes.

I haven't tried with JavaScript projects, but there are a couple of ways, you can either use jsconfig.json and use TSDoc to add types there, or you can write type definitions separately in .d.ts file and point to that file in the paths in tsconfig.json.

[wwen0]

Great, thank you so much for help @satya164

[wwen0]

I have a follow-up question. I created a react-native library that includes both a native Android library and a native iOS library. If I then create a react-native app that includes the react-native library the way I did in this discussion, will the Android app also contains the native iOS library, and the iOS app also contains the native Android library?

[atlj]

Everything defined in your package.json dependencies and react-native.config.js will be picked up by React Native CLI and will get linked to your app.