React Native Environment Setup: Managing Dev, Prod, and Staging Builds with Android Flavors and iOS Schemes
If you've worked on a React Native app that has both development and production environments , you probably know how quickly environment management becomes annoying. At the beginning, it usually looks simple: Development → API A Production → API B Then the app grows. Suddenly, you have different: API endpoints Firebase projects Branch environments Payment environments Analytics configuration Push…
The author aimed to simplify environment management for a React Native app with development and production builds. They wanted to automate the selection of correct API, Firebase, branch, payment environments, app ID, app name, and native configuration without manually editing source files before each build.
To achieve this, the author utilized three tools: react-native-config for environment variables, Android Product Flavors for separate development and production Android applications, and iOS Schemes + Build Configurations for the equivalent on iOS. They structured .env.dev and .env.prod files with environment-specific values, separate from application code.
React-native-config was chosen as it handles environment configuration in JavaScript, native Android, and iOS code. The application code consumes these variables from react-native-config, ensuring a single source of truth for environment configuration. React-native-config values are baked into the build process, meaning changing .env values requires a rebuild.
For Android, the author created dev and prod product flavors, assigning separate application IDs for each. This feature allows testing both versions on the same device without uninstalling. Android's product flavor build types (debug, release) combine with flavors, creating variants like devDebug, devRelease, prodDebug, and prodRelease.
When building, the appropriate .env file is automatically selected based on the build variant, thus eliminating manual environment switching. Additionally, distinct app names and package IDs were configured for each flavor, making the two applications visually distinguishable.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
