React Native Expo Environment Variables

Question

So I'm happy with the concept of environment variables as explained in this article and others https://www.freecodecamp.org/news/how-to-gracefully-use-environment-variables-in-a-react-native-app/

Great, I've got my SOMETHING="something" stored so I can just use env.SOMETHING or whatever

The part I'm a little lost on is where you keep the live variables?

I would rather not do a solution like this as it seems you are still keeping your keys quite public and that you are just choosing based on the environment with if statements

Manage environment with expo react native

For example with an Express App deployment we have, we specify

let endPointURL = env.endPointURL

and then we keep a versoin of that variable locally and when it sits with AWS it is overridden by AWS servers as explained here

I was just wondering does something like that exist for Android and iOS builds (on the respective stores) or through Expo?

Thanks all

Answer 1

Honestly I think the way they go about it is a little silly. There may be a better way to go about than this, but I think I followed their documentation suggestions.

https://docs.expo.io/versions/latest/distribution/release-channels/#using-release-channels-for-environment-variable-configuration

They have a code snippet suggesting you create a function to look at the release configuration itself.

I interpreted it that you might do something like the code below and store your environment variables in a variables.js file and pull in your environment variables as such.

import Constants from 'expo-constants';

export const prodUrl = "https://someapp.herokuapp.com";

const ENV = {
  dev: {
    apiUrl: "http://localhost:3000"
  },
  staging: {
    apiUrl: prodUrl
  },
  prod: {
    apiUrl: prodUrl
  }
};

function getEnvVars(env = "") {
  if (env === null || env === undefined || env === "") return ENV.dev;
  if (env.indexOf("dev") !== -1) return ENV.dev;
  if (env.indexOf("staging") !== -1) return ENV.staging;
  if (env.indexOf("prod") !== -1) return ENV.prod;
}

export default getEnvVars(Constants.manifest.releaseChannel);

Edit:

Now that Expo supports config file as app.config.js or app.config.ts, we can use the dotenv. Check this: https://docs.expo.io/guides/environment-variables/#using-a-dotenv-file