Multi-variant React Native Android Apps

While developing the Android application for my systems I have found I would really like my typical set of multi-environment setup. One for testing against integ and another for prod. The missing guide to React Native app variants — Part 1 by Tamás Menyhárt seems to have the right stuff. When trying to have both versions installed you will get a signature error due to different signing keys for the applicationId

First up, actually generating a separate application ID via the applicationIdSuffix member.

android {
  buildTypes {
    debug {
      applicationIdSuffix ".debug"
    }
  }
}

On the next run of yarn android dev it will launch the production build. React Native extracts the applicationId from the default Android.xml file. In order to launch the correct variant the --variant=Debug --appIdSuffix=debug must be passed, like yarn android dev --variant=Debug --appIdSuffix=debug.

Side loading the release APK

To generate the production artifacts:

cd android
./gradlew bundleRelease

Then run:

cd android
adb install app/build/outputs/apk/release/app-release.apk

This will install the release artifact. This is useful testing to ensure the variants install as expected.

Differentiating variants

In order to be able to differentiate the applications we need to override the app_label resource. To do so we create a new file in android/app/src/debug/res/values/strings.xml to look something like the following:

<resources>
    <string name="app_name">mee debug</string>
</resources>

When inspecting looking at the app Info panel in Android it will show the full name. Otherwise it just shows the first word. Not sure why but good enough for now.