Local and Production ENV Variables using Expo React Native

Expo recently came out with a new feature which makes managing ENVs a lot easier using what they call a dynamic app config file.

*Here’s you to setup env variables for different environments in Expo:
*

1. Create and app.config.js file at the root of your repo
2. Populate the file, it should look something like this:

import 'dotenv/config';

export default {
name: 'APP_NAME',
version: '1.0.0',
extra: {
environment: 'dev'
},
};

1. Call variable. Now when we run our application, we can access the environment variable by doing the following:

import Constants from 'expo-constants';
export default function App(props) {
console.log("props.environment: ", props.environment)
}
App.defaultProps = {
environment: Constants.manifest.extra.environment,
};

1. Setup different variables for production and local development. To do this, we’ll need to change out deploy script to manually add a variable describing the environment.

I place mine in a Dockerfile which Google Cloud uses to build my application:

RUN ENVIRONMENT=prod expo build:web

But you you add the ENVIRONMENT=prod to wherever you are building your app.

1. Update the app.config.js to make variables dynamic based on the environment.

import 'dotenv/config';
if (process.env.ENVIRONMENT === 'prod') {
export default {
name: 'APP_NAME',
version: '1.0.0',
extra: {
environment: 'prod'
},
};
} else {
export default {
name: 'APP_NAME',
version: '1.0.0',
extra: {
environment: 'dev'
},
};
}

Here we check the ENVIRONMENT variable and then we can update the extra variables based on where we are using our app. When we deploy our app will use variables defined in the top section.