React Native Environment Variables: Complete Setup Guide for Expo & Bare Apps

Through our experience with React Native app development, we have seen how proper environment management can prevent mistakes, improve security, and save time. In this guide, we will cover why environment variables matter, how to set them up, best practices, and advanced techniques to make your project more maintainable.

Why React Native Environment Variables Matter

Even though environment variables might seem like a small piece of your project, they are crucial for building secure and maintainable React Native apps. Since React Native lets you share code between iOS and Android, managing environment variables properly ensures consistent behavior across platforms and keeps sensitive information safe.

Here’s why you should pay attention:

1. Keep sensitive data out of your code

Hardcoding API keys, server URLs, or tokens in your code can create serious security risks. Environment variables let you store this data separately, making updates easier and reducing the chance of exposing secrets if your code is shared.

2. Switch between environments easily

Your development, staging, and production environments often require different settings. Environment variables make it possible to switch without changing the code manually. Just define variables per environment, and your build process handles the rest.

3. Improve team collaboration

When multiple developers work on a React Native app for an enterprise, sharing code is inevitable. Environment variables let each developer use their own configuration without exposing sensitive data, preventing accidental leaks and simplifying onboarding.

React Native Environment Variables Setup Methods

Choosing the right setup depends on whether you are working on a bare React Native project, using Expo, or dealing with native modules. Here’s a breakdown of the most common methods:

1. Using .env files with libraries

Libraries like react-native-config or react-native-dotenv (deprecated) allow you to define key-value pairs in .env files and load them during build time.

Pros

1. Easy to set up and maintain

2. Familiar .env syntax

3. Supports multiple environments (.env.development, .env.staging, .env.production)

Cons

1. Mishandled files can expose sensitive information

2. Some variables may require native linking for full functionality

2. Manual configuration files

You can create a custom file, such as config.js:

// config.js

export const API_URL = __DEV__

  ? 'https://dev.example.com'

  : 'https://prod.example.com';

Pros: No additional libraries, easy to customize
Cons: Values are bundled in your code, not suitable for sensitive data, and cannot change at runtime

3. Platform-specific native configurations

1. iOS: Use Xcode build schemes or Info.plist settings

2. Android: Define build flavors and access variables via BuildConfig

Pros: Fine-grained control over platform behavior
Cons: Requires native development knowledge, harder to maintain than JavaScript-based approaches

4. Expo React Native Environment Variables via process.env

Expo supports .env files, but public variables must be prefixed with 

EXPO_PUBLIC_.

EXPO_PUBLIC_API_URL=https://staging.example.com

Access them in your code:

const apiUrl = process.env.EXPO_PUBLIC_API_URL;

Expo automatically loads .env, .env.local, or .env.production based on priority. Remember, never store sensitive information in EXPO_PUBLIC_ variables, since they are visible in your JavaScript bundle.

Setting Up React Native Environment Variables with react-native-config

For many projects, react-native-config is the most reliable option. It separates configuration from your code without cluttering it.

Step 1: Install the library

npm install react-native-config

Link it for older React Native versions:

npx react-native link react-native-config

Works with Expo bare workflow; for managed workflow, use Expo’s built-in support.

Step 2: Create a .env file

API_URL=https://api.staging.example.com

API_KEY=your-secret-api-key

Step 3: Access variables in your code

import Config from 'react-native-config';

const apiUrl = Config.API_URL;

console.log(apiUrl); // https://api.staging.example.com

Step 4: Handle multiple environments

Create .env.development, .env.staging, .env.production and update your build scripts:

1. Android: ENVFILE=.env.staging ./gradlew assembleRelease

2. iOS: Set ENVFILE in your build scheme

Step 5: Keep secrets secure

Sensitive data should not be stored directly in .env. Use secure storage or inject secrets via CI/CD pipelines when needed.

React Native Development Tools That Make Life Easier

1. react-native-config: Load env files for JS and native code

2. Expo CLI: Built-in support for .env files

3. dotenv: Useful for loading .env files during development

4. Secrets Managers: AWS Secrets Manager, Azure Key Vault, HashiCorp Vault

5. VS Code + Extensions: DotENV, React Native Tools, Prettier, ESLint

Best Practices for Managing Environment Variables

1. Never commit .env files: Add .env* to .gitignore

2. Use separate files for each environment: .env.development, .env.staging, .env.production

3. Avoid exposing secrets in the frontend: Sensitive variables belong on the backend

4. Keep variable names clear and consistent: Use uppercase with underscores, e.g., API_URL, ENABLE_FEATURE_X

5. Document your environment setup – Internal documentation helps onboarding

6. Use .env.example: Provide placeholder values for teammates

Advanced Techniques

TypeScript Integration

Define a typed interface to get autocompletion and compile-time checks:

declare module 'react-native-config' {

  interface EnvVars {

    API_URL: string;

    ENABLE_LOGGING: string;

  }

  const Config: EnvVars;

  export default Config;

}

CI/CD Integration

Inject environment variables during deployment using GitHub Actions, GitLab CI, or CircleCI. This keeps secrets out of version control and ensures per-environment deployment.

Feature Toggles

Use environment variables to enable or disable features dynamically. This is useful for beta features, A/B testing, or staged rollouts.

Common Pitfalls and Solutions

1. Exposing sensitive data in the JS bundle: Use secure storage or inject secrets at runtime

2. Missing fallbacks: Always provide defaults, e.g., Config.API_URL || 'https://default.example.com'

3. Not rebuilding the app: Changes require a rebuild, not just hot reload

4. Committing .env files accidentally: Revoke secrets immediately if this happens

5. Typos or inconsistent naming: Standardize variable names and maintain a .env.example

Conclusion

Environment variables may not be the most exciting part of development, but they are essential for secure, flexible, and scalable React Native app development. By using .env files, react-native-config, and integrating with CI/CD pipelines, you keep your app maintainable and production-ready.

If you are building a React Native app and need expert help with configurations, optimizing environments, or scaling your application, our team delivers secure, high-performance React Native solutions tailored to your goals.