Streamline your React Native App’s configuration with react-native-config

React Native is a popular framework for building mobile applications using JavaScript and React. One of the challenges of building a React Native app is managing different configurations for different environments, such as development, staging, and production. This is where react-native-config comes in.

React-native-config is a library that allows you to define and manage environment-specific configurations in your React Native app. This can include things like API endpoints, feature flags, and other settings that may need to be different depending on the environment.

To use react-native-config, you first need to install the library in your project by running the below command.

yarn add react-native-config

For iOS, also run "pod install“ after the package is installed.
Next, you need to set up the library by creating a .env file at the root of your project. This file should contain key-value pairs for each of your config variables. For example:

API_URL=https://api.example.com
FEATURE_FLAG_1=true

Accessing Environment Variables

Once you have your .env file set up, you can use the config variables in your code by importing the library and accessing the variables as properties. For example,
In Javascript

import Config from 'react-native-config';
console.log(Config.API_URL); // https://api.example.com
console.log(Config.FEATURE_FLAG_1); // true

In Android

Config variables are available to your Java classes via BuildConfig:

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

In Gradle
You can also read them from your Gradle configuration:

defaultConfig {
    applicationId project.env.get("APP_ID")
}

All variables are strings, so you may need to cast them. For instance, in Gradle:

versionCode project.env.get("VERSION_CODE").toInteger()

In iOS
Read variables declared in .env from your Obj-C classes like:

// import header
#import "ReactNativeConfig.h"

// then read individual keys like:
NSString *apiUrl = [ReactNativeConfig envFor:@"API_URL"];

// or just fetch the whole config
NSDictionary *config = [ReactNativeConfig env];

React-native-config also supports multiple .env files. This way you can have different configurations for different environments. For example, you can create a .env.production file that contains the production-specific config variables, and a .env.staging file for staging-specific config variables.

Android Configuration

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

// 2nd line, add a new apply:
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

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

project.ext.envConfigFiles = [   
    productiondebug: ".env.production",   
    productionrelease: ".env.production",   
    developmentrelease: ".env.development",   
    developmentdebug: ".env.development",
 ]

Adding Product Flavors

Adding product flavors to a React Native app allows you to create different versions of your app for various purposes. In order to add product flavors to a React Native app, you will need to make changes to your app’s android/app/build.gradle file and add the following code to define the product flavors:

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

Also, add matchingFallbacks in buildTypes as shown below:

buildTypes {
  debug {
    signingConfig signingConfigs.debug
+   matchingFallbacks = ['debug', 'release']
  }
 }

To easily switch between different build environments, add the following scripts to your package.json file under the scripts section:

"android:dev": "react-native run-android --variant=developmentdebug",
"android:dev-release": "react-native run-android --variant=developmentrelease",
"android:prod": "react-native run-android --variant=productiondebug",
"android:prod-release": "react-native run-android --variant=productionrelease",

To build your app in the development environment in debug mode, use the command:

yarn android:dev

And to build your app in the development environment in release mode, use the command:

yarn android:dev-release

Similarly, you can use the command yarn android:prod for debugging in the production environment and yarn android:prod-release for release in the production environment.

iOS Configuration

In order to manage different configurations for development and production environments on iOS, we will create two new schemes in Xcode, named AwesomeAppDevelopment and AwesomeAppProduction.

• To create these schemes, open the project in Xcode, go to Product > Scheme > Edit Scheme.
• Click on Duplicate Scheme and name it AwesomeAppDevelopment and check the shared checkbox.
• Repeat this process for AwesomeAppStaging and AwesomeAppProduction.

Then edit the newly created scheme to use a different env file. From the same manage scheme window:

• Expand the “Build” settings on the left
• Click “Pre-actions”, and under the plus sign select “New Run Script Action”
• Where it says “Type a script or drag a script file”, type:

cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env"

To copy the configuration file for the desired environment and also ensure that Provide build settings from, just above the script, has a value selected so that PROJECT_DIR is set.

To easily switch between different build environments and configurations on iOS, add the following scripts to your package.json file under the ‘scripts’ section:

To build your app in the development environment in debug mode, use the command:

yarn ios:dev

To build your app in the development environment in release mode, use the command

yarn ios:dev-release

Similarly, you can use the command yarn ios:prod for debugging in the production environment and yarn ios:prod-release for release in the production environment.”

React-native-config is a powerful tool for managing environment-specific configurations in your React Native app. It allows you to easily define and access config variables in an organized and flexible way. This allows you to keep your codebase clean and maintainable, while still being able to test and deploy your app to different environments.

Hope this blog helps you in setting up the environment for your next React Native app. Let us all meet again in the next blog with another interesting topic!