Monorepo share library with CRA, React Native with Lerna 101

This is a simple step-by-step manual on how to share logic between a React app created by CRA and a React Native app. In order to do this, we are going to use a tool for managing multiple JavaScript packages called Lerna.

1- Install the Lerna 2.0 package globally

2- Create a project repository

3- Set this folder as a Lerna workspace

We should have this structure in the folder:

4- Create the web app in the package folder (we need create-react-app installed globally)

5- Install dependencies.

You have to run the command "yarn" in the root file, Lerna will install all the dependencies for the project in the folder packages

6- Create the React Native app (if you don’t know how to start working with React Native, you can check out this post)

7- To test if the installation works, run this in the root folder

To test in web:

To test mobile app in Android:

To test mobile app in iOS:

8- Create my shared library - this is the package where the project’s shared code lives

9- Setup Babel in my library

10- Add a name to my shared library in the package.json

In this example, my shared library is going to be referenced by the name "@root/shared"

11- Sharing my library with my web and mobile app

To do this, I have to add this dependency in the "package.json"

12- Link my local package to to the dependencies using Lerna Bootstrap

13- Adding metro configuration for React Native. We have to update the Watch Folder in the file metro.config.js to include packages directory

Create "packages/NativeApp/metro.config.js" with the following contents: