Monorepo share library with CRA, React Native with Lerna 101

Monorepo share library with CRA, React Native with Lerna 101
Gabriel Rodríguez
July 16, 2020
Integration
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:

Contact Us

Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!

OR
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Monorepo share library with CRA, React Native with Lerna 101