Easily Manage Different Environment Configurations in React Native

I'm going to show you something very quickly that's going to be very valuable. Ready?

Stop commenting and un-commenting environment specific variables in your app!

I see this every day. You're going to make a mistake. I guarantee it. I've done this many times.

I've talked about managing configuration before but that way can be a bit complex (it handles both native and JavaScript). Today we're going to just cover JavaScript, which makes it so easy.

First, in your app install react-native-dotenv.

Terminal

yarn add react-native-dotenv --dev
# npm install react-native-dotenv --save-dev

Next create a .env file in the root of your project.

.env

API_URL=https://example.com/api
ANALYTICS_KEY=asdf123

You'll then want to open your babel.config.js file and add react-native-dotenv to the presets. Here's an example final file:

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo', 'module:react-native-dotenv'],
  };
};

Then create a config.js file from which we'll import our config information for the rest of the app to use.

config.js

import { API_URL, ANALYTICS_KEY } from 'react-native-dotenv';

export default {
  API_URL,
  ANALYTICS_KEY,
};

Wait, why a separate file for that? Why not just use react-native-dotenv directly? I'll touch on that in a moment.

Now, anywhere your app, you can access those variables easily.

App.js

import config from './config';

console.log(config.API_URL);
console.log(config.ANALYTICS_KEY);

Different Variables for Different Environments

Let's say that you have a development server to test against and a different one for production. How do you handle that? Copy your .env to a .env.production file. Change what needs to be changed. react-native-dotenv will automatically pick up the right one based on the environment. Easy.

Different Variables for Different Platforms

Here is why we set up that config.js file. Let's say we have a different ANALYTICS_KEY for iOS and Android. How do we handle that?

I don't want Platform.select littering my code - I want to do it in one place. So, with this in mind, here's what we do.

config.js

import { Platform } from 'react-native';
import {
  API_URL,
  IOS_ANALYTICS_KEY,
  ANDROID_ANALYTICS_KEY,
} from 'react-native-dotenv';

export default {
  API_URL,
  ANALYTICS_KEY: Platform.select({
    ios: IOS_ANALYTICS_KEY,
    android: ANDROID_ANALYTICS_KEY,
  }),
};

Boom! Now everywhere in our code just uses ANALYTICS_KEY. Easy peasy.

Sometimes the most simple changes have the biggest impact.