to navigateEnterto select Escto close

    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

    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: ""
    2+ apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

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

    1// .env.development
    4// .env.staging
    7// .env.production

    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+ ]
    10apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

    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  }

    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 }

    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",

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

    1yarn android:staging

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

    1yarn android:staging-release

    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

    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'",

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

    1yarn ios:staging

    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";