What is react-native-dotenv?
The react-native-dotenv package is used to load environment variables from a .env file into a React Native application. This allows developers to manage configuration settings and sensitive information like API keys, database URLs, and other environment-specific variables in a secure and organized manner.
What are react-native-dotenv's main functionalities?
Loading Environment Variables
This feature allows you to load environment variables from a .env file into your React Native application. By importing the variables using the @env module, you can access them throughout your application.
import { API_URL } from '@env';
console.log(API_URL);
Customizing Environment Variable Prefix
You can customize the prefix for environment variables to avoid conflicts. By default, the package uses the @env prefix, but you can change it to something else if needed.
import { API_URL } from '@env';
console.log(API_URL);
TypeScript Support
The package provides TypeScript support, allowing you to declare the types of your environment variables. This helps in maintaining type safety and avoiding runtime errors.
declare module '@env' {
export const API_URL: string;
export const OTHER_ENV_VAR: string;
}
Other packages similar to react-native-dotenv
react-native-config
react-native-config is another popular package for managing environment variables in React Native applications. It allows you to define different environment configurations and access them in your code. Compared to react-native-dotenv, react-native-config offers more advanced features like multiple environment support and integration with native code.
dotenv
dotenv is a widely-used package for loading environment variables from a .env file into Node.js applications. While it is not specifically designed for React Native, it can be used in conjunction with other tools to achieve similar functionality. Compared to react-native-dotenv, dotenv is more general-purpose and lacks some of the React Native-specific features.
react-native-dotenv
Let you import
environment variables from a .env file in React Native, don't need any native code integration.
Install
$ 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
Usage
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)
How it works?
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')
Can I use different .env settings for production ?
Yes, simply create a separate .env.production file and the default release process of react-native will pickup the right config.
To test it locally, you can use the Release configuration to launch the Simulator / Emulator.
iOS
react-native run-ios --configuration Release
Android
react-native run-android --configuration Release
```
## Benefits we got
* It could find out error like importing an non-existing variable.
![](https://github.com/zetachang/react-native-dotenv/raw/master/error.png)
* Zero native code integration required. (compared to [react-native-config](https://github.com/luggit/react-native-config))
* Given that we use the existing [dotenv](https://www.npmjs.com/package/dotenv) package to parse **.env** file, the same config file could be reused in nodejs environment.
## Contact
[David Chang](http://github.com/zetachang)
[@zetachang](https://twitter.com/zetachang)
## LICENSE
MIT License, see LICENSE file for detail.