Amid the COVID-19 outbreak, Folio3 aims to help clinics serve patients with telemedicine effectively.

How to Manage Multiple Environments in a React Native App for Android

How to Manage Multiple Environments in a React Native App for Android
COMMENTS (0)
Tweet

This is a step by step guide for React Native Developers to understand how to manage multiple environments in a React Native App for Android. Environment specific builds give us a way to:

  • Change the values of variables at build time
  • Change app/bundle ids to allow the installation of any environment variant on the same device at the same time
  • Change the icon for each build variant
  • Change the display name of the app
  • Change the app launch screen

Here we will be creating two versions of the same app with multiple flavors.

Scenario: 

We had two applications, one for the sales team and other for marketing but 90% of the views of the applications were the same. So instead of creating two different applications, we used this approach to save our time and make code maintenance easier. We have used product flavors, build variants and react-native-config package to solve our problem.

Step#1: React Application Using React Native Cli

 Now run your android application by:

 After successful completion of installation, your directory structure looks like this:

React Native Multiple Environments

Step#2: Setup Product Flavors In Android

 We will setup android multiple environments (apps) using product flavors.

1- Open the build gradle file: android/app/build.gradle

Add dot env gradle path on 2nd line:

2- Add env configuration for sales and marketing environment.

Don’t forget to use flavorDimensions “default”:

3- The most important thing at the android end is to create product flavors.

Inside android/app/build.gradle add these lines:

Here we have created two product flavors: marketing and sales.

4- Create a launch screen and Icon for both the flavors

By default, the ‘res’ folder is inside src/main folder as shown below:
React Native Multiple Environments

But If we want to have different icons and splash screens for the flavors (sales and marketing), create sales and marketing folders in src. Remember to keep the folder name same as product flavor name defined in build.gradle.

Now we have three folders: main, sales and marketing. Sales and marketing contain the icon, splash screens and application values. If something doesn’t exist in the product flavor directory, then main directory resources will be used.
React Native Multiple Environments

So we have removed app/src/main/res and created a res folder inside the marketing and sales folder.

Step#3: Using Env Files In React Native Code

For using environment variable we will use react-native-config package.

or

Then:

You can see documentation here: https://github.com/luggit/react-native-config

After installing this package create two env files at the root of your project.  One for sales i.e .env.sales and one for marketing i.e .env.marketing
React Native Multiple Environments

Now you can access environment variables using config module

Step#4: Build Your Application

Run On Android:

In order to run your application on simulator add these in package.json inside ‘scripts’ tag

 

Create Unsigned Build:

For creating unsigned build or apk add these scripts in your package.json 

For Sales Environment:

For Marketing Environment:

 

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

Why the Daily Scrum is NOT a Status Meeting?

February 3, 2020
I am here today to debunk, The Myth “The Daily Scrum is the Status Meeting”. This is a key misconception in the industry and often resu...
Read more

A Complete Guide to Custom Caching in Magento 2...

November 29, 2019
In this blog, I will explain how to create your own cache in Magento 2, and how to read and write data from that custom cache. I hope after reading...
Read more

React Hooks

September 3, 2019
React is a javascript framework for building interactive client side interfaces along with the integration with back-end server. React considers th...
Read more