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

If you haven't got .babelrc set up for React Native, run

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

And create a file named .babelrc as follow in the project root.

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

Usage

Add app configuration in the .env file.

API_KEY=lorem
ANOTHER_CONFIG=foobar

And 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 a babel plugin. It replaces referenced imported members as the values specified in the .env file. So the above example will get compiled as below,

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

What we got?

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

• Zero native integration required. (compared to react-native-config)
• Since beneath, we use the current dotenv package, so the same .env file could be reused in nodejs environment.

Contact

David Chang @zetachang

LICENSE

MIT License, see LICENSE file for detail.