Updated November 17, 2021
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.
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?
So using a dedicated environment package for React Native makes sense.
A problem with
When your project looks like this though it's not too much of an issue
Next step up is
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.
Finally I wanted to point out a third package
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
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!