MULTIPLE ANDROID BUILD TYPES WITH REACT NATIVE

By default React Native provides debug and release build types.

In debug mode, javascript and asset files are served from the development server (your machine), enabling development features like hot loading, logging…

When you decide to release, and run ./gradlew assembleRelease for example the script will pick the release configuration, bundle the assets, compiles and signs the release build. The compile script will do some performance optimization to boost the app as well.

Usually you need more build types than these 2 default ones. For example you may need a staging type, or different release types (*).

With each build types you may also need to have different configurations and strategies such as:

  • Different application ID (or package id)
  • Different app signing processes with different keystores
  • Different javascript and asset bundling strategies. For debug build you probably want to keep stuff like hot loading and logging info for debugging purposes.

React gradle

React is packed with its own gradle file at ../../node_modules/react-native/react.gradle

It’s where the gradle picks the default values for entry file (index.android.js), bundle flag, package path among other things.

Below are the default configurations, we won’t need to touch most of these when adding another build type.

project.ext.react = [
  bundleAssetName: "index.android.bundle",
  entryFile: "index.android.js",
  bundleInDebug: false,
  bundleInRelease: true,
  root: "../../",
  jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
  jsBundleDirRelease: "$buildDir/intermediates/assets/release",
  resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
  resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
  inputExcludes: ["android/**", "ios/**"],
  nodeExecutableAndArgs: ["node"]
  extraPackagerArgs: []
]

App build.gradle

This is where we define app-specific configurations and override the default configs from the react gradle.

We will add staging build type to this gradle file.

project.ext.react = [
    bundleInStaging: true // Overriding default configuration
]

//...

android {
    defaultConfig {
        applicationId "com.mycompany.myapp"
        // ...
    }

    signingConfigs {
        staging {
            keyAlias = "staging"
            storeFile = file("<KEYSTORE_FILE>")
            keyPassword = "<KEY_PASSWORD>"
            storePassword = "<STORE_PASSWORD>"
        }
        release {
            keyAlias = "release"
            storeFile = file("<KEYSTORE_FILE>")
            keyPassword = "<KEY_PASSWORD>"
            storePassword = "<STORE_PASSWORD>"
        }
    }


    buildTypes {
        debug {
            applicationIdSuffix ".debug"
        }

        staging {
            applicationIdSuffix ".staging"
            signingConfig signingConfigs.staging
            minifyEnabled true
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }

        release {
            applicationIdSuffix ".release"
            signingConfig signingConfigs.release
            minifyEnabled true
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

Some important configurations:

  • bundleInStaging is set to true to enable Javascript and Assets bundling in the staging build. If your build type is different from staging it should be bundleIn<BUILD_TYPE>. Default build types like debug and release should be correct already.
  • signingConfigs for each build type, for more info on the signing process please see here app signing
  • applicationIdSuffix to create different app ids.

When everything is configured properly, you should be able to compile and install this newly added build type. In this case:

cd android && ./gradlew installStaging

or

react-native run-android --variant=staging

Resource folders

You may want to create separate folders for the resources as well. For example you may need different app logos, names or messages for each build type.

alt text


(*) You can also use productFlavors

Khac Anh is a full-stack engineer with an extensive background in web and mobile development. He has built and lead tech teams in several outsourcing and startup companies, one of which was successfully publicly listed.
You might also like...
To stay productive in programming you need to receive feedback for your code as fast as possible. For example, when you want to test out some styling effects with CSS...
Basically it's where you deploy your code to. Using a PaaS has several benefits over Infrastructure-as-a-Service (IaaS) or setting your own physical servers...
React Native provides its own version of ListView, it is essentially different from Android's ListView or iOS'es UITableView...
contact codelink

Contact

Let us know how we can help!