How to Manage Environment Variables in React Native

Managing environment variables is critical, simple, and often overlooked.

Wether you have a lcal environment setup for for development, QA for testing, or feature flags there are a dozen and one reasons you'll have variables that need to change.

The first and easiest solution would be to hard code them in your codebase and just comment/uncomment things as needed.

Doable? Yeah.

Good idea? No.

Take it from someone who has sent out test push notifications to an entire user base when I meant to just send them to me.

That's when the commenting/uncommenting solution hurts.

So, in React Native, what solutions do we to manage environment variables?

Requirements

React Native (and similar cross-platform frameworks) are unique. We have more than one environment we need to support - we (may) need to support iOS, Android, JavaScript, and possibly other platforms.

So using a dedicated environment package for React Native makes sense.

react-native-dotenv

react-native-dotenv is my tried and true. It's simple to set up and just works. I've used it for years and it's still added to most of my projects.

A problem with react-native-dotenv is that it only works in the JavaScript environment. This makes it easy to set up but a limitation no less.

When your project looks like this though it's not too much of an issue

react-native-config

Next step up is react-native-config. The primary advantage of this package is that it works across all environments - JavaScript, iOS, and Android.

This brings slightly more complexity to the installation process though since you need to manage the iOS and Android dependencies as well now.

But don't let that scare you off - you're most likely going to have packages with native components in your app anyways and with auto-linking managing native dependencies in React Native is much less of a hassle than in years past.

react-native-ultimate-config

Finally I wanted to point out a third package react-native-ultimate-config.

This one was recommended to me by Alek when I sent out a draft of this post a few weeks ago to the React Native School email list.

Alek said he switched over from react-native-config and has found react-native-ultimate-config easy to install and use.

It also supports multiple platforms like react-native-config.

Something that stands out to me about this package is the simplicity of setup with the yarn rnuc .env command.

As you can see there are a variety of available packages to help you better manage your environment variables. If you're not already doing so add one of these packages to your React Native workflow!