Environment handling in React Native

Many of us are facing issues in handling development and production environment for React Native apps. We can handle javascript environments easily by using .json files. But how to handle files like google-services.json and Android-Manifest.xml values which consist of different app id’s of different environments.

Here are the steps:
Prerequisite: “xml2js” library to handle xml files. You can install it using

yarn add xml2js

1. Create a folder named “envs” (or any other name as per you wish) in root directory of the project.

2. Paste OR Create the config files in this folder. For example. I am handling google-services.json for firebase, values.xml for AndroidManifest.xml and env.json for other config such as server url.

3. Rename the files such as they consist the word production and development respectively. Be careful while naming the files.

4. Now it will look something like this.

5. Now add a file “set-env.js” in the same folder. Which, on running, will place the environment files in their respective locations.

6. Add the following code in set-env.js file.
(Please read the comments in the file for more understanding)

7. Now you have to just run the file before starting the project with required environment and BOOM. You have handled all your environments in the app.

8. Add the scripts in the package.json file so you can run the file using yarn or npm.

9. Here’s the package.json scripts which will run the file in different environment

Start your project using:
yarn start:dev for development environment and
yarn start:prod for production environment and

Don’t forget to change the folder name in the script to the folder name you have created in step1.

After starting the project, all three files will be replaced with your required environment values.