How to Reuse the Same React Codebase for Web & Mobile Development

Such an approach really helps reduce the frequency of having to duplicate the code in case we need to reuse some components between app’s clients. Additionally, it gives us multiple new opportunities, such as a full reuse of a codebase to create a “preview”.

We’re going to have 7 key steps to set up a project with a reusable codebase.

# 1: Project Initializing

To begin with, let’s make up our root app.

In your create-react-app and react-native init versions, versions of React and React-native dependencies can be different. To prevent any issues in that regard, it’s a great idea to save the versions while transferring them to the root project. Now, we can safely move on to step number 2.

# 2: Setting Up the Project

First things first, let’s create the basic tsconfig and extend each nested config to the following modules so as not to set up the Typescript for every single module separately.

# 3: Setting Up the App to Work with Yarn Workspaces

The 3rd step is going to be changing the way to all the packages the react-native uses to build the project.

In the /app/android/settings.gradle file change path to the cli-platform-android/native_modules.gradle file:

# 4: Setting Up the Web App to Work with React Native

So, the first step here would be to enable access to the “/shared/src” directory since initially, Create React App gathers files from the “/web/src” directory. Additionally, we’re going to add an alias for the react-native-web package and some useful plugins for babel.

Firstly, let’s add the necessary dependencies and create the CRA configuration override:

# 5: Launching the Apps

The configuration is finally over, which means that we can launch the apps for the first time. So, to use the files from the “shared” module, we need to assemble the module with the yarn workspace shared build command.

In case you’d like to start the assembling in the “watch” mode, you can use the yarn workspace shared dev command. However, we can simply skip this step for now as there’s nothing in the module yet.

Let’s launch the app with the yarn workspace app start command in a separate console screen:

# 6: Initializing Version Control System (VCS

It’s time to commit the code. It’s important to keep in mind that we’ve recently removed the .git directories for both app and web workspaces. Now, let’s create them again in the root project.

git init

As the following step, we create the .gitignore file:

# 7: Developing the App

To test out how the reusing works, why don’t we create an app that reuses the same component for both Mobile and Web products. Let’s assume we need to build an ID card for a certain employee.

In our case, it’s going to contain their name and their ID itself. The code component that’s going to contain this information, we’ll call “Profile”. This component is the one we’ll be reusing for both parts of the apps, meaning that it needs to be stored in the /shared workspace:

💡 Takeaways

To sum up, we’d like to say that reusing the codebase isn’t only possible but also reasonable. It allows you to make the code itself shorter, which reduces the time & resources needed to maintain it. Plus, without such an opportunity, developers would have to type the same code twice and make sure that it’s 100% similar in both, web and app, app versions.

In this article, we’ve decided to use only one component, but react-native-web allows reusing almost every single react-native apps for Web versions.

We’ve used such an approach for our Yangol project.