Building React Native app for multiple environments (2019 update)

Yee Wong
Yee Wong
Jul 12, 2017 · 7 min read

1. Adding new configurations

2. Adding new schemes

3. Different display names

4. React Native Schemes Manager to the rescue!

yarn add --dev react-native-schemes-manager
{
"name": "BusDue",
"version": "0.0.1",
"scripts": {
"postinstall": "react-native-schemes-manager all"
},
"xcodeSchemes": {
"Debug": [
"Beta.Debug"
],
"Release": [
"Beta.Release"
],
"projectDirectory": "iOS"
},
"projectDirectory": "iOS"
}
}

5. Running multiple configurations side by side

6. Different icons for different configurations

7. Run any configuration via command line

"runSim":"react-native run-ios --simulator\"iPhone8\" --scheme Beta --configuration Beta.Debug",
"runDevice":"react-native run-ios --device\"MyIPhoneName\" --scheme Beta --configuration Beta.Debug",
yarn run runSim

Android

1. Adding Product Flavors

android {
compileSdkVersion rootProject.ext.compileSdkVersion
buildToolsVersion rootProject.ext.buildToolsVersion

flavorDimensions "default" // <-- !!! add this line !!!

defaultConfig {...}
splits {...}
buildTypes {...}
productFlavors {
dev {
minSdkVersion rootProject.ext.minSdkVersion
applicationId 'com.busdue.dev'
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.myapp"
}
beta {
minSdkVersion rootProject.ext.minSdkVersion
applicationId 'com.busdue.beta'
targetSdkVersion rootProject.ext.targetSdkVersion
resValue "string", "build_config_package", "com.myapp"
}
}
applicationVariants.all {...}
}

2. Custom icons for each build variant

3. Different app names for each build variant

<resources>
<string name="app_name">BusDue Beta</string>
</resources>

4. Running and building the Build Variants

react-native run-android --variant=devDebug --appIdSuffix=dev
cd android && ./gradlew assembleBetaRelease

That’s all folks!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade