Monorepo share library with CRA, React Native with Lerna 101

 Gabriel Rodríguez
Gabriel Rodríguez
December 19, 2023
Integration
React Native
Lerna
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".
In the next link you can check how to leverage React Testing Library 

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:

Don't miss a thing, subscribe to our monthly Newsletter!

Thanks for subscribing!
Oops! Something went wrong while submitting the form.

Salesforce Integration Options: REST API, SOAP API, and Heroku Connect

In this article we break down the different options for integrating with Salesforce CRM, which are REST API, SOAP API, and Heroku Connect.

December 4, 2019
Read more ->
Integration
API
Salesforce

Leveraging Terraform to reduce cloud infrastructure costs

How to use Terraform to optimally implement your cloud infrastructure while reducing costs.

March 24, 2022
Read more ->
Cloud
Integration

Contact

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

Write to us!
info@vairix.com

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.