Environment variables in Expo

Learn about different ways to use environment variables in an Expo project.

Environment variables are key-value pairs configured outside your source code that allow your app to behave differently depending on the environment. For example, you can enable or disable certain features when building a testing version of your app, or you can switch to a different API endpoint when building for production.

Are you using EAS Build? The EAS Build documentation on environment variables and build secrets explains how to work with sensitive values that you would not include in your source code and Git repository. It also explains how to set environment variables for build profiles.

Using the extra field

In the app config, there is an extra property. This property is available when you publish your project with EAS Update and when you build with EAS Build.

Dynamic app config

The following is an example of a dynamic app config that reads from process.env to set an environment variable on the extra field.

module.exports = {
  name: 'MyApp',
  version: '1.0.0',
  extra: {
    apiUrl: process.env.API_URL,
  },
};

With this app config, we can configure the extra.apiUrl by running:

API_URL="https://production.example.com" npx expo start

Reading environment variables

To read extra properties in your app, you can use the expo-constants library. It is available on the Constants.expoConfig property.

import { Button } from 'react-native';
import Constants from 'expo-constants';

function Post() {
  const apiUrl = Constants.expoConfig.extra.apiUrl;

  async function onPress() {
    await fetch(apiUrl, { ... })
  }

  return <Button onPress={onPress} title="Post" />;
}

Using Babel to inline environment variables during build time

An alternative approach is to replace all references of process.env.VARNAME with a value using a babel plugin. For example:

// Before build step (in your source code)
const API_URL = process.env.API_URL;

// After build step (in app bundle)
const API_URL = 'https://production.example.com';

Installing and configuring babel-plugin-transform-inline-environment-variables

To use babel-plugin-transform-inline-environment-variables, install the library and add it to your Babel config, then restart your development server and clear the cache.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['transform-inline-environment-variables'],
  };
};

When you modify babel.config.js, you should always restart the development server and clear the cache: npx expo start --clear. Now you can use environment variables directly in your source code.

Reading the variables from application code

import { Button } from 'react-native';

function Post() {
  const apiUrl = process.env.API_URL;

  async function onPress() {
    await fetch(apiUrl, { ... })
  }

  return <Button onPress={onPress} title="Post" />;
}

This approach this plugin will work well with environment variables set in your shell process, but it won't automatically load .env files. We recommend using direnv and .envrc to accomplish that.

Loading environment variables from a file

If you want to automatically load environment variables from a file in your project rather than setting them in your shell profile or manually when running npx expo start, you may want to use an environment variable manager, such as direnv or dotenv.

direnv

direnv automatically loads and unloads environment variables in your shell depending on your current directory. When you cd into your project directory, it will load all of the variables as configured in .envrc. Due to its tight shell integration, we highly recommend direnv for the highest level of compatibility with all Expo and EAS CLI tooling. To get started, see direnv documentation.

dotenv

dotenv is a library that you import in your project code to load the .env file. Since it works at the JavaScript code level, dotenv may be affected by your Node.js environment or how you invoke it from your code. Check the documentation for the correct usage if you run into issues.

Security considerations

Never store sensitive secrets in your environment variables. When an end-user runs your app, they have access to all of the code and environment variables in your app. Read more about storing sensitive info.