Configure multiple flavor/schema for React Native Apps

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

Running and building the Build Variants

react-native run-android --variant=devDebug --appIdSuffix=dev
react-native run-android --variant=qaDebug --appIdSuffix=qa
react-native run-android --variant=prodDebug //as prod build don't have suffix in applicatId
cd android && ./gradlew assembleDevRelease  //Dev release
cd android && ./gradlew assembleQaRelease //QA release
cd android && ./gradlew assembleProdRelease //Prod release

Custom icons for each build variant

Different app names for each build variant

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

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

Different icons for different configurations

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

https://www.coinbase.com/price/sushiswap?utm_source=share&utm_platform=Android

Android Jetpack: Navigation Architecture Component

How to add custom Font in Android

Circle Menu in Android | Android Studio | Java

Move from JCenter to Maven in Android

Optimising Gradle build time in multi-module Android projects with plugins

How to create custom buttons in Android?

Retrieving Data fromTextField in Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Logicwind

Logicwind

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

More from Medium

Upload Documents to Firebase using Expo React Native

Expo CLI vs React Native CLI

How to: Social Login (Google/Apple) in your Firebase, React Native (Expo) App

Handling custom layouts on Device orientation changes in React Native