Today I tried to migrated my React Native App to a monorepo. The monorepo is created based on Bruno Lemos’s excellent work react native web monorepo template (https://github.com/brunolemos/react-native-web-monorepo).
Since my React Native App is already working fine on both iOS and Android, I simply copy couple folders (namely they are android, ios and src) folders from my current project to the new monorepo project under mobile folder. Then tried to change the settings to make it work with monorepo. (see below screen shot, folders pointed with arrow)
The migration of ios App went well, but it took me a full day to make android working properly. Somehow the android app even can be compiled successfully and launched in emulator or real phone, but the launch screen just flashed a second then disappeared.
Since I am using react-native-splash-screen, so I thought that was caused by it. So I spent couple hours on making sure react-native-splash-screen was configured properly following its Github documentation, also tried different combination of settings, but still no luck, same result, the launch screen flashed a second then simply disappeared, no error and no log.
Before I giving up, I decided to figure out what’s going on during the app launch. In one console I used “adb logcat” to see the real time logs, then launch my app in the other console window “react-native run-android”
adb logcatRight away I found out that I forgot to copy the firebase.json from my original project, and missing the firebase.json caused Firebase Admob crashing on launch.
The firebase.json file is located in the project root and it contains App ID Settings for Admob, apparently Admob can’t work properly without it.
{"react-native": {"admob_android_app_id": "ca-app-pub-<id>","admob_ios_app_id": "ca-app-pub-<id>","admob_delay_app_measurement_init": true,}
After copied the firebase.json file to the mobile folder, everything works correctly! So missing one file caused my entire day! 😭
Anyway, I am glad I finally figure it out and I still learned quite a lot, so it is worthy. Below is just an example I learned today how to configure react native unimodule for monorepo.
Update React Native Unimodule for monorepo
Bruno Lemos’s react native web monorepo template is very bare bone, only involved react native’s setting. My react native project contains lots more packages, such as Firebase, Expo, some of them also require change to work with monorepo. For example, below are some changes for react native unimodule:
android/settings.gradle:apply from: '../../../node_modules/react-native-unimodules/gradle.groovy'; includeUnimodulesProjects([modulesPaths: ['../../../../node_modules']])android/app/build.gradle:addUnimodulesDependencies([modulesPaths['../../../../node_modules']])