React-Native tutorial: add to an existing native project while keeping both repositories separated
Hi all!
I recently had the challenge to add a React-Native (RN) app to an existing Android app.
While searching for any supporting documentation, I came to realize that everywhere I looked advised/instructed the developer to take the existing app and just put it inside a new/existing RN project.
This includes the official documentation from Facebook, when they say:
1. Set up directory structure
To ensure a smooth experience, create a new folder for your integrated React Native project, then copy your existing Android project to an
/androidsubfolder.
And for many developers, I’m sure that’s an acceptable choice to take. But, in my case, I had more to lose than to gain from that, from having to adapt both native teams to a new repository, a new way of working, to lose track of previous changes, to have to change the build pipelines and tasks, etc.
So I thought of git submodules as a possible solution to use RN components on an existing native app, while keeping both repositories separated from each other.
This tutorial is separated into the following group of steps:
1 — Native app structure
2 — Native app RN configurations
3 — Importing RN app to native app
4 — Install RN dependencies
5 — Running the app
- 5.1 — Run everything from the terminal window
- 5.2 — Run RN app from the terminal window and native app from Android Studio
6 — Update RN app with the latest version
7 — Common errors and solutions for them
1 — Native app structure
You need to navigate to the root of your native app and create a new folder called “android”.
Take every folder and file and put it inside the newly created “android” folder. This step will ensure that all our native code is following the folder structure of a standard RN app.
2 — Native app RN configurations
To avoid repeating the official documentation and prevent this from becoming obsolete once that changes, I would advise you to follow the steps available here from “Configuring maven” to “Cleartext Traffic (API level 28+)”.
Note: Keep in mind that the number of “navigating back” (../) will depend on the number of folders and subfolders you might have on your project. In my case, instead of having to navigate twice, I had to do it thrice. The goal for this is to get to the root folder and from there, it will navigate deep into the “node_modules” folder.
3 — Importing RN app to native app
For this step, the official documentation shows you how to do it if there’s no existing RN app and gives you a simple example of creating just the necessary files for an educational dummy app to work.
As stated before, we’ll use git submodules to import an existing RN app from another repository.
The first thing to do is to open a terminal window and navigate to the root of your native app (where you’ll currently only see the “android” folder).
From there, run the following command:
git submodule add -b <BRANCH_NAME> <REPO_NAME>
The <BRANCH_NAME> is optional, by default it will fetch from the master branch. Replace the <REPO_NAME> with your RN app’s repository.
Once it has finished cloning from the repository, you’ll notice it has created a new folder with your RN app’s name (e.g. if your RN app was created with the name “MyApplicationRN”, it will have created a folder called “myapplicationrn”).
Open that folder (e.g. “myapplicationrn”) and move its whole content back into the native app’s root directory.
4 — Install RN dependencies
From the previous terminal window, run the following command:
npm install — save react react-native
This will install the dependencies you need for the RN app.
5 — Running the app
There are two different ways of running the native app and the RN server, either running everything from the terminal window or to separate both executions.
5.1 — Run everything from the terminal window
If you want to execute everything from the terminal window, run the following command:
react-native run-android
It will start the RN server and also launch the native app.
If you have multiple flavors, you’ll need to instead run the following command:
react-native run-android — variant=<FLAVOR_NAME><BUILD_TYPE>
Where <FLAVOR_NAME> should be replaced by the flavor name (dev, prod, qa, etc); and <BUILD_TYPE> replaced by the build type (debug, release, etc).
5.2 — Run RN app from the terminal window and native app from Android Studio
To keep both executions separated (e.g. if you want to run the native app in debug mode), you need to first launch the RN server from the terminal window, using the following command:
react-native start
After that, you can go over to Android Studio and run your native app from there. And that’s it!
6 — Update RN app with the latest version
If you want to update your app with the latest RN app version, open a terminal window on the root folder and run the following command:
git submodule update — remote
Note: When fetching from the RN app’s repository, it will always put the files inside the RN folder (e.g. “myapplicationrn”). You always need to move those files back to the root folder and replace the old ones with the newly fetched ones.
Note 2: Ensure that you add the RN app’s files and folders to the gitignore file.
7 — Common errors and solutions for them
From my own experience, it was quite painful to achieve this goal and I still face some sporadic (and some even random) issues, so it is best if you put your mental state into expecting to have some :)
Issue: “Failed to construct transformer: Error: Duplicated files or mocks.”
Just navigate into “android/app/” and remove the “build” folder. The error will disappear.
Error type 3: Unable to find MainActivity
Sometimes this requires you to uninstall the app from your device/emulator. If it happens even after that, check if it still installed the app on your device/emulator and run the app from there.
Allow app overlay
For reasons the official documentation explains well, you need to ensure you allow your app to overlay other apps so you can properly execute and test your app.
Unable to find “:react-XXX”
If this happens, it may be that the specific react package was not yet installed. To solve this, run the following:
npm install react-XXX
Thank you for reading this far. I’m sure this will evolve according to your feedback and from my own experience.
If you have any questions or suggestions/corrections, please let me know.
Cheers!
