Managing React Native Environment Variables: A Guide for Secure App Development

Managing environment variables in React Native is essential for separating configuration from code, supporting multiple environments (development, staging, production), and keeping sensitive or environment-specific data out of your codebase. By using react native environment variables, you can ensure that your app stays secure and flexible, no matter which stage of development you’re in.

With extensive experience in React Native app development, we’ve seen firsthand how crucial it is to manage configurations properly. React Native developers have to handle configurations securely to prevent disclosing private data because they frequently work in development, staging, and production environments. As a popular JavaScript framework, React Native offers flexibility and efficiency, but only when you follow best practices, especially when it comes to handling environment variables. In this guide, we’ll explore how to set up and manage them effectively to streamline your development process.

Why React Native Environment Variables Matter

Environment variables might seem like a small piece of the puzzle, but they play a major role in building secure and maintainable React Native apps. Thanks to React Native’s cross-platform nature, you’re often working with a shared codebase for both iOS and Android. Managing environment variables properly helps ensure consistent behavior across platforms while keeping sensitive data secure. Here’s why they matter:

1. Keep sensitive data out of your codebase

Hardcoding things like API keys, server URLs, or access tokens directly into your code is risky. Not only does it make your app vulnerable if the code gets exposed, but it also creates extra work when you need to update or rotate those keys. Environment variables allow you to keep this sensitive data separate from your code, reducing security risks and making updates easier.

2. Make it easier to switch between environments

Whether you’re testing locally or pushing to production, different environments often require different configurations. With environment variables, switching from development to staging or production doesn’t mean digging through your code and manually updating values. Instead, you can define the right variables for each environment and switch with minimal hassle.

3. Improve collaboration across teams

For example, if you are building a React Native app for an enterprise, then sharing your codebase with other developers is unavoidable, but disclosing secrets shouldn’t be. In order to allow your teammates to run the application using their own configuration files, environment variables assist you in keeping sensitive values out of version control. This prevents unintentional leaks, simplifies onboarding, and safeguards secrets.

Common Approaches to Managing Environment Variables

There are several ways to manage environment variables in React Native, and the best approach often depends on your setup — whether you’re using a bare React Native project, working with Expo, or building with native modules. Here’s a breakdown of the most common methods developers use:

1. Using .env files with libraries

The most popular approach is using libraries like react-native-config or react-native-dotenv (Though dotenv has been archived since 2020). These tools allow you to define key-value pairs in .env files and load them into your app at build time.

Pros

– Easy to set up and maintain

– Uses a familiar .env syntax

– Great for managing different environments with separate .env.development, .env.staging, and .env.production files

Cons

– If not handled properly (e.g., accidentally committing .env files to version control), they can expose sensitive information

– Some variables may require linking or native code access for full functionality (especially with react-native-config)

2. Manual Configuration Files

Another simple method is to create a custom configuration file, like config.js or config.json, and export environment-specific values using logic in your code.

// config.js

export const API_URL = __DEV__

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

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

This approach uses the __DEV__ flag (built into React Native) to switch values based on the environment.

Pros

– No additional libraries required

– Easy to customize for specific use cases

Cons

– Config values are bundled with your code, so you shouldn’t store anything sensitive

– Doesn’t support dynamic changes during build or runtime

3. Platform-Specific Native Configurations

For more advanced use cases, you can configure environment variables directly within native code:

iOS: Use Xcode build schemes and set variables in Info.plist or as user-defined build settings

Android: Define build flavors and access variables via BuildConfig in your native Java/Kotlin code

Pros

– Gives fine-grained control over platform behavior

– Useful for early-access variables needed before the JS bundle loads

Cons

– Requires native development knowledge

– Harder to maintain compared to JS-based approaches

4. Expo Projects (Managed Workflow)

If you’re using Expo, managing environment variables is straightforward, but there are some important considerations.

Expo supports .env files out of the box, but you must prefix public variables with EXPO_PUBLIC_ to access them in your app.

Steps:

#1. Create a .env file:

EXPO_PUBLIC_API_URL=https://staging.example.com

#2. Access in your code:

const apiUrl = process.env.EXPO_PUBLIC_API_URL;

#3. Use different files like .env, .env.local, or .env.production — Expo CLI automatically loads them based on priority.

Note: Environment variables prefixed with EXPO_PUBLIC_ are bundled into your JavaScript code and visible in plain text. You should never store sensitive information, such as API keys or secrets, in these variables.

Among these approaches, react-native-config is one of the most widely used libraries in React Native app development. Let’s walk through how to set it up and use it effectively.

Step-by-Step Guide to Using react-native-config

So, if you are developing a React Native app, chances are you’ll want a clean, reliable way to manage environment-specific variables. React-native-config allows you to do just that. It lets you use .env files to separate your configuration without cluttering your codebase.

Here’s how to get it set up:

1. Install the library

Use your preferred package manager to install it:

npm install react-native-config

Then link it to your project (only required for older versions of React Native):

npx react-native link react-native-config

Note: If you’re using Expo (bare workflow), this library is compatible. But for managed workflows, you’ll need to consider Expo’s built-in support instead.

2. Create a .env file

In the root of your project, create a .env file and add your variables:

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

API_KEY=your-secret-api-key

These are your React Native environment variables, and they’ll now be available throughout your app.

3. Access variables in your code

You can now import the config and use the variables like this:

import Config from 'react-native-config';

const apiUrl = Config.API_URL;

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

No need to hardcode URLs or tokens in your app anymore — everything stays clean and environment-specific.

4. Define multiple environments

Want to switch between development, staging, and production? Create .env.development, .env.staging, and .env.production files:

• .env.development
• .env.staging
• .env.production

Then, update your build scripts (or CI pipeline) to load the correct file for the right environment.

For Android, you can pass the env file using ENVFILE=.env.staging ./gradlew assembleRelease.

For iOS, set the ENVFILE environment variable in your build scheme.

5. Keep secrets secure

Remember: these variables can be exposed if mishandled. Don’t store highly sensitive data like private keys or tokens unless you’re managing builds securely (e.g., via CI/CD). For critical secrets, consider using a secure storage service or backend-based solution instead.

Read the full article here.