Understanding Environment Variables in React Native

What are Environment Variables?

Environment variables are values that are set outside of a program and can be used within the code. They’re often used to store sensitive information like API keys, database credentials, or other configuration data. In React Native, environment variables can be used to switch between different environments, such as development, testing, and production.

Why Use Environment Variables?

Using environment variables in React Native offers several benefits:

• Security: By storing sensitive information outside of the code, you reduce the risk of exposing it to unauthorized parties.
• Flexibility: Environment variables make it easy to switch between different environments without having to modify the code.
• Reusability: You can reuse the same code across different environments, reducing duplication and making maintenance easier.

Types of Environment Variables in React Native

React Native supports several types of environment variables:

• .env: The default file for storing environment variables.
• .env.local: Overrides all environment files except the test file.
• .env.development: Specific to the development environment.
• .env.production: Specific to the production environment.
• .env.test: Specific to the test environment.

Prioritizing Environment Variables

When running the app, React Native prioritizes environment variables in the following order:

npm start: .env.development.local > .env.development > .env.local > .env
npm run build: .env.production.local > .env.production > .env.local > .env
npm test: .env.test.local > .env.test > .env

Using process.env

process.env is a global variable that contains the environment variables. You can access environment variables using process.env.VARIABLE_NAME.

Example:

const apiKey = process.env.API_KEY;

Creating Custom Environment Variables

To create a custom environment variable, add a new line to the .env file in the format VARIABLE_NAME=value. Then, access the variable using process.env.VARIABLE_NAME.

Example:

# .env file
CUSTOM_VAR=hello

# Accessing the variable in JavaScript
const customVar = process.env.CUSTOM_VAR;

Switching Between Environments

Use environment variables to switch between different environments. For example, you can use process.env.NODE_ENV to determine the current environment and load the corresponding configuration.

Example:

if (process.env.NODE_ENV === 'development') {
  // Load development configuration
} else if (process.env.NODE_ENV === 'production') {
  // Load production configuration
}

Hiding API Keys

Don’t store sensitive information like API keys in the .env file. Instead, use a separate file or a secrets manager to store sensitive data.

Expanding Environment Variables

You can expand environment variables using concatenation or by referencing existing variables.

Example:

# .env file
BASE_URL=https://example.com
API_URL=${BASE_URL}/api

# Accessing the expanded variable in JavaScript
const apiUrl = process.env.API_URL;