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

We’ve already talked about how React enables developers to use a big part of the codebase to build both web and mobile applications in our other articles. However, we’ve kept the technical part behind the scenes so as not to overload you with information. Normally, it’s not even the main idea after all.

This time, we’ve decided to do the “unveiling” and show you how to make reusing possible in the future. More precisely, we’ll talk about setting up the codebase for potential reusing with minimum effort.

The flag y is used to deal with confirmations and the flag p will turn value private into value true.

Our next step is creating Web & Mobile Applications within the project. For that matter, we’re going to use create-react-app and react-native init with the typescript template.

Make sure to delete .git, node_modules directories, and yarn.lock files from our apps’ directories. We need to do that since CRA and react-native init create them by default. However, for us, these would be the parts of the root project. So, to avoid confusion, it’s better to simply delete them.

After that step is complete, you can move on to creating the “shared” module.

It will be used for storing the general code that we’ll be reusing on both platforms. In case a certain part of the code will be only used in one of the apps, it’s better to put it into a corresponding directory — storing it in the /shared module will only make it more complicated and difficult to maintain.

To be able to reuse one project’s codebase in another one and unify all the necessary modules, we’ll be using Yarn Workspaces.

So, to save the modules we’ve just created, we’re gonna go to the file named package.json (that’s in the document’s core) and do it there.

Then, let’s place React and React-Native dependencies on the upper layer.

Now, let’s start with the extending process:

Now, let’s add some useful scripts into the “/shared/package.json” file.

In the /app/android/build.gradle file change path to react_native/android and /jsc-android/dist directories:

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

In the /app/ios/Podfile file change path to react/native/scripts/react_native_pods and cli-platform-ios/native_modules directories:

Now, let’s change the ways in project.ext.react for "root", "entryFile", and "cliPath":

We also need to change the way to the “index” file of iOS and Android apps.

Our last step here is adding the projectRoot prop in the “metro” configuration object.

Reloading CRA configuration file:

This configuration isn’t likely to be the same in the future — while improving/changing the apps, you’ll be adding additional new plugins and presets into it. To simplify the development, you might use the metro-react-native-babel-preset preset. However, the preset has quite a lot of excess plugins, which makes the project heavier.

Our team has extensive experience in working with React Native and cross-platform development. You can learn more about it on this page of our website:

In case everything is functioning well, you should see the standard React Native screen. Now, let’s launch the Web App with the yarn workspace web start command, also in a separate console screen. You should be able to see something like this.

Last but not least, we add the commit:

For the mobile app, the component is going to take data from a mock. Let’s create an object with this data in the app/App.tsx component and change the standard “welcome” screen of the react-native to the “Profile” component we just created.

Here’s what you should be able to see. In case you have other Profile props, you’ll have what you’ve typed in, of course. However, the props need to be of the same format — their value can differ.

Next, we’re going to reuse this component in the Web App. Here, it’ll receive data from inputs. For that matter, we need to create the “Main” component with 2 inputs. Both of them need to have a controlled state so we can pass such a state to the “Profile” component as well.

This time, we’ll change the “welcome” screen that the CRA created to the “Main” component above.

As an output, we have the Web App that is able to update the preview’s state of the app with the data from inputs simultaneously. Here’s what we have:

The goal was to display the most convenient and complete admin panel preview. Here’s what we had as the result:

The full code of the project is available in this github project.