create-react-native-app environment variables

.env.example

REACT_NATIVE_APP_NAME="Your App Name"

README.md

Setup

Change your app.json to base-app.json and untrack the original file in your .gitignore

cp app.json base-app.json
echo 'app.json' >> .gitignore

touch .env.example
touch .env
echo '.env' >> .gitignore

Dependency

this generateConfig.js use dotenv package to extract from .env files. be sure to add it into your package.json.

example: yarn add dotenv --dev or npm install dotenv --save-dev

npm run start

best practice to remove app.json, then regenerate again. using something like https://github.com/isaacs/rimraf or just simple rm

Using Simple && Process

• add into package.json's scripts: "generate-config": "rm app.json && node generateConfig"
• modify script start, to npm generate-config && react-native-scripts start

Example package.json:

{
   ...
  "scripts": {
    "start": "npm run generate-config && react-native-scripts start",
    ...
    "generate-config": "rm app.json && node generateConfig"
  },
  ...

*you can use something like https://github.com/mysticatea/npm-run-all to make it more smooth.

Example.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class Example extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>{Expo.Constants.manifest.extra.REACT_NATIVE_APP_NAME}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

generateConfig.js

console.log('Generate app.json, based on base-app.json and .env file(s)');

// load base-app.json
const baseConfig = require('./base-app.json');
console.log('- base-app.json loaded!');

// libs
const config = Object.assign({}, baseConfig);
const fs = require('fs');
const path = require('path');

// Create an array of env files
const dotEnvFiles = [path.join(__dirname, '.env'), ];

// Load env files, supress warnings
dotEnvFiles.forEach(dotEnvFile => {
  if (fs.existsSync(dotEnvFile)) {
    // eslint-disable-next-line
    require('dotenv').config({
      path: dotEnvFile,
    });

    console.log('- ' + dotEnvFile + ' loaded!');
  }
});

// We will only use REACT_NATIVE_APP_* environment variables
const REACT_NATIVE_APP = /^REACT_NATIVE_APP_/i;
console.log('- using config that match ' + REACT_NATIVE_APP);

// filter using REACT_NATIVE_APP
const getClientEnvironment = () => {
  const env = {};
  Object.keys(process.env)
    .filter(key => REACT_NATIVE_APP.test(key))
    .forEach(key => {
      env[key] = process.env[key];
    });
  return env;
};

// compose
config.expo.extra = getClientEnvironment();
fs.writeFileSync('app.json', JSON.stringify(config, null, 2), 'utf8');
console.log('- app.json generated!');