Handling environment specific configurations in React Native

Many modern-day applications now go through different stages of the product cycle such as development, staging, production etc.

Having different environment variables for each environment will make it a lot easier to manage any application. This article is intended to share one solution to address this problem in React Native. We will be using a library called react-native-config for this purpose; you can also try react-native-dotenv.

We will be focusing on having three different bundles containing configuration files for development, staging and production environments.

Installing react-native-config

Install the package:

1yarn add react-native-config
Copy

For iOS also run pod install after package is installed.

Setup for Android

Add below line of code to android/app/build.gradle to apply plugin.

1apply plugin: "com.android.application"
2+ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
Copy

Create three files in root folder of the project .env.development, .env.staging & .env.production which will contain our environment variables.

1// .env.development
2API_URL=https://myapi.development.com
3
4// .env.staging
5API_URL=https://myapi.staging.com
6
7// .env.production
8API_URL=https://myapi.com
Copy

Now we need to define envConfigFiles in build.gradle associating builds with env files. To achieve this, add the below code before the apply from call, and be sure to leave the build cases in lowercase.

1+ project.ext.envConfigFiles = [
2+   productiondebug: ".env.production",
3+   productionrelease: ".env.production",
4+   developmentrelease: ".env.development",
5+   developmentdebug: ".env.development",
6+   stagingrelease: ".env.staging",
7+   stagingdebug: ".env.staging"
8+ ]
9
10apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
11
Copy

Next, add productFlavors in build.gradle, just below buildTypes.

1flavorDimensions "default"
2  productFlavors {
3    production {}
4    staging {
5      // We can have build-specific configurations here. Like using applicationIdSuffix to create different package name (ex. ".staging")
6    }
7    development {}
8  }
Copy

Names should match based on productFlavors, so productiondebug will match debug in this case and generate debug build of App with configuration from .env.production.

Also add matchingFallbacks in buildTypes as shown below:

1buildTypes {
2  debug {
3    signingConfig signingConfigs.debug
4+   matchingFallbacks = ['debug', 'release']
5  }
6  release {
7    signingConfig signingConfigs.debug
8    minifyEnabled enableProguardInReleaseBuilds
9    proguardFiles getDefaultProguardFil  ("proguard-android.txt"), "proguard-rules  pro"
10  }
11 }
Copy

Add the below scripts to scripts in the package.json file.

1"android:staging": "react-native run-android --variant=stagingdebug",
2"android:staging-release": "react-native run-android --variant=stagingrelease",
3"android:dev": "react-native run-android --variant=developmentdebug",
4"android:dev-release": "react-native run-android --variant=developmentrelease",
5"android:prod": "react-native run-android --variant=productiondebug",
6"android:prod-release": "react-native run-android --variant=productionrelease",
Copy

Now, to have a debug build with staging environment, run:

1yarn android:staging
Copy

Or, to have a release build with staging environment, run:

1yarn android:staging-release
Copy

Setup for iOS

In iOS we will create three new schemes TestAppDevelopment, TestAppStaging & TestAppProduction containing configuration files for development, staging and production environments respectively.

To create schemes, open the project in xcode & do the following:

In the Xcode menu, go to Product > Scheme > Edit Scheme.

Click Duplicate Scheme on the bottom and name it TestAppDevelopment and check the shared checkbox.

We will repeat the above steps two more times (for TestAppStaging & TestAppProduction).

Now edit the newly generated scheme. Expand "Build" settings and click "Pre-actions", and under the plus sign select "New Run Script Action". Select project from the Provide build settings from dropdown.

Where it says "Type a script or drag a script file", type:

1cp "${PROJECT_DIR}/../.env.staging" "${PROJECT_DIR}/../.env"  # replace .env.staging for your file
Copy

Add the below scripts to scripts in the package.json file.

1"ios:dev": "react-native run-ios --scheme 'TestAppDevelopment'",
2"ios:prod": "react-native run-ios --scheme 'TestAppProduction'",
3"ios:staging": "react-native run-ios --scheme 'TestAppStaging'",
Copy

Now, to have a build with staging environment, run:

1yarn ios:staging
Copy

And it will run the application with staging configuration.

Accessing environment variables

Once the setup is complete, we can access the variables as shown below:

1import Config from "react-native-config";
2Config.API_URL;
3//`https://myapi.staging.com`
Copy