react-native-dotenv

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.

README

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.

iOS

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

react-native run-ios --configuration Release

Android

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

Benefits we got

• 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.

Troubleshooting

Changes to .env file is not updated

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

Contact

David Chang @zetachang

LICENSE

MIT License, see LICENSE file for detail.