Use Lerna with React Native?

Question

Is it possible to use Lerna (lernajs.io) with React Native? I'm attempting to create new project with the following structure:

MyApp
  packages
    myapp-core
    myapp-mobile
    myapp-web

lerna bootstrap doesn't seem to have any issues with core or web, but mobile (which is a React Native project) refuses to find the myapp-core module.

I recall there is some issue with npm link in React Native. Is that what is causing the problem? Is this functionality something that will eventually exist?

Answer 1

It looks like as of react-native: 0.40.0, lerna works as expected. I created a minimal demo app that uses a shared package to change the background color of both a React and a React Native app for those who are interested:

https://github.com/samcorcos/learna-react-native

Steps to reproduce:

1. clone the repo and cd in
2. npm install
3. ./node_modules/.bin/lerna bootstrap

Then you can run each app (npm start for react, react-native run-ios for react native) and you'll see the background changed to red based on the input from the shared repo. When you add new packages, make sure you add the new package to each of the relevant package.json files, just as I've added shared to both the web and mobile projects.

Note that this project does not take advantage of Lerna's --independent versioning system.

Answer 2

Yes, it is possible to create a workspace to run lerna with react in native and web platform.

In fact having a web-mobile project in a lerna-style monorepo could be a great choice when you aim to share JS logic in your app.

Created the following monorepo as an example:

https://github.com/agrcrobles/react-native-web-workspace

For more information look into:

https://blog.hellojs.org/a-cross-platform-app-with-react-in-a-monorepo-9c6aa6aed818

Answer 3

As mentioned in comments React Native packager is not working with symlinks. Which makes it impossible to use Lerna which creates symlinks to local subpackages from the same monorepo.

Fortunately, there is an alternative packager which supports symlinks. Works well for me so far https://github.com/callstack-io/haul/