1---
2title: Environment variables in Expo
3sidebar_title: Environment variables
4description: Learn how to use environment variables in an Expo project.
5---
6
7import { Terminal } from '~/ui/components/Snippet';
8
9Environment 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 test version of your app, or switch to a different API endpoint when building for production.
10
11The Expo CLI will automatically load environment variables with an `EXPO_PUBLIC_` prefix from **.env** files for use within your JavaScript code whenever you use the Expo CLI, such as when running `npx expo start` to start your app in local development mode.
12
13> Available in SDK 49 and higher. See notes for [SDK 48 and lower](#environment-variables-in-sdk-48-and-lower).
14
15## Reading environment variables from .env files
16
17Create an **.env** file in the root of your project directory and add environment-specific variables on new lines in the form of `EXPO_PUBLIC_[NAME]=VALUE`:
18
19```bash .env
20EXPO_PUBLIC_API_URL=https://staging.example.com
21EXPO_PUBLIC_API_KEY=abc123
22```
23
24Now you can use environment variables directly in your source code:
25
26```tsx
27import { Button } from 'react-native';
28
29function Post() {
30  const apiUrl = process.env.EXPO_PUBLIC_API_URL;
31
32  async function onPress() {
33    await fetch(apiUrl, { ... })
34  }
35
36  return <Button onPress={onPress} title="Post" />;
37}
38```
39
40When you run `npx expo start`, `process.env.EXPO_PUBLIC_API_URL` will be replaced with `https://staging.example.com` in your app bundle. Variables can be updated as you edit your code without restarting the Expo CLI or clearing the cache. You will need to perform a full reload (for example, shake gesture and then Reload in Expo Go or your development build) to see the updated value.
41
42> **warning** Do not store sensitive info, such as private keys, in `EXPO_PUBLIC_` variables. These variables will be visible in plain-text in your compiled application.
43
44### How variables are loaded
45
46Expo CLI loads **.env** files according to the [standard .env file resolution](https://github.com/bkeepers/dotenv/blob/c6e583a/README.md#what-other-env-files-can-i-use) and then replaces all references in your code to `process.env.EXPO_PUBLIC_[VARNAME]` with the corresponding value set in the **.env** files. Code inside **node_modules** is not affected for security purposes.
47
48Every variable must be referenced as a static property in order for it to be inlined. For example, the expression `process.env.EXPO_PUBLIC_KEY` will be rewritten, but `process.env['EXPO_PUBLIC_KEY']` will not.
49
50### Using multiple .env files to define separate environments
51
52You can define any of the [standard .env files](https://github.com/bkeepers/dotenv/blob/c6e583a/README.md#what-other-env-files-can-i-use), so it is possible to have separate **.env**, **.env.local**, **.env.production** and so on, files and they will load according to the standard priority.
53
54You may choose to commit the default **.env** file or other standard configurations to version control, but generally **.env.local** files should be added to your **.gitignore**:
55
56```bash .gitignore
57.env*.local
58```
59
60If you create an environment-specific file, like **.env.test**, you can load it by setting `NODE_ENV` when running the Expo CLI:
61
62<Terminal cmd={['$ NODE_ENV=production npx expo start']} />
63
64### Disabling environment variables
65
66Environment variables in Expo CLI have two parts and both can be disabled:
67
681. Expo CLI automatically loads the **.env** files into the global process. To disable this behavior, set the environment variable `EXPO_NO_DOTENV` to `1` before running any Expo CLI command: `EXPO_NO_DOTENV=1`.
692. Expo's Metro config includes the inline serialization of environment variables in the client JavaScript bundle. To disable this behavior, you can use `EXPO_NO_CLIENT_ENV_VARS=1`.
70
71If you're experiencing issues with environment variables, you can try disabling one or both of these features.
72
73## Environment variables in Expo Application Services
74
75### EAS Build
76
77[EAS Build](/build/introduction/) uses Metro Bundler to build the JavaScript bundle embedded within your app binary, so it will use **.env** files uploaded with your build job to inline `EXPO_PUBLIC_` variables into your code. EAS Build also lets you define environment variables within build profiles in **eas.json** and via EAS Secrets. Check out the EAS Build documentation on [environment variables and build secrets](/build-reference/variables.mdx) for more information.
78
79### EAS Update
80
81[EAS Update](/eas-update/introduction) uses Metro Bundler in your local environment or CI to build your app bundle, so it will use available **.env** files to inline `EXPO_PUBLIC_` variables into your code. Check out the EAS Update documentation on [environment variables](/eas-update/environment-variables/) for more information.
82
83## Migrating to Expo environment variables
84
85### From react-native-config
86
87Update your **.env** files to prefix any variables used within your JavaScript code with `EXPO_PUBLIC_`:
88
89```diff .env
90- API_URL=https://myapi.com
91+ EXPO_PUBLIC_API_URL=https://myapi.com
92```
93
94> If you have any non-standard **.env** files (for example, **.env.staging**), you will need to migrate those to one of the [standard .env files](https://github.com/bkeepers/dotenv/blob/c6e583a/README.md#what-other-env-files-can-i-use).
95
96Then update your code to use `process.env.EXPO_PUBLIC_[VARNAME]`:
97
98```diff
99- import Config from "react-native-config";
100
101- const apiUrl = Config.API_URL;
102+ const apiUrl = process.env.EXPO_PUBLIC_API_URL;
103```
104
105### From babel-plugin-transform-inline-environment-variables
106
107Using a Babel plugin to transform your environment variable references in your code is similar to how Expo environment variables work. Set your variables inside of an **.env** file and update your variable names to use the `EXPO_PUBLIC_` prefix:
108
109```diff
110- const apiUrl = process.env.API_URL;
111+ const apiUrl = process.env.EXPO_PUBLIC_API_URL;
112```
113
114Then you can remove the plugin from your Babel config:
115
116```diff babel.config.js
117module.exports = function (api) {
118  api.cache(true);
119  return {
120    presets: ['babel-preset-expo'],
121--    plugins: ['transform-inline-environment-variables'],
122  };
123};
124```
125
126After updating your Babel config file, be sure to clear your cache with `npx expo start -c`.
127
128### From direnv
129
130Move any environment variables used in your JavaScript from their **.envrc** file to an **.env** file and prefix it with `EXPO_PUBLIC_`.
131
132Previously with direnv, you would need to use a [dynamic app config](/versions/latest/config/app/#app-config) that reads from [`process.env`](https://nodejs.org/dist/latest/docs/api/process.html#process_process_env) to set environment variables on the `extra` field so they can be used in your JavaScript code via [expo-constants](/versions/latest/sdk/constants). Move those references directly into your code, adding the `EXPO_PUBLIC_` prefix:
133
134```diff
135- import Constants from 'expo-constants';
136
137- const apiUrl = Constants.expoConfig.extra.apiUrl;
138+ const apiUrl = process.env.EXPO_PUBLIC_API_URL;
139```
140
141> [direnv](https://direnv.net/) automatically loads and unloads environment variables in your shell depending on your current directory, meaning it can affect the environment for any process running in that directly, not just the Expo CLI. You will likely want to continue using direnv for other environment variables that are not used in your JavaScript code.
142
143## Security considerations
144
145Never store sensitive secrets in environment variables that are prefixed with `EXPO_PUBLIC_`. When an end-user runs your app, they have access to all of the code and embedded environment variables in your app. Read more about [storing sensitive info](https://reactnative.dev/docs/security#storing-sensitive-info).
146
147## Environment variables in SDK 48 and lower
148
149Due to its ability to automatically load and unload environment variables in your shell depending on your current directory, we highly recommend [direnv](https://direnv.net/) for the highest level of compatibility with all Expo and EAS CLI tooling for SDK versions that do not support Expo environment variables. Since variables loaded with direnv are available in Node processes but not your application code itself, you can load it into the `extra` field of your [dynamic Expo config](/versions/latest/config/app/#app-config) and then access it in your JavaScript code via [expo-constants](/versions/latest/sdk/constants).
150