Environment variables

[hartmamt]

Is there support for adding in environment variables like create-react-app allows? I tried it the way I usually do and it didn't work, but not sure if there is something in expo that allows it.

[anp]

We can definitely look at adding some. Which environment variables were you trying to set?

[inyono]

Would love that, too. I'm trying to switch between two possible entry points (namely the real app and https://github.com/storybooks/react-native-storybook). Currently, I work around this issue by commenting out the respective component in App.js. IMHO, it would be much cleaner if I could set an environment variable in my npm tasks and choose the component depending on that, though.

[hartmamt]

We use environment variables a lot when we build so that we don't have to hardcode things like REST endpoints.

[scmx]

Also looking for this. My use case is that I need a url that leads to my host machine where I have an api server running. I would then like to be able do something like
API_HOST=http://$(ipconfig getifaddr en0):4000 npm start. Perhaps there's a better solution?

[hartmamt]

I believe Create React App just exposes any variables that start with REACT_APP. I figured this would just work the same.

[anp]

Thanks for the input everyone! I think we have a plan to implement this, I'll post here with updates.

[anp]

Update: the path to implementing this is a little trickier than I initially thought. Specifically, it's difficult to support this in a way that will continue to work after ejecting. Keeping this open so that it's still on our radar, but it might take a little while to figure out the right way to do implement.

[ericnograles]

Thanks for the update, @dikaiosune! Quick and silly question -- with "vanilla" React Native, I simply would use babel-plugin-transform-inline-environment-variables in my .babelrc to handle this. I see that this won't work for CRNA/Expo, as I modified my CRNA .babelrc like so:

{
  "presets": ["babel-preset-expo"],
  "plugins": ["transform-inline-environment-variables"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  }
}

I'm just curious as to how/where the Babel transformations of our CRNA/Expo code occur? I assumed that the Packager would pick up the .babelrc on my project's root, but that doesn't appear to be the case. I tried reading through the source but couldn't find the answer.

My best guess is that the Babel transforms occur right on the Expo Client itself, or the Packager has its own Babel config that is not overridable?

[anp]

@ericnograles I don't see why that wouldn't work in principle -- can you upload a minimal repro project somewhere so that I can try?

[ericnograles]

Sorry for the delay, @dikaiosune, here's a sample repo: https://github.com/ericnograles/crna-sample-env-variables

You'll notice my .babelrc has the line for transform-inline-environment-variables. Basically, I have a value in /common/constants.js that should resolve to the ENVIRONMENT_CURRENT environment variable, but defaults to Dangit it didn't work! if the swap doesn't happen.

I set the environment variable like so and run yarn start

Also, I tried setting the environment variable as part of the start script like below:

"start": "ENVIRONMENT_CURRENT=YO react-native-scripts start",

And still no luck. I don't think I'm doing anything silly here, but you be the judge. Let me know if that's enough info to go by.

Thanks for your help!

[ericnograles]

@dikaiosune so I'm an idiot. I completely forgot that the CRA process ignores all env variables that didn't start with REACT_ and looks like you guys applied the same thing, except you expect a REACT_NATIVE_ to start after I rtfm in the Environment Variables section 🤣

So, it works, huzzah!

TL;DR: For anybody following my thread, you can do this via the start script like so:

"start": "REACT_NATIVE_ENVIRONMENT_CURRENT=YO react-native-scripts start",

And it works! Be sure to set environment variables to start with REACT_NATIVE_ or it will be ignored, similar to how environment variables that don't start with REACT_ are ignored by CRA.

Note: You don't actually need to add the babel-plugin-transform-inline-environment-variables plugin above, it seems to work fine without it.

Update: Got a PR out to address the documentation gap. Hope it helps someone! #125

[anp]

@ericnograles you're right! I left a comment on the PR, but for the benefit of anyone who finds this thread:

As of today (3/28/17), the functionality @ericnograles described above only works in development mode within CRNA -- if you eject or publish to Expo then your code will no longer see the environment variables. Please treat this feature as experimental until we can work out ejection support and provide stable documentation.