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

Load environment variables using import statements.

Installation

$ npm install react-native-dotenv

Introduction

Breaking changes: moving from v0.x to v2.x changes both the setup and usage of this package. Please see the migration guide.

Many have been asking about the reasons behind recent changes in this repo. Please see the story wiki page.

If you'd like to become an active contributor, please send us a message.

Usage

.babelrc

Basic setup:

{
  "plugins": [
    ["module:react-native-dotenv"]
  ]
}

If the defaults do not cut it for your project, this outlines the available options for your Babel configuration and their respective default values, but you do not need to add them if you are using the default settings.

{
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "@env",
      "path": ".env",
      "blacklist": null,
      "whitelist": null,
      "safe": false,
      "allowUndefined": true
    }]
  ]
}

Note: for safe mode, it's highly recommended to set allowUndefined to false.

.env

API_URL=https://api.example.org
API_TOKEN=

In users.js

import {API_URL, API_TOKEN} from "@env"

fetch(`${API_URL}/users`, {
  headers: {
    'Authorization': `Bearer ${API_TOKEN}`
  }
})

White and black lists

It is possible to limit the scope of env variables that will be imported by specifying a whitelist and/or a blacklist as an array of strings.

{
  "plugins": [
    ["module:react-native-dotenv", {
      "blacklist": [
        "GITHUB_TOKEN"
      ]
    }]
  ]
}

{
  "plugins": [
    ["module:react-native-dotenv", {
      "whitelist": [
        "API_URL",
        "API_TOKEN"
      ]
    }]
  ]
}

Safe mode

Enable safe mode to only allow environment variables defined in the .env file. This will completely ignore everything that is already defined in the environment.

The .env file has to exist.

{
  "plugins": [
    ["module:react-native-dotenv", {
      "safe": true
    }]
  ]
}

Allow undefined

Allow importing undefined variables, their value will be undefined.

{
  "plugins": [
    ["module:react-native-dotenv", {
      "allowUndefined": true
    }]
  ]
}

import {UNDEFINED_VAR} from '@env'

console.log(UNDEFINED_VAR === undefined) // true

When set to false, an error will be thrown. This is no longer default behavior.

Caveats

When using with babel-loader with caching enabled you will run into issues where environment changes won’t be picked up. This is due to the fact that babel-loader computes a cacheIdentifier that does not take your environment into account.

You can easily clear the cache:

rm -rf node_modules/.cache/babel-loader/*

Or you can override the default cacheIdentifier to include some of your environment variables.

Multi-environment is still a work in progress.

Credits

• Based on David Chang’s works on babel-plugin-dotenv.
• Also based on Bertrand Marron's works on babel-plugin-dotenv-import.

Miscellaneous

    ╚⊙ ⊙╝
  ╚═(███)═╝
 ╚═(███)═╝
╚═(███)═╝
 ╚═(███)═╝
  ╚═(███)═╝
   ╚═(███)═╝