Building for Multiple Environments with React-Native

Building for Multiple Environments with React-Native

This is an example repository for building react-native for multiple environments like local, staging, and production for android and ios.

Building for multiple environments with React-Native

Problem build an app that runs on multiple environment (local, staging, production, etc.) and install all of them on the same device.

Initialize react-native

npx react-native init multi_build --directory multi-build

Android

1. Adding flavors for each environment

go to android/app/build.gradle, below buildTypes block, add the following:

flavorDimensions "version"
productFlavors {
    local {
        applicationIdSuffix ".local"
    }
    staging {
        applicationIdSuffix ".staging"
    }
    production {}
}

the local, staging, and production are all our the different environments we are going to build for, the applicationIdSuffix allows us to add a suffix on the applicationId and allow us to install all of them on the same device.

2. Displaying different names for each environment

You'll need to display different names to differentiate them together, you can do that by creating android/app/src/{environment}/res/values/strings.xml for each environment.

Create android/app/src/local/res/values/strings.xml and add the following:

<resources>
  <string name="app_name">MulBuild LOC</string>
</resources>

Do the same thing for staging environment.

NOTE: For production, you don't have to since it will use the android/app/src/main/res/values/strings.xml.

3. Running the app

To run the app, you need to do npm run android -- --variant=$(flavor)$(buildType) where the $(flavor) is one of the environments we defined on productFlavors, in this example, we have the following variants:

  • localDebug
  • localRelease
  • stagingDebug
  • stagingRelease
  • productionDebug
  • productionRelease

When developing locally, we'll need to run npm run android -- --variant=localDebug

Known issues

4. Building AAB

To bundle the AAB files to be uploaded to the playstore, you can still run ./gradlew bundleRelease which will bundle release for each of the flavors we have defined and you'll see the outputs on android/app/build/outputs/bundle. However, you might only want to bundle one flavor, you can run ./gradlew bundleProductionRelease which will only bundle production.

####### That's it!

iOS

Using XCode, open ios/multi_build.xcworkspace.

1. Adding configurations for each environment

In your ios/Podfile, add the following code:

# ...
platform :ios, '12.0'

# start here <----
project 'multi_build',
        'LocalDebug' => :debug,
        'LocalRelease' => :release,
        'StagingDebug' => :debug,
        'StagingRelease' => :release
# end here

target 'multi_build' do
# ...

1.1. On the left sidebar, click on the multi_build xcode project.

1.2. Then on the second left sidebar, under PROJECT, click on the multi_build project.

1.3. Click on Info tab.

1.4. Under Configuration, you'll see that there should be Debug and Release there initially, there's also a + button just below that, click on that + button.

1.5. Click on Duplicate "Debug" Configuration; name the configuration as LocalDebug.

1.6. Click on that + button again.

1.5. Click on Duplicate "Release" Configuration; name the configuration as LocalRelease.

Do the same thing for Staging

NOTE: For production, you don't have to since it will use the Debug and Release by default.

2. Adding schema for each environment

2.1. On the topbar, click where it says multi_build >; Then click on Edit Schema

2.2. A dialog will appear, just click on Duplicate Schema; Then name that "Local"

2.3. Where it says "Debug", change it to "LocalDebug"; Wher it says "Release", change it to "LocalRelease"; Do this for all the panels on the left sidebar, to start with, press on Run and change the "Build Configuration".

Do this same process for the Staging environment.

3. Using different Bundle ID, display name, product name, and info plist for each environment

Having different names and bundle id for each environment will allow us to install all environments in one device and differentiate them.

3.1 To use different display name for each environment

On info.plist change the Bundle display name to $(PRODUCT_NAME)

3.2 To use different info plist for each environment (optional)

3.2.1. Copy the info.plist twice and then rename one copy to info_local.plist and other info_staging.plist.

3.2.2. Add the newly created info_local.plist and info_staging.plist to the project.

Note: the add file dialog might be too small, you can expand it to view more.

By the end, you should have the following:

3.2.3. Since you'll be using the info.plist for production builds, you can remove the App Transport Security Settings entry on it.

3.2.4. Remove the info.plist entries on the Copy Bundle Resources. You can select them all by clicking on them while holding down cmd.

3.3 To use different bundle id, product name, and info plist for each environment

On the targets, select the multi_build and go to build settings and click on the plus button and click on Add User-Defined Setting and name that BUNDLE_ID_SUFFIX and just change the name for each build configurations accordingly then on info.plist, change the Bundle identifier to $(PRODUCT_BUNDLE_IDENTIFIER).$(BUNDLE_ID_SUFFIX)

4. Running the App

4.1. Run cd ios && pod install && cd ..

4.2. Choose schema, choose "Local" for example.

4.3. Choose a simulator you want to use.

4.4. Then click on the "Play" button.

That's it!

Download Details:

Author: aprilmintacpineda

Source Code: https://github.com/aprilmintacpineda/react-native-multiple-build-environments-example

react-native react mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.

Which is the best React Native app development company in New York?

Hire top react native app development company in New York to build and develop custom react native mobile apps for Android & iOS with the latest features.