How to Use Environment Variables in React Native Expo Project

#reactnative #environmentvariables

With the release of React Native 0.80 and Expo SDK 50, working with environment variables has become more streamlined and secure, thanks to native support built directly into the Expo CLI.
In this blog post, we’ll explore how to properly configure and use environment variables in an Expo-managed React Native project.

What Are Environment Variables?

Environment variables are key-value pairs that define runtime configuration without hardcoding sensitive or environment-specific data directly into your application. Typical use cases include:

Switching API base URLs
Managing third-party service keys

Setting Up Environment Variables in Your React Native Expo Project

Expo automatically reads from .env files and injects any variable prefixed with EXPO_PUBLIC_into your JavaScript code.

Create a .env file in the root of your project: .env file

EXPO_PUBLIC_DATABASE_URL=https://api.example.com
EXPO_PUBLIC_SECRET_KEY=DWADAFA

✅ Only variables that begin with EXPO_PUBLIC_ will be available in your app via process.env.

Using Environment Variables in Code

const secretKey = process.env.EXPO_PUBLIC_SECRET_KEY;

⚠️ Only static dot notation (process.env.VARIABLE) is supported. Destructuring or dynamic access will not work

Using Multiple Environments

Expo supports standard dotenv file resolution, allowing multiple environment configurations:
.env — Default environment
.env.local— Machine-specific overrides (should be added to .gitignore)

.gitignore file

.env*.local

Conclusion

With native support for environment variables in React Native 0.80 and Expo SDK 50, managing multiple environments is now more streamlined, secure, and developer-friendly. By following best practices—like using EXPO_PUBLIC_ prefixes, avoiding secrets in the frontend, and leveraging .env.local for local overrides—you can simplify your configuration workflow while keeping your codebase clean and scalable