React Native: process.env has only NODE_ENV

Question

I'm setting an environment variable while building my react-native app (on windows):

SET APP_ENV=dev & react-native run-android

echo %APP_ENV% returns 'dev'

But when I log process.env object in my JS file, I only get:

{
  NODE_ENV: "development"
}

Is there a different way to access environment variables set through command prompt?

Solution 1

It's important to know that the React-Native app is running on a device (or emulator) in an environment more like a browser, not a Node.js process.

For cross-compatibility with Node.js libraries that relies on process.env.NODE_ENV to perform optimizations, React-Native adds the process global variable with env.NODE_ENV.

If you want to pass custom constants to React-Native, you can use: https://github.com/luggit/react-native-config

Solution 2

You should install this plugin babel plugin

npm install babel-plugin-transform-inline-environment-variables --save-dev

Then add it to your babel config (.babelrc, babel.config.js) in the plugin section

{
  "plugins": [
    ["transform-inline-environment-variables", {
      "include": [
        "NODE_ENV"
      ]
    }]
  ]
}

Then when you pass the variable through the inline like

API_KEY=dev && react-native run-android

You should get it through

process.env.API_KEY

And the value will be dev

This work for me on Mac terminal, Hope it answer your question

EDIT: I added a double "&" because only one doesn't work.

Solution 3

The easiest way I found to solve this problem is by using the react-native-config library that you can have a look at here.

1. Install the library:

$ yarn add react-native-config

2. Create your .env file with your content. For example:

GOOGLE_MAPS_API_KEY=abcdefgh

3. Import Config from react-native-config and use your variables.

import Config from "react-native-config";
...
console.log('ENV:', Config.GOOGLE_MAPS_API_KEY); // ENV: abcdefgh

P.S.: After installing the package you need to run npx pod-install to auto-link it or if your React Native version is older than 0.60, link it manually following the instructions on the library.

Solution 4

add babel-plugin-transform-inline-environment-variables

npm install babel-plugin-transform-inline-environment-variables --save-dev

babel.config.js:

{
  "plugins": [
    ["transform-inline-environment-variables"],
  ]
}

do not add "include": ["NODE_ENV"]

then run API_KEY=testKey && react-native start and then you can use API_KEY via process.env.API_KEY,

but it is weird that console.log(process.env) only show a {NODE_ENV: "development"},do not contain API_KEY

Solution 5

Nothing worked out from these answers here, as well as React Native Expo Environment Variables, but I've found react-native-dotenv.

It did the trick:

1. Terminal: yarn add react-native-dotenv --dev
2. In babel.config.js (or .babelrc): add "module:react-native-dotenv" to plugins
3. In your component, import { REST_API_KEY } from "@env"; at the top
4. In your component, use as alert(REST_API_KEY);

Of course, with the alert, that's a dummy example :)

View more solutions

Comments

[Morris]

The github page you linked specifically said: "Keep in mind this module doesn't obfuscate or encrypt secrets for packaging, so do not store sensitive keys in .env. It's basically impossible to prevent users from reverse engineering mobile app secrets, so design your app (and APIs) with that in mind." So if the desired outcome is to have a secure place to write sensitive info, this library doesn't help, right?

[Evos]

@Oucam i think the point in this phrase is that it will not give you same amount of security you git from it on mobile. Since for mobile apps everything bundled together into apk/ipa someone are able to decompose it back and one way or another find this data.

[Kaushik Wavhal]

it should be && instead of & there at API_KEY=testKey & react-native start

[Cody]

This was absolutely DOA for me :(

[KeitelDOG]

I made it that way, but I'm wondering if I can just put it inside process.env object, if it's not read-only.

[Lev]

does not work RN 0.68.1

[Daniel Danielecki]

Not sure, I'd expect it's key=value format, not object.

[KeitelDOG]

Thank you, since from '@env' works on web with NextJS too, so it's good, I don't need process.env anymore, and everything works great with the same app as hybrid with NextJS and Native.

[Daniel Danielecki]

Interesting. No problems with fetching env variables when building with eas/for native apps?