How can I tell react-native what .env file to look at?

Question

On windows, I'm developing a white label app and trying to use env variables to make code specific builds. I'm using react-native-config and I followed their setup on GitHub, but for some reason SET ENVFILE=.env.myenvironment doesn't do anything for me, even with a defined map in build-gradle like this:

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

Any ideas?

Answer 1

After configuring flavors in your gradle, in order to allow react-native to look at the custom .env files in the root of your project folder you must add to android/app/build.gradle

In my example I am creating two apps for the android device using the same codebase, one for group1 and one for group2

//add this to line 3 of your app/build.gradle

project.ext.envConfigFiles = [
  projecta: ".env.development.android.projecta",
  projectb: ".env.development.android.projectb",
]

//don't forget to add

android {
  compileSdkVersion rootProject.ext.compileSdkVersion
  flavorDimensions "default" // add this line
  compileOptions {
  sourceCompatibility JavaVersion.VERSION_1_8
  targetCompatibility JavaVersion.VERSION_1_8
}

and then match up the keys from this array to your product flavors

  productFlavors {
    project1 {
        minSdkVersion rootProject.ext.minSdkVersion
        applicationId 'com.nativeapp.projecta'
        targetSdkVersion rootProject.ext.targetSdkVersion
        resValue "string", "build_config_package", "com.nativeapp"
    }
    project2 {
        minSdkVersion rootProject.ext.minSdkVersion
        applicationId 'com.nativeapp.projectb'
        targetSdkVersion rootProject.ext.targetSdkVersion
        resValue "string", "build_config_package", "com.nativeapp"
    }
}

also make sure that the applicationId and resValue start with your apps package name

in my case it's 'nativeapp' but you can find yours found in the MainActivity.java file.

you can find this if you dig into android/app/main/java/com/ directory.

After this you can then configure your scripts when needed to look like this

"scripts": {
"android:project1": "ENVFILE=.env.development.projecta react-native run-android --variant=projectaDebug --appIdSuffix=projecta",
"android:project2": "ENVFILE=.env.development.projectb.android react-native run-android --variant=projectbDebug --appIdSuffix=projectb",}

Note: when adding scripts, the variant must be the flavor name for example 'project2' followed by 'Debug' = 'projectb' as this is your default buildType

Also make sure you've got the relevant folders created in android/app/src/ for each flavour.

in my case

android/app/src/projecta/
android/app/src/projecta/

if all set up correctly, when you build using the scripts you've created it should create the correct res folder and android manifest files.

If you want to change the name of each individual apps instance, change the strings.xml in the res/values directory.

<resources>
<string name="app_name">Project1</string> //this will be the name of your app when its built in your emulator
</resources>

Answer 2

add this to your package.json file:

"yourCustomEnv:android-windows": "SET ENVFILE=.env.yourCustomEnv && npm run android",
"yourCustomEnv:android-mac": "ENVFILE=.env.yourCustomEnv; npm run android",
"yourCustomEnv:ios": "ENVFILE=.env.yourCustomEnv; npm run ios",

and then, to run in yourCustomEnv mode, run:

For Android:

• on windows:

run npm run yourCustomEnv:android-windows

• on mac:

run npm run yourCustomEnv:android-mac

For iOS

run npm run yourCustomEnv:ios

Full example

if we suppose that your custom environment file is .env.staging, add this to your package.json file:

"staging:android-windows": "SET ENVFILE=.env.staging && npm run android",
"staging:android-mac": "ENVFILE=.env.staging; npm run android",
"staging:ios": "ENVFILE=.env.staging; npm run ios",

and then, to run with .env.staging variables, run:

For Android:

• on windows:

run npm run staging:android-windows

• on mac:

run npm run staging:android-mac

For iOS

run npm run staging:ios

Answer 3

I got react-native-config working with flavors. (RN 0.60+ ) You don't need to use that other library. heres an example that worked for me for white labeling:

project.ext.envConfigFiles = [
   client1devdebug: ".env.client1.debug",
   client1devrelease: ".env.client1.release",
   client2devdebug: ".env.client2.debug",
   client2devrelease: ".env.client2.release",
]

AND then in configs:

 productFlavors {
    client1 {
      dimension "client"
      resValue "string", "build_config_package", "PACKAGE_NAME_IN MANIFEST"
      applicationId "com.app1"
    }
    client2 {
      dimension "client"
      resValue "string", "build_config_package", "PACKAGE_NAME_IN MANIFEST"
      applicationId "com.app2"
    }
      dev {
          ...
          dimension "environment"
      }
      stage {
          minSdkVersion 21
          resValue "string", "app_name", "Stage"
          dimension "environment"
      }
      production {
          minSdkVersion 21
          resValue "string", "app_name", "Prod"
          dimension "environment"
      }

Answer 4

I was using vscode integrated terminal to pass the react-native-config command to tell RN which .env file to look at, and it wasnt working at all..

I started using powershell for windows and tryed the correct command for it. And it work wonders. e.g. $env:ENVFILE=".env.mycustomenvironment"; react-native run-android. It should work the same for react-native run-ios as well as for release builds.

Keep in mind that as of right now (08/20/2019), react-native-config isnt working properly with product flavors in RN 0.60+ when it comes to exposing the .env vars to your .JS files, if you are looking for a workaround for that, take a look at this post but tl;dr is to use react-native-config with react-native-build-config.