Let you import environment variables from a .env file in React Native, don't need any native code integration.

$ npm install react-native-dotenv --save-dev

Add the react-native-dotenv preset to your .babelrc file at the project root.

{
  "presets": ["react-native", "react-native-dotenv"]
}

If you haven't got .babelrc set up for React Native, remember to install babel-preset-react-native first.

$ npm install babel-preset-react-native --save-dev

Add your app configuration in an .env file.

API_KEY=lorem
ANOTHER_CONFIG=foobar

Now you can import it in your .js file.

import { API_KEY, ANOTHER_CONFIG } from 'react-native-dotenv'

ApiClient.init(API_KEY, ANOTHER_CONFIG)

As you can see, it's implemented as a babel plugin. All referenced imported members are replaced as the values specified in the .env file.

The example above will get compiled as below.

ApiClient.init('lorem', 'foobar')

Yes, simply create a separate .env.production file and the default release process of react-native will pickup the right config.

You can use the Release configuration to launch the Simulator. (Only supported in RN v0.39+)

react-native run-ios --configuration Release

1. Command⌘ + M to launch the developer menu in Android emulator.
2. Tap DevSettings.
3. Toggle JS Dev Mode.

• It could find out error like importing an non-existing variable.

• Zero native code integration required. (compared to react-native-config)
• Given that we use the existing dotenv package to parse .env file, the same config file could be reused in nodejs environment.

Manually edit the file importing react-native-dotenv (either add a blank line or whitespace) will work.

David Chang @zetachang

MIT License, see LICENSE file for detail.