Setting Environment Variable in React Native?

Environment variables are key-value pairs that store configuration details like API URLs, feature flags, or non-sensitive data. They are injected during the build process and accessible within your React Native code.

We can use environment variables for maintainability and flexibility. It keeps configuration separate from logic, making code cleaner and easier to manage. And also easily switch environment-specific settings (development, staging, production) without modifying code.

To set Environment Variables:

1. Choose a package: Popular options include react-native-dotenv or react-native-config.
2. Install and set up: Follow the package’s specific instructions for installation and native module setup (if needed).
3. Create .env files: Create separate files (e.g., .env.development, .env.production) in your project’s root for different environments.
4. Access variables: Import and use variables within your code based on the chosen package’s syntax.

Here is a step-by-step guide on how to set environment variables using react-native-config.

1. Install react-native-config: If you haven’t already, install the react-native-config package by following command:

npm install --save react-native-config

2. Link the package: If you’re using React Native version 0.60 or higher, the package should be linked automatically. For lower versions, you may need to link it manually:

react-native link react-native-config

3. Create environment-specific .env files: In the root of your React Native project, Create separate .env files for each environment you want to support (e.g., .env.development, .env.staging, .env.production). Define your environment variables in these files.

Define variables in each file like this,

API_URL=https://api.example.com
DEBUG_MODE=true
APP_NAME=MyReactApp

4. Modify your package.json scripts: Update your package.json file to include environment-specific scripts.

Here’s an example for setting up the development environment:

"scripts": {
   "start:dev": "ENVFILE=.env.development react-native start",
   "android:dev": "ENVFILE=.env.development react-native run-android",
   "ios:dev": "ENVFILE=.env.development react-native run-ios",
   "start:staging": "ENVFILE=.env.staging react-native start",
   "android:staging": "ENVFILE=.env.staging react-native run-android",
   "ios:staging": "ENVFILE=.env.staging react-native run-ios",
   "start:prod": "ENVFILE=.env.production react-native start",
   "android:prod": "ENVFILE=.env.production react-native run-android",
   "ios:prod": "ENVFILE=.env.production react-native run-ios"
 }

5. Access environment variables in your code: Access the environment variables in your JavaScript code using Config.VARIABLE_NAME, where VARIABLE_NAME is the name of the variable defined in your .env files. For example:

import Config from 'react-native-config';
// Access the API_URL variable
const apiUrl = Config.API_URL;

6. Run the scripts: Run your app using the scripts defined in your package.json. For example, to run the app in the development environment, use:

npm run start:dev
Or
For Android,
npm run android:dev
For Ios,
npm run ios:dev

7. Secure your environment files: Ensure that sensitive information (e.g., API keys, passwords) is not exposed in your version control system by adding the environment files to your .gitignore file.

Remember to restart your development server and rebuild your app after making changes to the environment variables.