React Native Dotenv - Using Environment Variables in React Native

Installation

To start using React Native Dotenv in your project, you need to install the package from npm. Open your terminal and navigate to your project directory. Run the following command to install the library:

Usage:

a. .babelrc:

To enable the use of environment variables in your JavaScript code, you need to configure the .babelrc file. Add the following plugins to your .babelrc file:

b. .env:

Create a .env file in the root directory of your project. This file will contain your environment-specific variables. For example:

c. In users.js:

Now you can access your environment variables in your JavaScript code. For example, in a file called users.js, you can import the variables as follows:

[DEPRECATED] White and Black Lists

React Native Dotenv is used to support whitelist and blacklist options to filter which environment variables are exposed. However, these options have been deprecated in favor of a safer approach.

Allow and Block Lists

Instead of using whitelist and blacklist, React Native Dotenv now supports allow and block lists. With the allow option, you can explicitly specify the variables that are allowed to be accessed in your code. Conversely, the block option allows you to block specific variables from being accessed. Reference link

Safe Mode

By default, React Native Dotenv throws an error if a referenced environment variable is not defined in the .env file. You can enable safe mode to suppress these errors by setting the "safe" option to true in the .babelrc file.

Allow Undefined

By default, React Native Dotenv expects all environment variables to be defined in the .env file. However, if you want to allow undefined values for certain variables, you can set the allowUndefined option to true. This can be useful in situations where a variable may not always be required.

Override envName

In some cases, you may need to use a different environment file based on specific conditions. React Native Dotenv allows you to override the default .env file by specifying the envName option in the .babelrc file. This allows you to load environment variables from a different file when needed.

Multi-env

React Native Dotenv supports multiple environment files. Instead of using a single .env file, you can create separate files for different environments, such as .env.development, .env.staging, and .env.production. The appropriate file will be loaded based on the current build environment, providing flexibility for configuring different environments.

TypeScript

React Native Dotenv works seamlessly with TypeScript. You can import the environment variables in your TypeScript code using the import {} from 'react-native-dotenv'; syntax.

Caching

React Native Dotenv incorporates caching to improve performance. During the build process, the loaded environment variables are cached to avoid reloading them unnecessarily. If any changes are made to the .env file, you need to restart the bundler or rebuild the app to apply the updated variables.