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
Command⌘
+M
to launch the developer menu in Android emulator.- Tap DevSettings.
- 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.
MIT License, see LICENSE file for detail.