Working with symlinked packages in React Native

For an RN app I’m co-developing we have several repos that work together. One of the repos acts a library for other repos to use. During development, in order to test a few things out, we sometimes need to have the local dev version of the library repo work with one of the other repos (e.g. the local dev version of the library-repo is a dependency of another repo).

For regular JS apps we’d use yarn link to get this working. For React Native however, that approach doesn’t work: the Metro Bundler can’t cope with symlinked dependencies (See facebook/metro issue #1).

The solution we found was to use wml – which uses watchman under the hood – for this:

Wml is an alternative to symlinks that actually copies changed files from source to destination folders.

Wml is a CLI tool that works pretty much like ln -s. You first set up your links by using the wml add command and then run the wml service (wml start) to start listening. That’s it!

Usage is as follows:

# 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

Installation per NPM/Yarn:

yarn global add wml

wml – Tangible symlinks →

# remove all wml links
wml rm all

# reset watchman
watchman watch-del-all

# clean up node_modules and reinstall dependencies
rm -rf ./node_modules
yarn install

# now re-add your wml links