React Native: npm link local dependency, unable to resolve module

Question

I am developing a button ui package for react native. I try to build an example project to test this button. The directory structure is as follows:

my-button         


        

Answer 1

Try wml (https://github.com/wix/wml)

It's an alternative to npm link that actually copies changed files from source to destination folders

# add the link to wml using `wml add <src> <dest>`
wml add ~/my-package ~/main-project/node_modules/my-package

# start watching all links added
wml start

Answer 2

Change your package.json

//...
"dependencies": {
   //...
    "my-button" : "file:../"
  },
//...

Answer 3

I couldn't always make it work with yarn link. What i found extra useful is yalc:

First install it globally once forever:

npm install -g yalc

In the local library/package (i'll call it my-local-package), and run:

yalc publish

Then in your project which uses my-local-package as a dependency, run: (if you already have added it with any other way, first uninstall it (npm uninstall -S my-lockal-package)

yalc add my-local-package
npm install

If my-local-package is a native module, then run react-native run-android to link the dependency. (or run-ios)

If you make any change in the my-lockal-package, then:

cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)

In case the update hasn't been applied, try to cd android && ./gradlew clean && cd .. and then rerun: react-native run-android.

Answer 4

Ran into the same problem. While I could not make npm link work as it should, I worked around it by installing the local package in the project folder

npm install ../<package-folder> --save

This will install the package like a regular package but from the local folder. The downside is that the changes you make on the package will not be reflected. You will have to npm install after every change.

Answer 5

For those still looking for a simple solution without other dependency, try this:

yarn --version
1.21.1

npm --version
6.13.4

1. Install in project root

cd my-button
yarn install or npm install

2. register linking in my-button

yarn link or npm link

3. Install example project

cd example
yarn add ../ or npm add ../

4. link to my-button

yarn link my-button or npm link my-button

5. complete pod installation (if necessary)

cd ios
pod install

Answer 6

I'm having the same issue while developing a native module wrapper around an existing native SDK. At first I followed @aayush-shrestha's suggestion to install the package locally. Like this:

npm install ../<package-folder> --save

This works as long as I reference the module via NativeModules. Import it:

import { NativeModules } from 'react-native';

And then access a module called ActualModuleName like this:

NativeModules.ActualModuleName

But it fails when I attempt to import the module by name:

import { ActualModuleName } from 'react-native-actualmodulename'

To make that work I had to first pack the package. Run this in the package's root directory:

npm pack

This generates a gzipped tarball:

react-native-actualmodulename-1.0.0.tgz

Now install that in your app:

npm install <path/to>/react-native-actualmodulename-1.0.0.tgz

An enormous downside to this is that you have to re-pack the package every time you make a change to the module. The only workaround I know of is to modify the package's files in node_modules directly and then copy those changes back to your repo when you're done.

But the upside is that your app's source can import ActualModuleName the same way you'll import it once it's released via npm; no environment-specific code necessary.