Habilelabs-Logo
Blog

Monorepo for React Native Apps with Nx

May 19th, 2022 . 3 minutes read
Blog featured image

Hey Developers,

I am a React Native Developer and received one project with two different applications, having similar business logics and UI designs. And then I realized, there will be some duplicate or redundant code in both applications, and as a developer, we should follow DRY (Don’t Repeat Yourself) principle.

That’s why, I started looking for an architecture to avoid duplicate code across the projects. And then I came across one of the most popular options to do so – MONOREPO.

In this article, You will see how you can use multiple applications with React Native in one Monorepo-

What is Monorepo ?

Firstly, let’s understand the term Monorepo

Simply said, it is a repository that contains code for many projects and packages.

Monorepo allows you to have multiple projects share common dependencies instead of installing the dependencies for each of them, while simplifying code sharing between projects, allowing you to import code from one package to another and Redux logic.

Great! Now that we got the concept straight, let’s start implementation using Nx.

Steps to Create A Mono-repo Project

Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations.

Now, let’s make the project structure –

👉 Create a Nx workspace-

  • To create a NX workspace, run-

npx create-nx-workspace <your_app_name> --preset=react-native

  • Go to the workspace-

cd <your_app_name>

  • To generate another application, run:

nx generate application <your_app_name>

This should generate <your_app> folder under apps.

NX Workspace

Now you can install the starter project of Nx React Native. If you run:

  • nx run-android <your-app-name>, it should launch the app in the Android simulator.
  • nx run-ios <your-app-name>, it should launch the app in the iOS simulator.

For server start, you can run:

  • nx start <your-app-name>, it will start the server for the particular app.

👉 Create a Common Library

To create a common library, where you keep common code/logics for both the applications:

nx generate lib <your_lib_name>

This should generate <your_lib> folder under libs.

👉 Create a Common Component for both apps

There can be some common components as well that are used across both React Native apps.

  • For that, create a library called ui and create a component:

nx generate lib ui

nx generate component <your-component-name> --project=ui --export

This generates the folder <your-component-name> under ui/src/lib.

Now you can write your common UI code in the above component and use this component in both the application in app.js.

If you run nx run-ios <your-app-name> and nx run-android <your-app-name>, you should see something like this:

React Native App

Conclusion

Congratulations! You have created React Native mobile apps. 🎉🎉

Nx + React Native is a powerful tool that allows you to have multiple mobile applications code in the same repo with shared business logic.

For Source code, you can check the Github repo.

For more such insightful blogs, stay tuned!

Happy Coding!😊

Author: Muskan Jain
Share: