SJ logo

How to manage environment variables in a React Native App

03.04.20203 Min Read — In React Native

How to manage environment variables in a React Native App

From the project directory create a new file called .env This file is holding all credential keys.

To keep .env in secrets don't forget to add this file to .gitignore otherwise you will publish credential keys on Github or somewhere else.

Step 1: Install react-native-dotenv

react-native-dotenv will help you manage your environment. Go to your terminal and cd to your project folder and run the command bellow:

yarn add react-native-dotenv --save-dev

We need to do some config to make it works. Open the file babel.config.js file and modify presets:

module.exports = {
  presets: [
    'module:metro-react-native-babel-preset',
    'module:react-native-dotenv'
  ]
}

Step 2 Integrate with your app

  1. Define credential keys in .env file
  APP_ENV=PROD
  
  TEST_APP_API=http://192.168.1.107:3000
  STRIPE_TEST_PUBLISHABLE_KEY=pk_test_*********************
  STRIPE_TEST_CLIENT_ID=ca_********************************
  
  STAGING_APP_API=https://staging.camayla.com/
  STRIPE_STAGING_PUBLISHABLE_KEY=pk_test_*********************
  STRIPE_STAGING_CLIENT_ID=ca_********************************
  
  PROD_APP_API=https://camayla.com/
  STRIPE_PROD_PUBLISHABLE_KEY=pk_live_*********************
  STRIPE_PROD_CLIENT_ID=ca_********************************
  1. Create helper folder

In helper folder create 2 new files called

  • generateEnv.js
  • constant.js

generateEnv.js Let's import the environments variable is defined in .env and we can write a function to generate variable base on the environment (TEST | STAGING | PROD)

import {
  APP_ENV,
  DEV_TEST_API,
  STRIPE_TEST_PUBLISHABLE_KEY,
  STRIPE_TEST_CLIENT_ID,
  DEV_PRE_PROD_API,
  STRIPE_PRE_PROD_PUBLISHABLE_KEY,
  STRIPE_PRE_PROD_CLIENT_ID,
  DEV_PROD_API,
  STRIPE_PROD_PUBLISHABLE_KEY,
  STRIPE_PROD_CLIENT_ID
} from 'react-native-dotenv';

After that, we need to define a function to get variable base on APP_ENV

export default function genEnv() {
  let devAPIVal = '';
  let stripePublishableKeyVal = '';
  let stripeClientIdVal = '';

  switch (APP_ENV) {
    case 'PRE_PROD':
      devAPIVal = DEV_PRE_PROD_API;
      stripePublishableKeyVal = STRIPE_PRE_PROD_PUBLISHABLE_KEY;
      stripeClientIdVal = STRIPE_PRE_PROD_CLIENT_ID;
      break;
    case 'PROD':
      devAPIVal = DEV_PROD_API;
      stripePublishableKeyVal = STRIPE_PROD_PUBLISHABLE_KEY;
      stripeClientIdVal = STRIPE_PROD_CLIENT_ID;
      break;
    default:
      devAPIVal = DEV_TEST_API;
      stripePublishableKeyVal = STRIPE_TEST_PUBLISHABLE_KEY;
      stripeClientIdVal = STRIPE_TEST_CLIENT_ID;
  }

  return {
    devAPIVal,
    stripePublishableKeyVal,
    stripeClientIdVal
  };
}

Go to constant.js you can export the variable

import genEnv from './genEnv';

const { devAPIVal, stripePublishableKeyVal, stripeClientIdVal } = genEnv();

export const devAPI = devAPIVal;
export const stripePublishableKey = stripePublishableKeyVal;
export const stripeClientId = stripeClientIdVal;

export const stripeRedirectUrl = `${devAPI}/stripe/callback`;

Step 3 Running the app and check result

To quick check that it is working, open App.js and import stripeRedirectUrl from constant.js

import { stripePublishableKey } from './constant';

In useEffect function

useEffect(() => {
 ...

 ...


 console.log('stripePublishableKey===', stripePublishableKey)
});

Open debug mode and see the console

Notice

If you want to change the environment from TEST to PROD just open .env and modify

APP_ENV = PROD

rebuild the app. That's all

Alright. I hope can help you guys know 1 more way to manage credential file base on ENV variable.

© 2020 by Silicon Jungles. All rights reserved.
Last build: 15.05.2020