React Native: Multiple Environments Setup (Schemas/Flavors)

Many times when developing an application, we developers need to create different builds with different configurations. Facilitating the maintenance and testing process. Usually 3 different builds are created: development, staging and production.

Installing react-native-config

Install the package

// yarn 
yarn add react-native-config

// npm 
npm install react-native-config --save

For iOS also run pod install after package is installed.

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

apply plugin: "com.android.application"
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle" // <- add this line

Create .env files for each configuration

.env.development

ENV=development
API_URL=https://api.dev.com

.env.staging

ENV=staging
API_URL=https://api.staging.com

.env.production

ENV=production
API_URL=https://api.com

Setup for Android

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.

android/app/build.gradle

apply plugin: "com.android.application"

// add this block
project.ext.envConfigFiles = [
   productiondebug: ".env.production",
   productionrelease: ".env.production",
   developmentrelease: ".env.development",
   developmentdebug: ".env.development",
   stagingrelease: ".env.staging",
   stagingdebug: ".env.staging"
]
// ---

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradl

Adding Product Flavor on project below line compileSdkVersion

android/app/build.gradle

android {
    ndkVersion rootProject.ext.ndkVersion
    compileSdkVersion rootProject.ext.compileSdkVersion

    // add this block
    flavorDimensions "default"
    productFlavors {
        production {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        staging {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.staging"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
        development {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.zenix.development"
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.zenix"
        }
    }
   // ---
...

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:
android/app/build.gradle

 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release'] // <- add this line
        }
        release {
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

Create scripts on package.json

"android:staging": "react-native run-android --variant=stagingdebug",
"android:staging-release": "react-native run-android --variant=stagingrelease",
"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",

Android Change App name and App Icon

Just copy the android/app/main folder and rename it to the referring names placed in the flavors in our case we put it
development and staging.

• Duplicate main file
  

• Rename file to development or staging and remove file java
  

• To change the app icons, just add it inside the specific mipmap of the build development, staging or main(production).

• To change app name, open file and rename

android/app/src/development/res/values/strings.xml

<resources>
    <string name="app_name">zenix dev</string>
</resources>

android/app/src/staging/res/values/strings.xml

<resources>
    <string name="app_name">zenix stg</string>
</resources>

• The result should be like

Setup for iOS

• Duplicate schema on Xcode 2 times

• Click on duplicate only

• Rename target to TargetDev and TargetStg
  

• The result should be like:
  

• Next step open manage schemas
  

• Check that the names have been changed correctly
  zenix copy to zenixDev
  

• Now we
  

• Select schema build settings same as selected schema and add this script
  cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

Edit schema > Build > Pre-actions

• Repeat the same process for the debug mode pre-actions
  

• Finishing the development configuration, we need to do the same process for staging, changing the script from development to staging
  
  

• Correctly name the info.plist files of each schema

• Rename info.plist on dev build settings
  Schema*Dev* > Build Settings > Search filter > info.plist File
  zenix dev-Info.plist
  

• Rename info.plist on dev build settings
  Schema*Stg* > Build Settings > Search filter > info.plist File
  zenix stg-Info.plist
  

• Open Podfile and change target to abstract_target and rename abstract_target to ProjectName+CommonPods like:

target 'zenix' do // <- Remove this

abstract_target 'zenixCommonPods' do // <- Add this

• Inside the abstract_target add the targets

 target 'zenixDev' do
 end

 target 'zenixStg' do
 end

 target 'zenix' do
 end

• Now just give a pod install in the ios folder

iOS Change App Icon and App Name

• Select the target name and go to general and search for Display name

• Further down there will be the app icon, just select another app icon
  

• The result should be like:

See the source code

https://github.com/LeonArantes/react-native-multilpe-enviroments