Product Flavors on React Native to Setup multiple build variants

Source: mobikul

In mobile development, a “flavor” of a product refers to a variation of a specific application that is built using the same source code but with different configurations or resources. Flavors allow developers to easily create and maintain multiple versions of an app, such as a free version and a paid version, or a different version app for a specific market or country.

You can define different product flavors for an app by creating separate directories for each flavor within the “src” directory of your project. Each of these directories should contain its own set of resources and a custom AndroidManifest.xml file.

One way to implement flavors in a React Native app is to use the react-native-config package. This package allows you to define configuration variables that can be used at build time, such as an API endpoint URL or a feature flag.

To use react-native-config, you first need to install it in your React Native project:

npm install react-native-config

or

yarn add react-native-config

After installing the package, You’ll also need to manually apply a plugin to your app, from android/app/build.gradle:

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Next, you can define your configuration variables in a file called .env. This file should be located at the root of your project and should contain key-value pairs, with each pair on a new line. For example:

API_ENDPOINT=https://default.myapi.com
ENV=default

To use these variables in your code, you can access them through the Config object:

import Config from 'react-native-config' 
console.log(Config.API_ENDPOINT)

To build different flavors of your app, you can create separate .env files for each flavor and specify which file to use at build time. For example, you might have a .env.prod file for your production build and a .env.dev file for your development build. To specify which file to use, you can write the script in package.json scripts environment variable to the build command:

  "android:devDebug": "ENVFILE=.env.dev && react-native run-android --variant=devDebug --appIdSuffix dev",
  "android:devRelease": "ENVFILE=.env.dev && cd android/ && gradlew assembleDevRelease",
  "android:prodDebug": "ENVFILE=.env.prod && react-native run-android --variant=prodDebug --appIdSuffix prod",
  "android:prodRelease": "ENVFILE=.env.prod && cd android/ && gradlew assembleProdRelease",
  "android:bundleRelease": "ENVFILE=.env.prod && cd android/ && gradlew bundleProdRelease"

This script will build the app using the configuration variables defined in each environment file.

But before that, we need to setup applicationIdSuffix and resources for each build variant in android/app/build.gradle file.

Now, define a map in build.gradle associating builds with env files. Do it before the apply from call, and use build cases in lowercase, like:

project.ext.envConfigFiles = [
    dev: ".env.dev",
    prod: ".env.prod",
]

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Next, in android/app/build.gradle, if you use applicationIdSuffix or applicationId that is different from the package name indicated in AndroidManifest.xml in <manifest package="..."> tag, for example, to support different build variants: Add this in android/app/build.gradle

defaultConfig {
    ...
    resValue "string", "build_config_package", "YOUR_PACKAGE_NAME_IN_ANDROIDMANIFEST_XML"
}

After that, define your productFlavours inside android in android/app/build.gradle like:

 flavorDimensions "version"
    productFlavors { 
        dev {
            dimension "version"
            applicationIdSuffix '.dev'
            resValue "string", "com.rn_multiple_variant.dev", "com.rn_multiple_variant"
        }
        prod {
            dimension "version"
            applicationIdSuffix '.prod'
            resValue "string", "com.rn_multiple_variant.prod", "com.rn_multiple_variant"
        }
    }

Next, you can add different resources as well for different build variants as shown in the image below insideandroid/app/src folder:

Separate resources for each build variant

Now, run each command defined in package.json file, like:

npm run android:devDebug

so, what it does is, it will run the dev build variant in debug mode. Similarly, you can use another command like:

npm run android:devRelease

and it will release the app with dev build variant.

Multiple Build Variant

Okay, so while writing this article, I have taken consideration into only 2 of the build variants we generally have while developing the mobile app, i.e. dev and prod variant. But what if we were to work on the same codebase through which, we have to build like 10 applications? In such cases, it will be very difficult for us to switch between different variants every time we build an app. Using Product Flavours, it will be very easy to manage multiple flavors of build variants with a single codebase.

Use Case:
One UseCase can be the Mobile Banking app developed by the same Tech Company for different banks in the Country.

Source Code: Link

Feel free the explore the codebase and let me know if you have any confusion. I will try my best to resolve the issue.

Happy Coding🎉🎉