How to Manage Multiple Environments in a React Native App for Android - folio3
blog-page-header-bg

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

How to make a Dismissible List View in Flutter

June 3, 2019
In this blog, we’ll look at how we can build a dismissable list view in Flutter. You can think of dismissible widget as a draggable piece UI of tha...
Read more

Deploying NodeJs (ExpressJs) project with Docke...

May 20, 2019
Prerequisites: Nodejs understanding, Kubernetes/Docker Architecture Theory We are going to learn how to: Deploy an expressjs app (docker image) to ...
Read more

How to Manage Multiple Environments in a React ...

May 16, 2019
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. Envir...
Read more