How to add local dependencies in react-native project

[Rajesh6381]

Hi, I'm developing React Native packages and I want to add local dependencies to my React Native project. I've tried several methods, but none of them have worked so far.

The only method that worked was packaging the packages using npm pack and then installing the packed packages in my project. However, this approach has the drawback that if I update the code in the local path, the changes are not reflected in the node_modules of the package.

I also tried using npm link, but this resulted in an error in my project indicating that the module could not be found.

Is there a way to resolve this in React Native so that local path changes are reflected in the node_modules of the package?

[chetanty]

Are you using npm install in the correct path? Try to use it in the local path and let me know if it works.

[Rajesh6381]

The installation is working fine and the library is added to the node_modules folder. However, I'm facing an issue with the import statement: "unable to resolve module Mylib from /Users/user-name/projects/myApp/src/Home.tsx: Mylib could not be found within the project or in these directories".
The import statement is
import viewComponents from 'Mylib'

[stackmasteraliza]

Ensure the library's package.json has a correct main field pointing to the entry file (e.g., index.js). Update your metro.config.js to include the library's path in watchFolders. Clear Metro's cache and restart the bundler using:

npm start --reset-cache

Verify the import matches the exact name in the library's package.json.

[stackmasteraliza]

The main field in a library's package.json file specifies the entry file that the React Native bundler (Metro) will load when the library is imported into a project.

Role of the main Field:

1. Defines the Entry Point: It tells Metro which file to use as the starting point for your package (e.g., "index.js" or "dist/index.js").
2. Supports Local Packages: If your library is compiled (e.g., from TypeScript), main ensures the project loads the correct output file.
3. Prevents Import Errors: Without a valid main field, Metro won’t know which file to load, causing errors.

Example:

If your package’s entry file is index.js:

{
  "main": "index.js"
}

For compiled code in a dist folder:

{
  "main": "dist/index.js"
}

In React Native, you can also use a react-native field for platform-specific entry points. For example:

{
  "main": "dist/index.js",
  "react-native": "src/index.native.js"
}

This ensures your library works seamlessly when imported into a React Native project.

[Rajesh6381]

I am tried this approach, it is also not worked

[stackmasteraliza]

Okay Try this approach:

1. Run npm link in the Package Directory

npm link

3. Navigate to your React Native project directory and link the package:

cd /path/to/your/project
npm link your-package-name

[urmasa-tar]

1. Local React Native Components or Libraries
   { "dependencies": { "your-local-library": "file:../path-to-your-local-library" } }
2. Using Local Modules
   import MyComponent from './src/components/MyComponent';
3. Rebuild the Project
   You may reed about one of these methods

[Adityaadpandey]

Use npm link with Metro Config:

Link the package:

npm link /path/to/your-package

Update metro.config.js in your project to include the package:

module.exports = {
  watchFolders: ['/path/to/your-package'],
};

[anshkumar2311]

Yes. It worked for me.

[andrybedo]

What kind of issues can this configuration resolve in a project?