React Native | Build variants— dev, staging, prod using react-native-config

Build and Deployment configuration

Setting up flavors (also known as build variants or app configurations) in a React Native project using react-native-config is a common practice for managing different configurations for development, staging, and production environments.

react-native-config allows you to define environment-specific variables and settings in separate configuration files, making it easier to switch between environments.

Here’s how you can set up flavors for development, staging, and production using react-native-config:

1. Install react-native-config:

First, make sure you have react-native-config installed in your project. If you haven't already, you can add it to your project by running:

npm install react-native-config --save or 
yarn add react-native-config

2. Create Configuration Files:

Create separate configuration files for each environment (e.g., .env.dev, .env.staging, and .env.prod) in the root of your project. These files will contain environment-specific variables.

For example, you can create a .env.dev file with development-specific variables:

API_BASE_URL=your_dev_api_url

Create similar files for staging and production with the appropriate values.

3. Modify package.json:

Update the scripts section in your package.json to include environment-specific start commands. For example:

"scripts": {
  "start:dev": "react-native run-android --variant=devDebug",
  "start:staging": "react-native run-android --variant=stagingDebug",
  "start:prod": "react-native run-android --variant=prodRelease"
}

Modify the commands according to your specific needs. You may use different build variants based on your project structure.

4. Configure Build Variants (Android):

If you are using Android, you need to configure your build variants in the android/app/build.gradle file.

Inside the android block of android/app/build.gradle, define your product flavors like this:

flavorDimensions "default"
productFlavors {
    dev {
        dimension "default"
    }
    staging {
        dimension "default"
    }
    prod {
        dimension "default"
    }
}

These flavors should match the names you used in your package.json scripts.

5. Load Environment Variables:

You can load the environment-specific variables in your JavaScript code using react-native-config. Import and use it in your code like this:

import Config from "react-native-config";

// Access environment-specific variables
const apiBaseUrl = Config.API_BASE_URL;

6. Running Your App:

To run your app with a specific flavor, use the scripts defined in your package.json. For example, to run the app in the development environment, use:

yarn start:dev or npm start:dev 

Similarly, you can run the app in staging or production environments using the respective commands.

By following these steps, you can set up flavors for development, staging, and production environments in your React Native project using react-native-config. This allows you to easily switch between different configurations when developing and building your app.

Thank you for reading this article! Don’t forget to clap 👏 .

If you have any queries related to ReactNative, I’m always happy to help you. You can reach me on LinkedIn and gmail.

Happy Learning🚀 Happy Coding💻.