How to Use React Native Environment Variables: A Complete Guide

In mobile app development with React Native, proper management of environment variables is critical to handling sensitive and environment-specific configurations (development, testing, production). Environment variables allow you to store sensitive information such as API keys, service endpoints, and other sensitive data, without exposing them in the source code. 

Why are environment variables important in React Native?

In any application, environment variables are key to keeping your code secure and flexible. By separating environment-specific configuration from your application logic, you can more easily manage the differences between development, testing, and production environments without needing to make direct changes to your source code.

For example, an application that consumes an external API may have different URLs depending on the environment it is running in. Using environment variables, it is possible to automatically change the URL based on the environment, without needing to touch your source code.

Additionally, keeping sensitive credentials and configurations out of the source code is a best practice in terms of security and compliance with regulations like GDPR and PCI DSS, which mandate secure handling of information.

Step-by-Step: How to Use Environment Variables in React Native

Here's the process for successfully implementing environment variables in a React Native project.

1. Set up a .env file

The first step is to create a .env file in the root directory of your project. This file will contain all the environment variables you want to define. Each environment variable follows the key-value format:

API_URL=https://api.example.com
GOOGLE_MAPS_API_KEY=your-google-maps-api-key

The .env file should not be included in version control (like Git), as it could expose sensitive information. Make sure to include the .env file in your .gitignore file.

# .gitignore
.env

2. Installing the necessary dependencies

To work with environment variables in React Native, you need to use external libraries. The most commonly used one is react-native-dotenv, which allows you to load and use environment variables in your JavaScript code. To install it, run the following command:

npm install react-native-dotenv

Once installed, make sure to add it to your Babel configuration. To do this, edit your babel.config.js file and add the plugin:

module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
['module:react-native-dotenv', {
"moduleName": "@env",
"path": ".env",
}]
]
};

3. Accessing environment variables in your code

Now that you have the .env file and the corresponding library set up correctly, you can start accessing the environment variables in your code. Import the variables from the .env file using the following syntax:

import { API_URL, GOOGLE_MAPS_API_KEY } from '@env';
console.log(API_URL);
console.log(GOOGLE_MAPS_API_KEY);

When you run your app, React Native will automatically load the variables from the corresponding .env file. It's important to remember that any changes to the .env file will require you to restart your development server for the changes to take effect.

4. Handling different environments

It's common to have different environment files to handle the specific settings for each environment (development, testing, production). You can do this by creating multiple .env files like .env.development, .env.production, and loading them based on the environment your app is running in.

To automate this process, you can install react-native-config, a library that makes managing multiple .env files easier. Install the dependency with the following command:

npm install react-native-config

Next, configure your environment-specific .env files:

.env.development
.env.production
Make sure to configure scripts in your package.json for each environment:
"scripts": {
"start": "react-native start",
"start:development": "ENVFILE=.env.development react-native run-android",
"start:production": "ENVFILE=.env.production react-native run-android"
}

This will allow you to run your app in different environments easily.

5. Best practices for using environment variables

• Don't store sensitive information in source code: Never include API keys or credentials directly in your code. Use environment variables to keep them out of the public's reach.
• Encrypt sensitive environment variables: If you handle highly sensitive information, consider using a secure secret storage service, such as AWS Secrets Manager or Google Secret Manager, for added protection.
• Documentation: Make sure to keep up-to-date documentation on the environment variables used in each project, so that developers can configure environments appropriately.

Using environment variables in React Native is a key tool for managing environment-specific settings and ensuring the security of mobile apps. Following these steps not only improves code organization, but also strengthens security by keeping sensitive settings out of the source code.

While the process of setting up environment variables can be straightforward for experienced developers, many companies prefer to delegate the management of these technical aspects to specialized teams.

At Rootstack, we are experts in developing mobile apps with React Native and implementing secure solutions to manage environment configurations. Contact us today to optimize and secure your React Native app.

We recommend you on video