CODEWITHSUNDEEP
react-nativeenvironment-variables
Damon Yuan
Damon Yuan

Reputation: 3773

Setting environment variable in react-native?

I am using react-native to build a cross-platform app, but I do not know how to set the environment variable so that I can have different constants for different environments.

Example:

development: 
  BASE_URL: '',
  API_KEY: '',
staging: 
  BASE_URL: '',
  API_KEY: '',
production:
  BASE_URL: '',
  API_KEY: '',

Upvotes: 247

Views: 298339

Answers (25)

wait_walker
wait_walker

Reputation: 21

Procedure to Add .env in React Native Using react-native-dotenv

1. Install react-native-dotenv Package

```
npm install react-native-dotenv
```

2. Configure Babel

In your project root, open the babel.config.js file and update it as follows:

```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      "@babel/plugin-transform-private-methods",
      { loose: true }
    ],
    [
      "module:react-native-dotenv",
      {
        moduleName: "@env",
        path: ".env",
        blacklist: null,
        whitelist: null,
        safe: true,
        allowUndefined: true
      }
    ]
  ],
};
```

3. Create the .env File

In the root directory of your project, create a .env file and add the following environment variable:

Programming=true

4. Import the Environment Variable

In your React Native code, import the variable like this:

import { Programming } from "@env";

console.log(Programming); // Output: true

Important:

  • Do NOT import from react-native-dotenv directly.
  • Always import using @env as configured in the Babel file, or else it will throw an error.

5. Clear Cache if Issues Occur

If the environment variable is not loading, clear the Metro bundler cache:

npx react-native start --reset-cache

That’s it! Your .env setup is ready in React Native.

Upvotes: 0

vimuth
vimuth

Reputation: 5602

You can do it with dotenv. First install the package,

npm i dotenv

Create .env file and set values,

API_KEY=your_api_key

Update .babelrc in the root directory, Or create new one with these lines,

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

Then you can use them like this,

import { API_KEY } from '@env';

const key = API_KEY;

Or

process.env.API_KEY

Or

process.env['API_KEY']

Upvotes: 0

Thiên Trần
Thiên Trần

Reputation: 81

IN TYPESCRIPT

  1. Install library: react-native-dotenv

    yarn add -D react-native-dotenv
yarn add -D @types/react-native-dotenv

  2. Config file babel.config.js

    module.exports = {
...
  plugins: ['module:react-native-dotenv'],
...
};

  3. Create file .env

    API_URL="api.com"

  4. Create folder types, then create file env.d.ts

    declare module '@env' {
  export const API_URL: string;
}

  5. Add folder types into the tsconfig.json

    {
  ...
  "compilerOptions": {
    ...
    "typeRoots": ["./src/types/"]
    ...
  }
  ...
}

  6. OK, now try it:

    import {API_URL} from '@env'
console.log(API_URL)

Upvotes: 5

ShoaibShebi
ShoaibShebi

Reputation: 135

Follow these steps

  1. npm install react-native-dotenv
  2. set .env file with some variable names i.e APP_NAME="my-app"
  3. modify bable.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    ["module:react-native-dotenv", {
      "envName": "APP_ENV",
      "moduleName": "@env",
      "path": ".env",
      "safe": false,
      "allowUndefined": true,
      "verbose": false
    }]
  ]
};

  1. restart all the app
  2. try this one import {APP_NAME} from '@env'. if this not works then do this one const APP_NAME = process.env['APP_NAME'];

Cheers :)

Upvotes: 11

Vijay Joshua Nadar
Vijay Joshua Nadar

Reputation: 439

If you are developing your app using expo(managed workflow), you will have to create a file called app.config.js inside the root directory of your project and add the following code to the file:

const myValue = "My App";

export default () => {
    if (process.env.MY_ENVIRONMENT === "development") {
        return {
            name: myValue,
            version: "1.0.0",
            // All values in extra will be passed to your app.
            extra: {
                fact: "dogs are cool"
            }
        };
    } else {
        return {
            name: myValue,
            version: "1.0.0",
            // All values in extra will be passed to your app.
            extra: {
                fact: "kittens are cool"
            }
        };
    }
};

Then you should start/publish your app using the command below (this will work in Windows. For other operating systems, read the article I have mentioned at the end).

npx cross-env MY_ENVIRONMENT=development expo start/publish

This will start or publish your application using the environment variable mentioned above (MY_ENVIRONMENT). The application will load the appropriate configuration based on the environment variable. Now you can access the variable extra ,from your configuration, by importing a module called expo-constants into your project file. For instance:

import Constants from "expo-constants";

export default function App() {
    console.log(Constants.manifest.extra.fact);
    return (
        <>
            <View>
                <Text>Dummy</Text>
            </View>
        </>
    );
}

Using Constants.manifest we can access the object inside extra. So if your environment variable was development, this code should console.log "dogs are cool". I hope this was useful. For more information, go through this article.

Upvotes: 1

LitileXueZha
LitileXueZha

Reputation: 620

After long efforts, I realized that react-native doesn't provide this feature officially. And this is in babel-ecosystem, so I should learn how to write a babel plugin...

/**
 * A simple replace text plugin in babel, such as `webpack.DefinePlugin`
 * 
 * Docs: https://github.com/jamiebuilds/babel-handbook
 */
function definePlugin({ types: t }) {
    const regExclude = /node_modules/;
    return {
        visitor: {
            Identifier(path, state) {
                const { node, parent, scope } = path;
                const { filename, opts } = state;
                const key = node.name;
                const value = opts[key];

                if (key === 'constructor' || value === undefined) { // don't replace
                    return;
                }
                if (t.isMemberExpression(parent)) { // not {"__DEV__":name}
                    return;
                }
                if (t.isObjectProperty(parent) && parent.value !== node) { // error
                    return;
                }
                if (scope.getBinding(key)) { // should in global
                    return;
                }
                if (regExclude.test(filename)) { // exclude node_modules
                    return;
                }
                switch (typeof value) {
                    case 'boolean':
                        path.replaceWith(t.booleanLiteral(value));
                        break;
                    case 'string':
                        path.replaceWith(t.stringLiteral(value));
                        break;
                    default:
                        console.warn('definePlugin only support string/boolean, so `%s` will not be replaced', key);
                        break;
                }
            },
        },
    };
}

module.exports = definePlugin;

That's all, then you can use like that:

module.exports = {
    presets: [],
    plugins: [
        [require('./definePlugin.js'), {
            // your environments...
            __DEV__: true,
            __URL__: 'https://example.org',
        }],
    ],
};

Packages that metioned by answerers are also great, and I also consult metro-transform-plugins/src/inline-plugin.js.

Upvotes: 0

chapinkapa
chapinkapa

Reputation: 2653

Instead of hard-coding your app constants and doing a switch on the environment (I'll explain how to do that in a moment), I suggest using the twelve factor suggestion of having your build process define your BASE_URL and your API_KEY.

To answer how to expose your environment to react-native, I suggest using Babel's babel-plugin-transform-inline-environment-variables.

To get this working you need to download the plugin and then you will need to setup a .babelrc and it should look something like this:

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

And so if you transpile your react-native code by running API_KEY=my-app-id react-native bundle (or start, run-ios, or run-android) then all you have to do is have your code look like this:

const apiKey = process.env['API_KEY'];

And then Babel will replace that with:

const apiKey = 'my-app-id';

Upvotes: 194

Pawan Bishnoi
Pawan Bishnoi

Reputation: 2127

Do not pass these variables like VAR=value react-native run-android or VAR=value react-native run-ios . These variables are only accessible if we pass them in start command i.e VAR=value react-native start --reset-cache.

You can achieve this with 3 simple steps:-

  1. Install babel-plugin-transform-inline-environment-variables by running npm i babel-plugin-transform-inline-environment-variables --save-dev.

  2. Add "plugins": [ "transform-inline-environment-variables" ] into your .bablerc or babel.config.js.

  3. Pass the variables while starting metro bundler i.e VAR=value reacti-native start --reset-cache, do not pass these variables in react-native run-android or react-native run-ios commands.

Please keep in mind that use of --reset-cache flag is required, otherwise changes in variables will not be applied.

Upvotes: 0

Muhammad Awais
Muhammad Awais

Reputation: 97

hi there if you are facing this issue try this , this will work for me ,thanks me later

in bable.js

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

use

import { YOURAPIKEY } from "react-native-dotenv";


inseted  of

import { YOURAPIKEY } from "@env";

Upvotes: 3

Nishant Kohli
Nishant Kohli

Reputation: 475

I used react-native-config to set up multiple environments for my project. The README file very clearly explains how to configure the library in your project. Just make sure to implement the Extra step for Android section.

Also while setting up multiple environments make sure to specify the correct start commands in your package.json, based upon your system terminal. I developed the Android code in a windows laptop and iOS code in Macbook, so my respective start commands in package.json were -

"scripts": {
        "android:dev": "SET ENVFILE=.env.dev && react-native run-android",
        "android:prod": "SET ENVFILE=.env.prod && react-native run-android",
        "ios:dev": "ENVFILE=.env.dev react-native run-ios",
        "ios:prod": "ENVFILE=.env.prod react-native run-ios",
},

In case you just need to maintain a single .env file, consider using react-native-dotenv as a lighter alternative, although I did face some issues in setting up multiple .env files for this library.

Upvotes: 4

Slavo Vojacek
Slavo Vojacek

Reputation: 1054

The simplest (not the best or ideal) solution I found was to use react-native-dotenv. You simply add the "react-native-dotenv" preset to your .babelrc file at the project root like so:

{
  "presets": ["react-native", "react-native-dotenv"]
}

Create a .env file and add properties:

echo "SOMETHING=anything" > .env

Then in your project (JS):

import { SOMETHING } from 'react-native-dotenv'
console.log(SOMETHING) // "anything"

Upvotes: 81

panchicore
panchicore

Reputation: 11922

[Source] From what I've found, it looks like by default, it's only possible to do production and development configs (no staging or other environments) – is that right?

Right now, I've been using a environment.js file that can be used to detect expo release channels and change the variables returned based on that, but for building, I need to update the non- DEV variable returned to be either staging or prod:

import { Constants } from 'expo';
import { Platform } from 'react-native';
const localhost = Platform.OS === 'ios' ? 'http://localhost:4000/' : 'http://10.0.2.2:4000/';
const ENV = {
  dev: {
    apiUrl: localhost,
  },
  staging: {
    apiUrl: 'https://your-staging-api-url-here.com/'
  },
  prod: {
    apiUrl: 'https://your-prod-api-url-here.com/'
  },
}
const getEnvVars = (env = Constants.manifest.releaseChannel) => {
  // What is __DEV__ ?
  // This variable is set to true when react-native is running in Dev mode.
  // __DEV__ is true when run locally, but false when published.
  if (__DEV__) {
    return ENV.dev;
  } else {
    // When publishing to production, change this to `ENV.prod` before running an `expo build`
    return ENV.staging;
  }
}
export default getEnvVars;

Alternatives

does anyone have experience using react-native-dotenv for projects built with expo? I'd love to hear your thoughts

https://github.com/goatandsheep/react-native-dotenv

Upvotes: 0

Joe
Joe

Reputation: 8262

If you are using Expo there are 2 ways to do this according to the docs https://docs.expo.io/guides/environment-variables/

Method #1 - Using the .extra prop in the app manifest (app.json):

In your app.json file

{
  expo: {
    "slug": "my-app",
    "name": "My App",
    "version": "0.10.0",
    "extra": {
      "myVariable": "foo"
    }
  }
}

Then to access the data on your code (i.e. App.js) simply import expo-constants:

import Constants from 'expo-constants';

export const Sample = (props) => (
  <View>
    <Text>{Constants.manifest.extra.myVariable}</Text>
  </View>
);

This option is a good built-in option that doesn't require any other package to be installed.

Method #2 - Using Babel to "replace" variables. This is the method you would likely need especially if you are using a bare workflow. The other answers already mentioned how to implement this using babel-plugin-transform-inline-environment-variables, but I will leave a link here to the official docs to how to implement it: https://docs.expo.io/guides/environment-variables/#using-babel-to-replace-variables

Upvotes: 2

Jack Zhang
Jack Zhang

Reputation: 71

I use babel-plugin-transform-inline-environment-variables.

What I did was put a configuration files within S3 with my different environments.

s3://example-bucket/dev-env.sh
s3://example-bucket/prod-env.sh
s3://example-bucket/stage-env.sh

EACH env file:

FIRSTENV=FIRSTVALUE
SECONDENV=SECONDVALUE

Afterwards, I added a new script in my package.json that runs a script for bundling

if [ "$ENV" == "production" ]
then
  eval $(aws s3 cp s3://example-bucket/prod-env.sh - | sed 's/^/export /')
elif [ "$ENV" == "staging" ]
then
  eval $(aws s3 cp s3://example-bucket/stage-env.sh - | sed 's/^/export /')
else
  eval $(aws s3 cp s3://example-bucket/development-env.sh - | sed 's/^/export /')
fi

react-native start

Within your app you will probably have a config file that has:

const FIRSTENV = process.env['FIRSTENV']
const SECONDENV = process.env['SECONDENV']

which will be replaced by babel to:

const FIRSTENV = 'FIRSTVALUE'
const SECONDENV = 'SECONDVALUE'

REMEMBER you have to use process.env['STRING'] NOT process.env.STRING or it won't convert properly.

Upvotes: 4

Smakosh
Smakosh

Reputation: 1135

For latest RN versions, you can use this native module: https://github.com/luggit/react-native-config

Upvotes: 1

Jitendra Kumar
Jitendra Kumar

Reputation: 2211

Step 1: Create separate component like this Component name : pagebase.js
Step 2: Inside this use code this 

    export const BASE_URL = "http://192.168.10.10:4848/";
    export const API_KEY = 'key_token';

Step 3: Use it in any component, for using it first import this component then use it. Import it and use it: 

        import * as base from "./pagebase";

        base.BASE_URL
        base.API_KEY

Upvotes: 4

Srdjan Cosic
Srdjan Cosic

Reputation: 324

It is possible to access the variables with process.env.blabla instead of process.env['blabla']. I recently made it work and commented on how I did it on an issue on GitHub because I had some problems with cache based on the accepted answer. Here is the issue.

Upvotes: 0

Toni Chaz
Toni Chaz

Reputation: 731

i have created a pre build script for the same problem because i need some differents api endpoints for the differents environments

const fs = require('fs')

let endPoint

if (process.env.MY_ENV === 'dev') {
  endPoint = 'http://my-api-dev/api/v1'
} else if (process.env.MY_ENV === 'test') {
  endPoint = 'http://127.0.0.1:7001'
} else {
  endPoint = 'http://my-api-pro/api/v1'
}

let template = `
export default {
  API_URL: '${endPoint}',
  DEVICE_FINGERPRINT: Math.random().toString(36).slice(2)
}
`

fs.writeFile('./src/constants/config.js', template, function (err) {
  if (err) {
    return console.log(err)
  }

  console.log('Configuration file has generated')
})

And i have created a custom npm run scripts to execute react-native run..

My package-json 

"scripts": {
    "start-ios": "node config-generator.js && react-native run-ios",
    "build-ios": "node config-generator.js && react-native run-ios --configuration Release",
    "start-android": "node config-generator.js && react-native run-android",
    "build-android": "node config-generator.js && cd android/ && ./gradlew assembleRelease",
    ...
}

Then in my services components simply import the auto generated file:

import config from '../constants/config'

fetch(`${config.API_URL}/login`, params)

Upvotes: 6

Logister
Logister

Reputation: 1894

I used the __DEV__ polyfill that is built into react-native in order to solve this problem. It is automatically set to true so long as you are not building react native for production.

E.g.: 

//vars.js

let url, publicKey;
if (__DEV__) {
  url = ...
  publicKey = ...
} else {
  url = ...
  publicKey = ...
}

export {url, publicKey}

Then just import {url} from '../vars'and you'll always get the correct one. Unfortunately, this wont work if you want more than two environments, but its easy and doesn't involve adding more dependencies to your project.

Upvotes: 25

vonovak
vonovak

Reputation: 1597

@chapinkapa's answer is good. An approach that I have taken since Mobile Center does not support environment variables, is to expose build configuration through a native module:

On android:

   @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        String buildConfig = BuildConfig.BUILD_TYPE.toLowerCase();
        constants.put("ENVIRONMENT", buildConfig);
        return constants;
    }

or on ios:

  override func constantsToExport() -> [String: Any]! {
    // debug/ staging / release
    // on android, I can tell the build config used, but here I use bundle name
    let STAGING = "staging"
    let DEBUG = "debug"

    var environment = "release"
    if let bundleIdentifier: String = Bundle.main.bundleIdentifier {
      if (bundleIdentifier.lowercased().hasSuffix(STAGING)) {
        environment = STAGING
      } else if (bundleIdentifier.lowercased().hasSuffix(DEBUG)){
        environment = DEBUG
      }
    }

    return ["ENVIRONMENT": environment]
  }

You can read the build config synchronously and decide in Javascript how you're going to behave.

Upvotes: 0

Patrik Prevuznak
Patrik Prevuznak

Reputation: 2251

In my opinion the best option is to use react-native-config. It supports 12 factor.

I found this package extremely useful. You can set multiple environments, e.g. development, staging, production.

In case of Android, variables are available also in Java classes, gradle, AndroidManifest.xml etc. In case of iOS, variables are available also in Obj-C classes, Info.plist.

You just create files like

  • .env.development
  • .env.staging
  • .env.production

You fill these files with key, values like

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

and then just use it:

import Config from 'react-native-config'

Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

If you want to use different environments, you basically set ENVFILE variable like this:

ENVFILE=.env.staging react-native run-android

or for assembling app for production (android in my case):

cd android && ENVFILE=.env.production ./gradlew assembleRelease

Upvotes: 102

Pikachu-go
Pikachu-go

Reputation: 3088

you can also have different env scripts: production.env.sh development.env.sh production.env.sh

And then source them in when starting to work [which is just tied to an alias] so all the sh file has is export for each env variable:

export SOME_VAR=1234
export SOME_OTHER=abc

And then adding babel-plugin-transform-inline-environment-variables will allow access them in the code:

export const SOME_VAR: ?string = process.env.SOME_VAR;
export const SOME_OTHER: ?string = process.env.SOME_OTHER;

Upvotes: 0

vhs
vhs

Reputation: 10051

The specific method used to set environment variables will vary by CI service, build approach, platform and tools you're using.

If you're using Buddybuild for CI to build an app and manage environment variables, and you need access to config from JS, create a env.js.example with keys (with empty string values) for check-in to source control, and use Buddybuild to produce an env.js file at build time in the post-clone step, hiding the file contents from the build logs, like so:

#!/usr/bin/env bash

ENVJS_FILE="$BUDDYBUILD_WORKSPACE/env.js"

# Echo what's happening to the build logs
echo Creating environment config file

# Create `env.js` file in project root
touch $ENVJS_FILE

# Write environment config to file, hiding from build logs
tee $ENVJS_FILE > /dev/null <<EOF
module.exports = {
  AUTH0_CLIENT_ID: '$AUTH0_CLIENT_ID',
  AUTH0_DOMAIN: '$AUTH0_DOMAIN'
}
EOF

Tip: Don't forget to add env.js to .gitignore so config and secrets aren't checked into source control accidentally during development.

You can then manage how the file gets written using the Buddybuild variables like BUDDYBUILD_VARIANTS, for instance, to gain greater control over how your config is produced at build time.

Upvotes: 5

leonfs
leonfs

Reputation: 709

I think something like the following library could help you out to solve the missing bit of the puzzle, the getPlatform() function.

https://github.com/joeferraro/react-native-env

const EnvironmentManager = require('react-native-env');

// read an environment variable from React Native
EnvironmentManager.get('SOME_VARIABLE')
  .then(val => {
    console.log('value of SOME_VARIABLE is: ', val);

  })
  .catch(err => {
    console.error('womp womp: ', err.message);
  });

The only problem I see with this, that it's async code. There is a pull request to support getSync. Check it out too.

https://github.com/joeferraro/react-native-env/pull/9

Upvotes: 3

tohster
tohster

Reputation: 7083

React native does not have the concept of global variables. It enforces modular scope strictly, in order to promote component modularity and reusability.

Sometimes, though, you need components to be aware of their environment. In this case it's very simple to define an Environment module which components can then call to get environment variables, for example:

environment.js

var _Environments = {
    production:  {BASE_URL: '', API_KEY: ''},
    staging:     {BASE_URL: '', API_KEY: ''},
    development: {BASE_URL: '', API_KEY: ''},
}

function getEnvironment() {
    // Insert logic here to get the current platform (e.g. staging, production, etc)
    var platform = getPlatform()

    // ...now return the correct environment
    return _Environments[platform]
}

var Environment = getEnvironment()
module.exports = Environment

my-component.js

var Environment = require('./environment.js')

...somewhere in your code...
var url = Environment.BASE_URL

This creates a singleton environment which can be accessed from anywhere inside the scope of your app. You have to explicitly require(...) the module from any components that use Environment variables, but that is a good thing.

Upvotes: 27

Related Questions