26

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?

Supreet Totagi
  • 822
  • 3
  • 9
  • 12

5 Answers5

19

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

lopezjurip
  • 373
  • 1
  • 6
  • 2
    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? – Morris Mar 07 '19 at 09:27
  • @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. – Evos Mar 12 '20 at 22:41
8

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.

michoprogrammer
  • 1,159
  • 2
  • 18
  • 45
Hussam Kurd
  • 8,066
  • 2
  • 43
  • 38
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
  1. Create your .env file with your content. For example:
GOOGLE_MAPS_API_KEY=abcdefgh
  1. 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.

Rafael Perozin
  • 573
  • 7
  • 20
3

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 :)

Daniel Danielecki
  • 8,508
  • 6
  • 68
  • 94
2

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

KingAmo
  • 384
  • 3
  • 14