DEV Community

React Native: Multiple Environments Setup (Schemas/Flavors)

Leon Arantes on May 18, 2022

Many times when developing an application, we developers need to create different builds with different configurations. Facilitating the maintenanc...

Read full post

ThangVanNguyen • Oct 27 '22 • Edited

In IOS, I add in file Podfile:

  pod 'react-native-config', :path => '../node_modules/react-native-config'
  # For extensions without React dependencies
  pod 'react-native-config/Extension', :path => '../node_modules/react-native-config'

=================================AND======================

cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

change to

echo ".env.development" > /tmp/envfile

so this run well ^^

dinhduongson • Feb 7 '23

thank you so much, it works

Quin • Nov 29 '23

Great help!

Gautham Vijayan • May 18 '22

Extremely Informative article!!!!!!!

gamble2020 • Jun 15 '22 • Edited

As per the documentation for react-native-config the line...

cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env.development"

should be...

cp "${PROJECT_DIR}/../.env.development" "${PROJECT_DIR}/../.env"

Because...react-native-config reads the .env file by default.

sammysmart95 • Nov 22 '23 • Edited

Please i'm having issues running the the IOS. I keep getting this error

cp: /Users/samueladeoye/Documents/open_source/client/infotech-mobile/ios/../.env.development and /Users/samueladeoye/Documents/open_source/client/infotech-mobile/ios/../.env.development are identical (not copied).
I followed all the steps but still having issues

What could be the possible solution?

Prakash Chandra Awal • Jun 9 '23 • Edited

I did the same as mentioned above. But, its not working when i build app from xcode. It only take dev environment even if i chose staging enviornment. However, it works fine when i build app from terminal.

Yavor Daskalov • Jun 18 '22 • Edited

Hi there! Thank you for the detailed explanation. It worked!
There is one problem on android though: If I first try to run the staging app on a blank simulator (it hasn't been installed yet), using the android:staging script, the app does get built and installed correctly, but it isn't run and I get the following error:

Error type 3
Error: Activity class {com.miles/com.miles.MainActivity} does not exist.

I am able, however, to manually run the app by tapping on its icon and it runs as expected.
The production app works properly (builds and starts as expected).
Now that I've run the production app, the staging app starts behaving normally as well.
Could you help me resolve this?

Yavor Daskalov • Jun 28 '22

found a solution:
add "--appId=com.yourAppName.yourEnv" to the end of the script that fails. Of course ".yourEnv" should actually be ".staging" or ".development" or whichever environment fails with this error.

Johan • Apr 27 '23

Hi! I'be been using this method for previous projects without any issue! Really like the approach, so I thought I'd use it in a newer project as well.

However, it seems that when building the targets locally, I need to clean the build folders for the different .env files to load during build.

Anyone else having this issue?
xcode 14.2
RN 0.71.2
react-native-config 1.5.0

Adriano Rodrigues • Feb 13 • Edited

I found a solution:

echo ".env.production" > /tmp/envfile
touch "${PROJECT_DIR}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildDotenvConfig.rb"

Nauman Shafique • Aug 15 '22 • Edited

Hi @leon_arantes

Can you please also share the command to generate Android APKs with the specific environment?
Do we need to add .env file as on the terminal it says "Missing .env file"
How we can access/ use the data from .env files?

Hamza Hussain • May 3 '23

1: To run app
`- "ios": "react-native run-ios --simulator=\"iPhone 14 Pro\" --scheme \"app-development\" ",

"ios:stage": "react-native run-ios --simulator=\"iPhone X\" --scheme \"app-staging\"",
"ios:prod": "react-native run-ios --simulator=\"iPhone X\" --scheme \"app\"",
"android": "cd android && ./gradlew clean && cd .. && react-native run-android --variant=developmentDebug --appIdSuffix 'development'",
"android:stage": "cd android && ./gradlew clean && cd .. && react-native run-android --variant=stagingDebug --appIdSuffix 'staging'",
"android:prod": "cd android && ./gradlew clean && cd .. && react-native run-android --variant=productionDebug --appIdSuffix 'production'"`

2: To Generate APK or AAB
`- "apk": "cd android && ./gradlew clean && ./gradlew assembleDevelopmentRelease",

"apk:prod": "cd android && ./gradlew clean && ./gradlew assembleProductionRelease",
"apk:stage": "cd android && ./gradlew clean && ./gradlew assembleStagingRelease",
"aab": "cd android && ./gradlew clean && ./gradlew bundleDevelopmentRelease",
"aab:prod": "cd android && ./gradlew clean && ./gradlew bundleProductionRelease",
"aab:stage": "cd android && ./gradlew clean && ./gradlew bundleStagingRelease",`

Sarcasm • Sep 28 '22

Video explaination if anybody interested in it.

I was also going through this issue, this video helped me alot. Though still you'll have to manage env variables separately but flavours are well explained in this video in a very simple way. youtu.be/TvBm7UZNyy8