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.
extra
fieldIn 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.
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
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" />;
}
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';
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.
-
npm install --save-dev babel-plugin-transform-inline-environment-variables
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.
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.
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 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 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.
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.