React-native run-ios loading environment variables

Question

I want a modern way to manage environment variables for a react native mobile app.

The answer here explains the twelve-factor method style (which I love) which involves installing a babel plugin that transpiles references to

const apiKey = process.env.API_KEY;

to their corresponding values as found in the process's environment

const apiKey = 'my-app-id';

The problem is that in order to run this with a populated environment, I need to set it like

API_KEY=my-app-id react-native run-ios

If I have a .env file with 10-20 environment variables in it, this method becomes unwieldy. The best method I've found so far is to run

env $(cat .env | xargs) react-native run-ios

This is a bit undesirable because developers who want to work on this package have to set up custom shell aliases to do this. This isn't conducive to a good development environment, and also complicates the build and deploy flow for releases.

Is there a way to add a hook to the react-native-cli (or a config file) that populates the process environment first? Like an npm "pre" script, but for react-native.

Alternatively, if there were just a way to populate process.env without the need for transpiling, that would be greatly appreciated. — JeremyKun
– JeremyKun, Commented Feb 10, 2017 at 20:06
@connorbode Creating a file is not my problem. Loading the env variables in .env into the node process is. I want a way to do this that hides the loading from the person running react-native run-ios. — JeremyKun
– JeremyKun, Commented Feb 10, 2017 at 20:31
@connorbode does that not require you to rebuild every time you change a config variable? — JeremyKun
– JeremyKun, Commented Feb 10, 2017 at 22:26

Lucas Bento · Accepted Answer · 2017-02-11 16:23:43Z

3

You can use react-native-config which is a native library and requires a link to work or react-native-dotenv which works just like react-native-config but doesn't require any native link.

It'll work fine with .env files set up, e.g. .env.development with environment variables for process.env.NODE_ENV === 'development'.

answered Feb 11, 2017 at 16:23

Lucas Bento

1,2224 gold badges17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JeremyKun Over a year ago

react-native-dotenv is exactly what I was looking for. Thank you! Now all I need to do is figure out how to get watchman to trigger when .env is changed.

Lucas Bento Over a year ago

Good one, never tried it, I think opening an issue to see if the maintainer has some way around would help a lot. Let me know how that works out! :)

Collectives™ on Stack Overflow

React-native run-ios loading environment variables

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related