After weeks of caffeine-fuelled coding, your React Native project is slowly taking shape and is now ready to enter the user testing phase. Suddenly you find yourself in a situation where you need to create different builds for each environment and tester group combination. While manually changing settings and replacing files works, it’s often very time consuming and error prone, one forgotten step can lead to many hours of hair pulling. This is clearly unacceptable and we demand a better method!
Here is where iOS Build Configurations and Android Build Variants comes in. Together they will allow you to simultaneously install multiple versions of your app on the same device, each with their own custom settings, display name and icons. These works especially well if your project uses a git flow like branching model to isolate the environments.
Let’s begin with our iOS version.
1. Adding new configurations
Select your project under PROJECT in XCode and in the Info tab, search for Configurations. In there you should have two default configurations — Debug and Release. Click on the + button and duplicate both, name them Beta.Debug and Beta.Release respectively.
[update 3-May-2022] It is very important that the words “Debug” and “Release” in newly duplicated schema names are Capitalised, this is because the check for enabling development mode in is case sensitive.
2. Adding new schemes
Click on your current active scheme and from the drop down select Edit Scheme, this will open the scheme management window.
Click on the Duplicate Scheme button at the bottom of the window to make a copy of your current scheme, name it Beta. Don’t close this window as we are not done yet! Notice on the left panel we have a few run/build options? Change the Build Configuration of Run, Test and Analyze to use the Beta.Debug we created earlier. Change Profile and Archive to Beta.Release.
3. Different display names
Select your Target and in the Build Settings tab, search for Product Name. For both Beta.Debug and Beta.Release, change the product name to MyAppName Beta.
In the project’s info.plist, change the value of Bundle display name to $[PRODUCT_NAME]
4.1 For React Native ≥0.60.0
For each configuration you’ve added, also add the following corresponding entries to your PodFile
platform :ios, '9.0' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
project 'busdue', 'Beta.Debug' => :debug, 'Beta.Release' => :release, 'Prod.Debug' => :debug, 'Prod.Release' => :release
target 'busdue' do # Pods for busdue ....