react-native-config package Multiple Environments

Question

I am developing app with "react-native" and "react-native-config package". I have installed "react-native-config" according to the manual. (https://www.npmjs.com/package/react-native-config?activeTab=readme)

1. for android - edit "root/android/app/build.gradle"

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"

project.ext.envConfigFiles = [
    debug: ".env.dev",
    release: "env.prod",
    anothercustombuild: ".env",
]

2. for ios - create 2 scheme (dev / prod) and "Config.xcconfig"

for pord scheme run script

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

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

for dev scheme run script

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

"${SRCROOT}/../node_modules/react-native-config/ios/ReactNativeConfig/BuildXCConfig.rb" "${SRCROOT}/.." "${SRCROOT}/tmp.xcconfig"

3. I created 3 files in the root directory. (".env" / ".env.dev" / ".env.prod")

I started my app by using "npx react-native run-ios(run-android)". I'm able to use env variables from the .env file in both iOS and Android

Here are my questions.

1. How can I use env variables in ".env.dev" and ".env.prod"? When I print the value using console.log(Config.API_KEY);, the console always shows me the value from the ".env" file (both on iOS and Android).

2. There are articles that tell me to add the code below to "build.gradle" when I search for it. What role does this code play?

resValue

    namespace 'com.myApp'
    defaultConfig {
        ...
        resValue 'string', 'build_config_package','com.myApp' << add
    }

flavor

    flavorDimensions "version"
    productFlavors {
        develop {
        }
        stage {
        }
        product {
        }
    }

3. How can I reload value of .env files? Even if I modify env variables and re-build and run the app, the previous value is always output. I have tried

$ rm -rf node_modules/.cache/babel-loader/\*
$ npm cache clean --force
$ npm start -- --reset-cache

The only way I was able to reload the env variables was to remove the node-module and install it again as below.

$ npm cache clean --force
$ rm -rf node_modules package-lock.json
$ npm install

4. By doing this setup, it seems like I can do separate dev and prod builds, but my knowledge is lacking, and I'm having trouble grasping it even after Googling. Could you explain this a bit, please?

I'm very new to React Native development. If anyone has solutions, I'd greatly appreciate detailed explanations.

Thank you guys.

Answer 1

1. Way to handle the switch between multiple ENV.

env is always taken from the .env file which is located inside the root. to switch b/w env file you can use custom command.

in package.json add this command :

"switch": "rimraf .env && sh -c 'cp .env.${0} .env'",

Run this command once before npm start, npm run switch dev

Answer 2

1. Use ENVFILE like this:

$ ENVFILE=.env.staging react-native run-ios           # bash
$ SET ENVFILE=.env.staging && react-native run-ios    # windows
$ env:ENVFILE=".env.staging"; react-native run-ios    # powershell

2. You only need that if you alter the applicationId for your other variants. https://github.com/lugg/react-native-config?tab=readme-ov-file#advanced-android-setup

3. .env files do not update through the packager (Metro). Instead re-install the app on your device to receive the changes. npm install changes only make it on your device if they are JS. So you probably re-installed the app after running that command resulting in the .env changes making it to your device.

4. Don't rush your way into setting things up; read the docs patiently. I get a strong feeling you blindly copied the code from the readme without reading the comments surrounding it. Anyway, welcome to the RN community! Good luck

Answer 3

I'm using Fastlane in my project so I just added the following lane to replace .env with desired environment

desc 'update ENV file for production env.'
lane :update_env do |env|
  environment = env[:env] || "uat"
  remove_files(path: "./.env")
  copy_files(source: "./.env." + environment, destination: "./.env")
end

I had created a file for each environment

-.env.production
-.env.uat

Call from other lane

update_env(
   env: "production"
)

Finally lane is executed before building lane

Call from npm scripts

bundle exec fastlane update_env env:${npm_config_env-'uat'}