React Native Configuration:

React-native-config allows you to set up different configuration files for different environments. This way, you can store all your configuration variables in one place and access them from anywhere. The result: no need to duplicate when switching between environments.

In the following sections, we will walk through the steps to manage development, staging, and production environments in a React Native App for iOS and Android.

First of all, we want to expose environment variables to React Native. We will use the react-native-config library to keep configuration variables separate from the code.

We begin by adding the library to the project, then create three environment files in its root: the first for the local development environment (we will name it env.dev), and two others, env. staging and env.production.

Once this is done, accessing your configuration variables from anywhere in your app will be easy: 

In JavaScript:

import Config from 'react-native-config'
Config.API_URL;

Java (for Android-specific files):

public HttpURLConnection getApiClient() {
    URL url = new URL(BuildConfig.API_URL);
}

Objective-C (for iOS-specific files):

#import "ReactNativeConfig.h"
NSString *apiUrl = [ReactNativeConfig envFor:@"API_URL"];

Now move on to the installation. It’s pretty simple:

npm install react-native-config

or

yarn add react-native-config

In Xcode, in the Targets section, right-click the current app target and select “Duplicate”, then “Duplicate Only”. Rename the new target by adding “-dev” at the end of the current name (e.g., “Test-dev”). Then duplicate the target again and rename the new one as “-staging”. The original target will be used as the Production one.

Then you will proceed to set up one Scheme per environment (Staging, Dev, Production). 

On the top bar, click Product, then Scheme, and press “Manage Schemes”. Next, select your current scheme, click on the three dots icon, then press “Duplicate”.

Name your new scheme adding “-dev” at the end. Then duplicate the scheme again and name the new one “-staging”. The original scheme will be used as the Production one.

So, now we need to assign each of the three targets to each of the three schemes. Follow the steps below in every case:

• Select the current scheme and press the “Edit Scheme” option.
• On the left, go to the “Build” section and select the appropriate target, and make sure you select all checkmarks.
• Select only one target according to your scheme.
• Go to “Run” section and choose the corresponding .app as executable.

Now, to set react-native-config for the production environment, expand “Build”, click “Pre-Actions”, click the plus sign, and then “New Run Script Action”.

Paste the script below into the box, then repeat this process for all three environments, replacing .env.dev with the file corresponding to each environment.

echo “.env.dev” > /tmp/envfile

Finally, we need to set up the Podfile with the three new targets. First, we will define a “shared_pods” block that will contain all the pod configurations for a target and then apply it to each of the targets we just created. This is what the Podfile should look like:

…
def shared_pods
config = use_native_modules!
use_react_native!(:path => config["reactNativePath"])
…    // Other pods configuration
end
target Test do       // Production
shared_pods
end
target Test-dev do       // Development
shared_pods
end
target Test-staging do       // Staging
shared_pods
end
…

And that’s it for iOS! Now, to build each environment, open Xcode, select a scheme and a device, and run the app!

First of all, add the next lines at the end of the android/app/build.gradle file, before the “apply from: file(“../../node_modules/ … /native_modules.gradle”)” line:

project.ext.envConfigFiles = [
development: ".env.dev",
staging: ".env.staging",
production: ".env.production",
]
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

Make sure to use only lowercase letters with no special characters on the envConfigFiles key names.

Then, find the defaultConfig object and add the following lines to it:

defaultConfig {
…
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.test"
flavorDimensions "default"
}

Replacing “com.test” with your production app ID.

Finally, we have to create three product flavors, one for each environment. For that, we have to create a “productFlavors” object inside “android”, at the same level as “defaultConfig”. This is what it should look like:

…
productFlavors {         // add this object
development {
versionNameSuffix ‘-dev’
applicationId 'com.test.dev'
}
staging {
versionNameSuffix '-staging'
applicationId 'com.test.staging'
}
production {
applicationId 'com.test'
}
}
…

Replacing each “applicationId” with the correct app ID for each environment.

And that’s it for Android too! Now, in order to build each flavor, you will have to open Android Studio, select your android project, click on the Build tab, then “Select Build Variant…”, select the Active Build Variant for the :app module, and run the app!

So this is pretty much it. Hopefully, this simple process will make your life as a developer easier. You will surely see how react-native-config lets you handle the different configuration needs within an App in an easy, time-saving, and smooth way. Following the steps above, setting it up should be pretty straightforward. Once your environment configuration is properly organized, integrating additional mobile features and libraries—such as react native image picker—becomes much easier to manage across development, staging, and production environments.

If you want to read more useful articles about React Native, you can continue browsing our blog and check out this awesome tutorial!