If you are used to regularly working with React Native, then you have likely faced at some point the problem of changing configuration variables when switching from one environment to another. So, is there an easy way to solve the problem of environmental variables? As a matter of fact, there is.

After you finish reading this article, your life as a React Native dev will hopefully become much easier. You’ll be able to save part of your precious time, and you’ll avoid those kinds of mistakes that arise from tedious repetition. This blog aims to teach you all the basics of understanding React Native Configuration.

React-native-config allows you to set up different configuration files for different environments. This way, it can be used to store all your configuration variables in the same place so that you can access them from anywhere. The result: no need for duplications when switching from one environment to another.

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

Getting started: Use React Native Configuration library

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 that we will name 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

How to set up iOS

In Xcode, on the Targets section, right-click on the current app target and press “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, and repeat this process for all three environments, replacing .env.dev with the file that corresponds to the 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, in order to build each environment, you will have to open Xcode, select a scheme, a device, and run the app!

How to setup Android

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 will allow you to deal with the different configuration needs existing inside an App in an easy, time-saving, and smooth way. Following the steps above, setting it up should be pretty straightforward. 

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