How to Share Code between React Web App and React Native Mobile App in Monorepo

Hello, everyone. Welcome to my presentation. My topic is how to share code between React web and the React native mobile apps.

First, let me introduce myself. My name is Emily. I am a developer in Toronto. And I currently work for a company called Narwhal IO. I like hiking, biking, kayaking and all of the outdoor activities. I'm going to run a half marathon in October this year. So, I am preparing for that almost every weekend. Also, I used to be a native iOS developer but that was super, super long ago. Fortunately, I tend to be a web developer.

This presentation will take you through my journey on how to build both web and a mobile app and utilize CodeShare. A problem I try to solve is I got this awesome idea. Not only I want to create a web app, but I also want to create a mobile version for the app. However, users expect different experiences from web and mobile. Of course, I am not going to use native iOS and Android approach because that will require too many tech stack. Naturally, I chose Rack and Rack Native as my tech stack. However, here are still some challenges presented. Rack and Rack Native are still two different tech stack, the UI code are completely different. Rack Native uses native component instead of using web component as its building block. However, I still want to achieve feature parity, meaning I want a mobile and web app to have the same features and share the same business logic. The solution for this is definitely Monorepo. But which one? The solution I came up with, not surprisingly, is NX. What is NX? NX is a powerful Monorepo tool that will set up Rack and Rack Native apps for you out of the box. Let's do a quick demo. First let's create an NX workspace. In terminal, enter NPX create new workspace. For this example, I'm going to name the workspace Rack Summit. I'll use React as the default plugin and name the app as Web.

Then after everything got installed, let me go inside this workspace folder and install Now or Rack Native package. Then enter command to generate a Rack Native app. I'll name this app as mobile.

If I open the Rack Summit workspace folder, on the apps, there are currently four folders. It has the web app and mobile app I just created and E2E folders. If I enter nx serve web, you will serve up the default Rack web app. Meanwhile to run the mobile app. In terminal, I enter the command nx run os. In a different terminal, I enter nx run android. You will serve up the ios and android apps in simulator respectively.

Now let's look at the dependency graph. In terminal, enter nx graph. Enter nx graph. I should see the dependency graph of this project. Notice there's nothing shared between web and mobile apps.

Then let's create a shared library. In terminal, enter the command nx generate live. For this example, I'm going to call this library constants. Under the lab's folder, I should now see a constants folder got created. Inside index.ts file, I'm going to create a constant variable called title.

Then let me go to the web app folder. First, I'm going to import the title variable from the constant library. After that, I'm going to pass the title constants to the title prop. If I launch the web app again, I should notice that title got changed. Same goes for the mobile app. I should also be able to import from the shared library and change the title to be from this library.

If I open up the dependency graph again, I should see that both mobile and web import from this constants library. Sharing a constant variable does not seem to be that useful. However, imagine what could be shared or the non-UI related code could be shared. For example, business logic and state management. This way ensure feature parity that for same features, developers don't need to implement same logic twice. It could exist only once inside a shared library.

Essentially, with help from Next, the project setup would look like this. For the apps, you only contain UI code. For the non-UI related code, we could create libraries for those. For more information, you could check out my blog post linked on the bottom of the page. The end.