create-react-native-app environment variables

README.md

Steps:

1. Rename your app.json file to base-app.json. This will be used as the template to generate the final app.json output.
2. On your .gitignore file, add:

# ...your other ignored files

# use base-app.json instead because we're generating this file during builds.
app.json

3. On your package.json file, modify your scripts so that create-react-native-app-config is executed before react-native-scripts:

  "scripts": {
    "start": "npm run create-react-native-app-config && react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "npm run create-react-native-app-config && react-native-scripts android",
    "ios": "npm run create-react-native-app-config && react-native-scripts ios",
    "test": "npm run create-react-native-app-config && jest",
    "create-react-native-app-config": "rimraf app.json && node create-react-native-app-config.js"
  },

4. Copy create-react-native-app-config.js below into a file at the root level of your project.

my-react-native-app-project
| 
├── ...other files
|
├── .babelrc
├── .gitignore
├── .watchmanconfig
├── package.json
├── app.json
├── App.test.js
├── App.js
├── create-react-native-app-config.js <---- create this file, then paste the code below into it!
|
└── ...other files

create-react-native-app-config.js

/**
 * create-react-native-app-config.js
 * -----------------------------
 * Native app config .env generator
 *
 * This source code generates environment variables and writes them
 * to app.json. It is inspired by the concept used in react-scripts
 * and is built for react-native apps so that they share the same
 * .env variables.
 *
 * Resources:
 * https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/config/env.js
 * https://gist.github.com/joelbowen/1d2f2dfa471efad2154e6318c195b77e
 */
'use strict';

// Instead of app.json, we'll use base-app.json, since app.json will be
// generated by this script.
const baseConfig = require(`./base-app.json`);

const config = Object.assign({}, baseConfig);

const fs = require('fs');
const path = require('path');

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}

const dotenvPath = '.env';

// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
var dotenvFiles = [
  `${dotenvPath}.${NODE_ENV}.local`,
  `${dotenvPath}.${NODE_ENV}`,
  // Don't include `.env.local` for `test` environment
  // since normally you expect tests to produce the same
  // results for everyone
  NODE_ENV !== 'test' && `${dotenvPath}.local`,
  dotenvPath,
].filter(Boolean);

// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.  Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv-expand')(
      require('dotenv').config({
        path: dotenvFile,
      })
    );
  }
});

// Although the community recommends REACT_NATIVE_APP_* environment variables,
// it is not ideal in this case, where the app is meant to be cross-platform 
// and in much need of a common source of truth, no matter which platform it
// is running on.
// 
// Like react-scripts, we will use the REACT_APP_* variable prefix so that if
// react-scripts reads REACT_APP_*, react-native also reads REACT_APP_*. Thus,
// configurations like API URLs are shared across the board.
//
// If the variable is reserved for native apps only, then yes, we finally use
// REACT_NATIVE_APP_* as an exclusive variable.
const REACT_APP = /^REACT_APP_/i;
const REACT_NATIVE_APP = /^REACT_NATIVE_APP_/i;

function getClientEnvironment() {
  const env = {};
  Object.keys(process.env)
    .filter(key => REACT_APP.test(key) || REACT_NATIVE_APP.test(key)) // REACT_APP_ takes precedence!
    .forEach(key => {
      env[key] = process.env[key];
    });
  return env;
}

config.expo.extra = Object.assign({}, config.expo.extra, getClientEnvironment());

// Output the environment variables to the app.json file.
fs.writeFileSync('app.json', JSON.stringify(config, null, 2), 'utf8');