Configure multiple flavor/schema for React Native Apps

In this tutorial, we’ll be discussing Build Types. We’ll see how they make our React-native Development easier and faster especially when we’re creating applications with minimal differences. These differences can be as small as changes in themes and app icons or can be for different stages of the product such as Dev, QA, Production, etc.

We will understand multi-configuration as we want to install three different applications simultaneously on the device. for example, We want to bundle three different apps share the same source code and having display name Dev, QA, and Production.

Here we go…
First of all, create a react native project using react-native-cli. Now, as we all know React-Native provides hybrid solution for mobile application. So, We will divide this tutorial in two parts Android and iOS.

Android

Adding Product Flavors

android {
...
flavorDimensions "default"
...
productFlavors {
dev {
minSdkVersion rootProject.ext.minSdkVersion
applicationId 'com.awesome.project.dev'
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.myapp"
}
prod {
minSdkVersion rootProject.ext.minSdkVersion
applicationId 'com.awesome.project'
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.myapp"
}
qa {
minSdkVersion rootProject.ext.minSdkVersion
applicationId 'com.awesome.project.qa'
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.myapp"
}
}
}

Here we are done with flavour creation.

Running and building the Build Variants

react-native run-android --variant=devDebug --appIdSuffix=dev

Likewise, for QA build command would be

react-native run-android --variant=qaDebug --appIdSuffix=qa

for Production build command would be

react-native run-android --variant=prodDebug //as prod build don't have suffix in applicatId

For, to make release build follow below commands
assemble<ProductFlavour><BuildType>

cd android && ./gradlew assembleDevRelease  //Dev release
cd android && ./gradlew assembleQaRelease //QA release
cd android && ./gradlew assembleProdRelease //Prod release

After running all mention command you will find all three application on device, But you won’t find any difference on build. Let’s make minimal difference on every build.

Custom icons for each build variant

Place any flavor specific icons inside these folders. Take a look inside the main folder if you need a reminder of the folder path for each type of app resources.

Different app names for each build variant

<resources>
<string name="app_name">Awesome Dev</string>
</resources>

Likewise, we can add string res file in respective flavor folder.

Please note that the contents of strings.xml will be merged with the strings.xml inside the main folder instead of replacing it.

Thats all from Android section.

iOS

Adding new configurations

Adding new schemes

Different display names

For React Native ≥0.60.0

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

project 'awesome',
'Dev.Debug' => :debug,
'Dev.Release' => :release,
'Qa.Debug' => :debug,
'Qa.Release' => :release,
'Prod.Debug' => :debug,
'Prod.Release' => :release

target 'awesome' do
# Pods for awesome
...

For React Native <0.60.0

Running multiple configurations side by side

In the project’s info.plist, change the value of Bundle Identifier to $(PRODUCT_BUNDLE_IDENTIFIER)$(BUNDLE_ID_SUFFIX)

You should now be able to have all versions installed at the same time.

Different icons for different configurations

That’s all from Configure multiple flavor/schema for React Native Apps

Originally published at http://blog.logicwind.com on February 8, 2020.

We craft digital products for your business growth. Development | Marketing | Branding | Strategic Partnership