React Native: Multi-Environment/Flavor Setup (App Icon, App Name, GoogleService.json) for Android [Latest]

When developing an application, developers often need to create multiple builds with different configurations to simplify maintenance and testing. Typically, three builds are created: development, staging, and production. In this case, we will focus on setting up both production and development environments, as staging will be similar to development.

Step 1:

Installing react-native-config

// yarn 
yarn add react-native-config && cd ios && pod install && cd ..
// or
// npm 
npm install react-native-config --save && cd ios && pod install && cd ..

---

Step 2:

Create .env files for each configuration in project root directory:

i) .env.development

ENV=development
API_URL=https://api.dev.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"

ii) .env.production

ENV=production
API_URL=https://api.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"

iii) .env (To run through Android Studio if using project.env.get)
Also select Build Variants > :app > Active Build Variant

ENV=development // production / staging
API_URL=https://api.dev.com
ANDROID_VERSION_CODE=1
ANDROID_VERSION_NAME=1.0
ANDROID_APPLICATION_ID="com.myapp"

---

ANDROID CONFIGURATION:

Step 1:

Go to android/app/build.gradle and add these:

Keep build cases in lowercase like productiondebug, developmentrelease etc.

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

// project.env.get -> mentioned in `.env` files
    defaultConfig {
        applicationId project.env.get("ANDROID_APPLICATION_ID") 
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode project.env.get("ANDROID_VERSION_CODE").toInteger() 
        versionName project.env.get("ANDROID_VERSION_NAME")
        resValue 'string', 'build_config_package','com.myapp'
    }

    buildTypes {
        debug {
            signingConfig signingConfigs.debug
            matchingFallbacks = ['debug', 'release'] //react-native-config
        }

Use applicationIdSuffix/applicationId which should be based on GoogleService.json's android_client_info.package_name if it exist

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

....

        //react-native-config
    flavorDimensions "default"
    productFlavors {
        production {
            // Can be used as per requirement for different environments
            // minSdkVersion rootProject.ext.minSdkVersion
            // applicationId "com.myapp"
            // targetSdkVersion rootProject.ext.targetSdkVersion
            // resValue "string", "build_config_package", "com.awrostamani"
            // applicationId "com.myapp.myappprod"

            applicationIdSuffix ".myappprod"  
// Ensure the applicationIdSuffix matches the package_name in GoogleService.json if it exists. Otherwise, you can use any suffix (e.g., 'development'). Don't forget to add --appIdSuffix in the package.json command.
        }
        development {
            // applicationId "com.myapp.myappdev"
            applicationIdSuffix ".myappdev"
        }
    }
        //react-native-config

....

---

Step 2:

Android Change App name,App Icon, GoogleService.json(as per environment(if multiple)):

In this setup, we copied the main folder and created a development folder where we modified the app icon and app name for the development environment.
Additionally, we configured the GoogleService.json files based on the environment if multiple GoogleService.json files present, else keep in android/app folder only.
For the debug and development builds, we used the development version of GoogleService.json, while the production version was placed in the main folder for production builds.

---

Step 3:

In package.json add these scripts:

  "scripts": {
...
cleanCache": "npm start -- --reset-cache",
    "start": "react-native start",
    "killAllBundler": "killall node",
    "adb": "adb reverse tcp:9090 tcp:9090 && adb reverse tcp:8081 tcp:8081 && adb reverse tcp:3000 tcp:3000",
    "installAll": "yarn && cd ios && pod install && cd ..",
    "cleanGitIgnoredFiles": "rm -rf .jso node_modules package-lock.json yarn.lock && cd ios && rm -rf build pods .xcode.env.local Podfile.lock && cd .. && cd android && rm -rf build && cd app && rm -rf build && cd .. && cd .. && yarn installAll",
    "setDevelopment": "ENVFILE=.env.development",
    "setStaging": "ENVFILE=.env.staging",
    "setProduction": "ENVFILE=.env.production",
    "aos:check": "react-native run-android --list-devices",
    "aos:dev": "yarn installAll && yarn setDevelopment  react-native run-android --mode=developmentdebug --appIdSuffix=myappdev",
    "aos:dev-release": "yarn installAll && yarn setDevelopment react-native run-android --mode=developmentrelease --appIdSuffix=myappdev",
    "aos:prod": "yarn installAll && yarn setProduction  react-native run-android --mode=productiondebug --appIdSuffix=myappprod",
    "aos:prod-release": "yarn installAll && yarn setProduction  react-native run-android --mode=productionrelease --appIdSuffix=myappprod",
    "aos:clean": "cd android && ./gradlew clean",
    "aos:DR-apk": "yarn setDevelopment &&  yarn aos:clean  && cd android && ./gradlew assembleDevelopmentRelease",
    "aos:PR-apk": "yarn setProduction &&  yarn aos:clean  && cd android && ./gradlew assembleProductionRelease",
    "aos:DD-apk": "yarn setDevelopment &&  yarn aos:clean  && cd android && ./gradlew assembleDevelopmentDebug",
    "aos:PD-apk": "yarn setProduction &&  yarn aos:clean  && cd android && ./gradlew assembleProductionDebug",
    "open-apk": "open ./android/app/build/outputs/apk/",
    "aos:dev-apk": "yarn aos:DD-apk && yarn open-apk",
    "aos:prod-apk": "yarn aos:PD-apk && yarn open-apk",
    "uninstallApks": "cd android && ./gradlew uA && cd ..",
    "aos:dev:release-apk": "yarn aos:DR-apk && yarn open-apk",
    "aos:prod:release-apk": "yarn aos:PR-apk && yarn open-apk"
...
}

i) Run yarn aos:dev to run in emulator in development environment.
ii) Run yarn aos:dev-apk to make build/apk in development environment.
Similarly, you can check for all

---

iOS PART->