Need help with react-native-dotenv?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

goatandsheep
160 Stars 11 Forks MIT License 379 Commits 8 Opened issues

Description

Load react native environment variables using import statements for multiple env files.

Services available

!
?

Need anything else?

Contributors list

# 55,910
React N...
vercel
Markdow...
yarn
59 commits
# 208,037
Shell
Vue.js
bcrypt
cldr
26 commits
# 92,592
Objecti...
opal
Rails
ngrok
5 commits
# 2,902
query-l...
python-...
mvvm-fr...
wechat-...
2 commits
# 340,961
HTML
JavaScr...
Shell
dotenv
1 commit
# 3,136
imagema...
splash
pipelin...
kibana
1 commit
# 68,828
JavaScr...
React
React N...
Mobile
1 commit
# 311,140
Shell
css-fil...
Babel
Haskell
1 commit
# 359,273
TypeScr...
commiti...
JavaScr...
vscode
1 commit

react-native-dotenv CircleCI

Load environment variables using

import
statements.

npm version dependencies Status codecov XO code style Join the chat at https://gitter.im/pass-it-on/react-native-dotenv npm downloads

Installation

$ npm install react-native-dotenv

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.

Introduction

This babel plugin lets you inject your environment variables into your react-native environment using dotenv for multiple environments.

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=abc123

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.

Multi-env

This package now supports environment specific variables. This means you may now import environment variables from multiple files, i.e.

.env
,
.env.development
,
.env.production
, and
.env.test
.

Note: it is not recommended that you commit any sensitive information in

.env
file to code in case your git repo is exposed. The best practice is to put a
.env.template
or
.env.development.template
that contains dummy values so other developers know what to configure. Then add your
.env
and
.env.development
to
.gitignore
. You can also keep sensitive keys in a separate
.env.local
(and respective
.env.local.template
) in
.gitignore
and you can use your other
.env
files for non-sensitive config.

The base set of variables will be

.env
and the environment-specific variables will overwrite them.

The variables will automatically be pulled from the appropriate environment and

development
is the default. The choice of environment is based on your Babel environment first and if that value is not set, your NPM environment, which should actually be the same, but this makes it more robust.

In general, Release is

production
and Debug is
development
.

Experimental feature

One thing that we've noticed is that metro overwrites the test environment variable even if you specify a config so we've added a way to fix this. Make sure to specify the config value as indicated in the wiki and make custom configs for alternative builds. However, if you still need this, such as for a staging / test environment, you can add the APP_ENV environment variable in the CLI. For example:

// package.json
{
  "scripts": {
    "start:staging": "APP_ENV=staging npx react-native start",
  }
}

The above example would use the

.env.staging
file. The standard word is
test
, but go nuts.

TypeScript

Option 1: easy mode

Install the @types package npm version

npm install @types/react-native-dotenv

Set the

moduleName
in your Babel config as
react-native-dotenv
.
{
  "plugins": [
    ["module:react-native-dotenv", {
      "moduleName": "react-native-dotenv"
    }]
  ]
}

Import your variables from

react-native-dotenv
:
import {API_URL} from 'react-native-dotenv'

console.log(API_URL)

Option 2: specify types manually

  • Create a
    types
    folder in your project
  • Inside that folder, create a
    *.d.ts
    file, say,
    env.d.ts
  • in that file, declare a module as the following format:

    ts
    declare module '@env' {
    export const API_BASE: string;
    }
    
    Add all of your .env variables inside this module.
  • Finally, add this folder into the

    typeRoots
    field in your
    tsconfig.json
    file:
    json
    {
    ...
    "typeRoots": ["./src/types"],
    ...
    }
    

Reference Material

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

yarn start --reset-cache

or

expo r -c

Maybe a solution for updating package.json scripts:

"cc": "rimraf node_modules/.cache/babel-loader/*,",
"android": "npm run cc && react-native run-android",
"ios": "npm run cc && react-native run-ios",

Or you can override the default

cacheIdentifier
to include some of your environment variables.

The tests that use

require('@env')
are also not passing.

Credits

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

Miscellaneous

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.