Stream of Consciousness

Mark Eschbach's random writings on various topics.

React Native: Configuring an Application per Environment

Categories: programming

Tags: react-native

Wrote the latest iteration of my home services apps mobile client in React Native. Testing against my local laptop on my phone over WiFi worked well. Now I just need to package per-environment URLs to work with my naming scheme.

Looks like react-native-config is the popular module to do so. Looks simple enough to get setup.

Run the following in a shell.

yarn add react-native-config

I setup a .env file in the root of my project folder, then attempted to suck in the values via:

import Config from 'react-native-config';

console.log('Initialization', Config);

To get the values. Unfortunately that did not work. Although auto-linking did oddly. Turns out there is one more step which must be done on Android; I am currently only building this application for Android so I did not check iOS. The following needs to be placed in android/app/build.gradle right under your other apply invocations.

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

After checking with a build and release it did not work unfortunately. Found a new method to check logs for a specific application:

adb logcat --pid=$(adb shell pidof -s com.example.app)

Additional changes need to be made to the Android build. Although this time it makes sense the auto-install mechanism would be skipped given how flexible the Android flavors are. I stuck the following below the project.ext.react block.

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

After a build and test deployment it worked. Still need to setup the debug variant to have a different artifact ID.