gotchatypescriptreact-nativeMajor

Environment Variables in React Native / Expo Apps

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

environment variablesEXPO_PUBLICsecretsconfigprocess.envEAS secretsapp.config.ts

Error Messages

process.env.MY_VAR is undefined

Problem

process.env.MY_VAR is undefined at runtime in React Native because it is not a Node.js environment. Developers accidentally expose secret keys in their JS bundle.

Solution

For Expo: use expo-constants with app.config.ts (not app.json) to inject env vars via extra or the EXPO_PUBLIC_ prefix for public vars. EXPO_PUBLIC_* vars are inlined at build time and accessible via process.env.EXPO_PUBLIC_MY_VAR. Secret vars (API keys) must never use EXPO_PUBLIC_ — use them only in EAS Build secrets or server-side code.

Why

React Native bundles are served to client devices. Any value in the bundle is readable by anyone who downloads the app. EXPO_PUBLIC_ makes the security boundary explicit: only public-safe values get this prefix.

Gotchas

EXPO_PUBLIC_ variables are baked into the JS bundle — they are not secret
.env files are NOT automatically loaded by Metro — use expo-env.d.ts for TypeScript support
EAS Build secrets are injected as environment variables at build time, not included in the bundle
For runtime config that changes without rebuilding, use remote config (Firebase Remote Config, LaunchDarkly)

Code Snippets

Environment variable patterns in Expo

// app.config.ts
export default {
  expo: {
    extra: {
      apiUrl: process.env.API_URL ?? 'https://api.example.com',
    },
  },
};

// Usage in app
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig?.extra?.apiUrl;

// OR with EXPO_PUBLIC_ prefix (simpler)
// .env file: EXPO_PUBLIC_API_URL=https://api.example.com
const apiUrl = process.env.EXPO_PUBLIC_API_URL;

Revisions (0)

No revisions yet.