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 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 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 turned 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 code share. A problem I tried 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 experience from web and mobile. Of course, I'm not going to use native iOS and Android approach because that will require too many tech stack. Naturally, I choose React and React Native as my tech stack. However, here are still some challenges presented. React and React Native are still two different tech stacks. The UI code are completely different. React Native uses native components instead of using web components as its building block. However, I still want to achieve feature parity, meaning I want a mobile and a 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 React and React 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 React 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 React Native package. Then enter a command to generate a React Native app. I'll name this app as mobile. If I open the React Summit workspace folder, under apps, there are currently four folders. It has the web app and the mobile app I just created, and the e2e folders. If I enter NX serve web, it will serve up the default React web app. Meanwhile, to run the mobile app, in terminal, I enter the command NX run iOS. 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. 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 labs 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 known UI related code could be shared. For example, business logic and state management. These will ensure feature parity that for same features, developers don't need to implement same logic twice. You could exist only once inside a shared library. Essentially, with help from NX, the project setup would look like this. For the apps, you only contain UI code. For the known UI related code, I could create libraries for those. For more information, you could check out my blog post linked on the bottom of the page. The end. Thanks for listening.