Part 1 - Android configuration for environment variables

It is Part 1 in a series of the setup guide to configure the Staging and Production environments in the application.

For android, we will be using the product flavours. In the file android/app/build.gradle, we will add 2 flavours for our staging and release configuration after buildTypes:

flavorDimensions "appType"
productFlavors {
  staging {
    dimension "appType"
    applicationIdSuffix ".staging"
    resValue "string", "app_name", "Config Demo-Staging"
  }
  production {
    dimension "appType"
    applicationIdSuffix ".production"
    resValue "string", "app_name", "Config Demo"
  }
}

Note: You can read more about the android build variants here.

As you can see here, we are defining 2 separate parameters for our two app variants.

Here, the applicationIdSuffix will be appended to the end of the application id e.g., the application id com.configdemo, will become com.configdemo.staging and com.configdemo.production for staging and production respectively.

The app_name is the application display name for the staging and the production variants.

IMPORTANT: As we are defining our app_name in this block, we need to delete the app_name from the android/app/src/main/res/values/strings.xml. Otherwise, you would get an error while making the build: “Duplication entry”.

Now, at the very top of the same android/app/build.gradle file, add this after apply plugin:

project.ext.envConfigFiles = [
  staging: ".env.staging",
  production: ".env.production",
]

The above code will select the appropriate env file for the selected build variant, i.e., .env.staging for the staging environment and .env.production for the production environment.

Next, we will add the following line, just below to the above code block to apply the plugin for the react-native-config.

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

As we have applicationIdSuffix that is different from the package name indicated in AndroidManifest.xml in <manifest package=”…”> tag to support different build variants, we have to add the following line in android/app/build.gradle under the defaultConfig block like as:

defaultConfig {
  ...
  resValue "string", "build_config_package", "com.configdemo" //YOUR_PACKAGE_NAME_IN_ANDROIDMANIFEST.XML
}

Upto this point, we are all set for running and getting different configurations defined in our env files as per the selected build flavour for Android.

Now we are ready to run our application and see it in action.

Update(March 28, 2024): Starting from React Native version 0.74.0, as the react-native-cli version was updated to v12.0.0, the --variant option has been removed from the CLI and replaced with the --mode option.

For react-native version < 0.74.0:

To run the staging build variant for android, run the following command in the terminal inside the root directory of your project:

npx react-native run-android --variant=stagingDebug --appIdSuffix=staging

Similarly, to run the production variant, we can do this by hitting the command:

npx react-native run-android --variant=productionDebug --appIdSuffix=production

You can also create 2 scripts in the package.json file to run the desired variant like:

For react-native version ≥ 0.74.0:

To run the staging build variant for android, run the following command in the terminal inside the root directory of your project:

npx react-native run-android --mode=stagingDebug --appIdSuffix=staging

Similarly, to run the production variant, we can do this by hitting the command:

npx react-native run-android --mode=productionDebug --appIdSuffix=production

You can also create 2 scripts in the package.json file to run the desired variant like:

Now, you can run the desired build variant by running:

yarn androidStagingDebug

Or

yarn androidProductionDebug

To run the android application from the Android studio, you can follow the following steps:

When you will open your application in the Android Studio, after finishing up the synchronisation of the gradle, you will see 4 build variants of the application under the Build Variants section as shown below in the screenshots and select the desired build variant to run:

After selecting the build variant, the gradle will sync again. After the gradle sync, you can run your build directly from the run option which you usually use to run the build from the android studio:

That is it for the Android Configuration.

To configure the iOS, please follow the Part 2.