{"id":8619,"date":"2025-06-26T18:41:47","date_gmt":"2025-06-26T13:11:47","guid":{"rendered":"https:\/\/innovationm.co\/?p=8619"},"modified":"2025-06-26T18:41:47","modified_gmt":"2025-06-26T13:11:47","slug":"react-native-expo-multi-flavors-dev-staging-prod-implementation","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/","title":{"rendered":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project"},"content":{"rendered":"

 <\/p>\n

Maintaining different environments for development, staging, and production is essential in any large-scale mobile app. In this post, I\u2019ll walk you through how I implemented multi environment (flavor) support<\/strong>\u00a0in a React Native app built with\u00a0Expo + EAS<\/strong> \u2014 covering both Android and iOS \u2014 using separate configurations, build schemes, and runtime environment handling.<\/p>\n

\ufe0f Overview<\/h1>\n

We wanted three independent variants of our app:<\/p>\n

    \n
  • Development<\/strong>\u00a0(for internal testing)<\/li>\n
  • Staging<\/strong>\u00a0(for UAT and QA)<\/li>\n
  • Production<\/strong>\u00a0(live on the stores)<\/li>\n<\/ul>\n

    Each variant had its own:<\/p>\n

      \n
    • Bundle IDs \/ Package Names<\/li>\n
    • App names<\/li>\n
    • App icons (optional)<\/li>\n
    • Deep links<\/li>\n
    • Environment-specific variables (API endpoints, tokens, etc.)<\/li>\n<\/ul>\n

      \u2699\ufe0f Project Structure<\/h1>\n

      We used the following files to organize the environment-based configuration:<\/p>\n

        \n
      • app.config.ts<\/code>: Dynamic Expo config per environment<\/li>\n
      • eas.json<\/code>: EAS build profiles for each flavor<\/li>\n
      • gradle<\/code>\u00a0files: Product flavors and build variants on Android<\/li>\n
      • Xcode targets +\u00a0.xcconfig<\/code>\u00a0files for iOS<\/li>\n
      • .env<\/code>\u00a0support (if needed, though we kept it inside\u00a0app.config.ts<\/code>\u00a0via\u00a0process.env<\/code>)<\/li>\n<\/ul>\n

        Dynamic\u00a0app.config.ts<\/code><\/h1>\n

        We used a custom\u00a0app.config.ts<\/code>\u00a0that reads an\u00a0ENVIRONMENT<\/code>\u00a0variable and configures Expo accordingly.<\/p>\n

        import<\/span> { ExpoConfig<\/span>, ConfigContext<\/span> } from<\/span> 'expo\/config'<\/span>;\r\n\r\nexport<\/span> default<\/span> ({ config }: ConfigContext<\/span>): ExpoConfig<\/span> =><\/span> {\r\nconst<\/span> env = process.env<\/span>.ENVIRONMENT<\/span> || 'development'<\/span>;\r\n\r\nconst<\/span> flavorSettings = {\r\ndevelopment<\/span>: {\r\nname<\/span>: 'App Dev'<\/span>,\r\nslug<\/span>: 'app-dev'<\/span>,\r\nandroidPackage<\/span>: 'com.example.dev'<\/span>,\r\niosBundleId<\/span>: 'com.example.dev'<\/span>,\r\n},\r\nstaging<\/span>: {\r\nname<\/span>: 'App Staging'<\/span>,\r\nslug<\/span>: 'app-staging'<\/span>,\r\nandroidPackage<\/span>: 'com.example.staging'<\/span>,\r\niosBundleId<\/span>: 'com.example.staging'<\/span>,\r\n},\r\nproduction<\/span>: {\r\nname<\/span>: 'App'<\/span>,\r\nslug<\/span>: 'app'<\/span>,\r\nandroidPackage<\/span>: 'com.example'<\/span>,\r\niosBundleId<\/span>: 'com.example'<\/span>,\r\n},\r\n};\r\n\r\nconst<\/span> flavor = flavorSettings[env];\r\n\r\nreturn<\/span> {\r\n...config,\r\nname<\/span>: flavor.name<\/span>,\r\nslug<\/span>: flavor.slug<\/span>,\r\nandroid<\/span>: {\r\npackage<\/span>: flavor.androidPackage<\/span>,\r\n},\r\nios<\/span>: {\r\nbundleIdentifier<\/span>: flavor.iosBundleId<\/span>,\r\n},\r\nextra<\/span>: {\r\nENVIRONMENT<\/span>: env,\r\n},\r\n};\r\n};<\/pre>\n
        EAS Build Profiles (eas.json<\/code>)<\/h1>\n
        We then set up three build profiles in\u00a0eas.json<\/code>, each passing a custom\u00a0ENVIRONMENT<\/code>\u00a0and custom gradle commands \/ Xcode schemes:<\/p>\n
        {<\/span>\r\n\"build\"<\/span>:<\/span> {<\/span>\r\n\"development\"<\/span>:<\/span> {<\/span>\r\n\"extends\"<\/span>:<\/span> \"base\"<\/span>,<\/span>\r\n\"env\"<\/span>:<\/span> {<\/span>\r\n\"ENVIRONMENT\"<\/span>:<\/span> \"development\"<\/span>\r\n}<\/span>,<\/span>\r\n\"android\"<\/span>:<\/span> {<\/span>\r\n\"gradleCommand\"<\/span>:<\/span> \":app:bundleDevelopmentRelease\"<\/span>\r\n}<\/span>,<\/span>\r\n\"ios\"<\/span>:<\/span> {<\/span>\r\n\"scheme\"<\/span>:<\/span> \"app-dev\"<\/span>\r\n}<\/span>\r\n}<\/span>,<\/span>\r\n\"staging\"<\/span>:<\/span> {<\/span>\r\n\"extends\"<\/span>:<\/span> \"base\"<\/span>,<\/span>\r\n\"env\"<\/span>:<\/span> {<\/span>\r\n\"ENVIRONMENT\"<\/span>:<\/span> \"staging\"<\/span>\r\n}<\/span>,<\/span>\r\n\"android\"<\/span>:<\/span> {<\/span>\r\n\"gradleCommand\"<\/span>:<\/span> \":app:bundleStagingRelease\"<\/span>\r\n}<\/span>,<\/span>\r\n\"ios\"<\/span>:<\/span> {<\/span>\r\n\"scheme\"<\/span>:<\/span> \"app-staging\"<\/span>\r\n}<\/span>\r\n}<\/span>,<\/span>\r\n\"production\"<\/span>:<\/span> {<\/span>\r\n\"extends\"<\/span>:<\/span> \"base\"<\/span>,<\/span>\r\n\"env\"<\/span>:<\/span> {<\/span>\r\n\"ENVIRONMENT\"<\/span>:<\/span> \"production\"<\/span>\r\n}<\/span>,<\/span>\r\n\"android\"<\/span>:<\/span> {<\/span>\r\n\"gradleCommand\"<\/span>:<\/span> \":app:bundleProductionRelease\"<\/span>\r\n}<\/span>,<\/span>\r\n\"ios\"<\/span>:<\/span> {<\/span>\r\n\"scheme\"<\/span>:<\/span> \"app\"<\/span>\r\n}<\/span>\r\n}<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n
        \n
        \n
        \n
        You can also include environment-specific variables like base URLs, API keys, or toggles in the\u00a0env<\/code>\u00a0block.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        Android: Product Flavors<\/h1>\n
        We used\u00a0product flavors<\/strong>\u00a0in\u00a0android\/app\/build.gradle<\/code>:<\/p>\n<\/div>\n
        flavorDimensions \"default\"\r\n\r\nproductFlavors {\r\ndevelopment {\r\ndimension \"default\"\r\napplicationId \"com.example.dev\"\r\nversionNameSuffix \"-dev\"\r\nresValue \"string\", \"app_name\", \"App Dev\"\r\n}\r\nstaging {\r\ndimension \"default\"\r\napplicationId \"com.example.staging\"\r\nversionNameSuffix \"-staging\"\r\nresValue \"string\", \"app_name\", \"App Staging\"\r\n}\r\nproduction {\r\ndimension \"default\"\r\napplicationId \"com.example\"\r\nresValue \"string\", \"app_name\", \"App\"\r\n}\r\n}<\/pre>\n
        Each flavor has its own package name, app name, and can have separate resources like\u00a0strings.xml<\/code>.<\/p>\n
        Android: Manifest-Specific Configurations<\/h1>\n
        To support deep linking and intent filters specific to each flavor, we used\u00a0different\u00a0<\/strong>AndroidManifest.xml<\/strong><\/code>\u00a0files per flavor<\/strong>.<\/p>\n
        Create these under:<\/p>\n
        android\/app\/src\/development\/AndroidManifest.xml\r\nandroid\/app\/src\/staging\/AndroidManifest.xml\r\nandroid\/app\/src\/production\/AndroidManifest.xml<\/pre>\n
        In each manifest file, configure your deep links or intent filters like so:<\/p>\n
        <manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\">\r\n\r\n<application>\r\n<activity android:name=\".MainActivity\">\r\n<!-- Deep link intent specific to this flavor -->\r\n<intent-filter android:autoVerify=\"true\">\r\n<action android:name=\"android.intent.action.VIEW\" \/>\r\n<category android:name=\"android.intent.category.DEFAULT\" \/>\r\n<category android:name=\"android.intent.category.BROWSABLE\" \/>\r\n\r\n<!-- Replace with scheme relevant to the flavor -->\r\n<data android:scheme=\"yourapp.staging\" \/>\r\n<\/intent-filter>\r\n\r\n<!-- Optional: If your app reacts to download completion -->\r\n<intent-filter>\r\n<action android:name=\"android.intent.action.DOWNLOAD_COMPLETE\" \/>\r\n<\/intent-filter>\r\n<\/activity>\r\n<\/application>\r\n\r\n<\/manifest><\/pre>\n
        \n
        \n
        \n
        This allows each flavor to respond to different schemes or hostnames.<\/p>\n<\/div>\n<\/div>\n<\/div>\n
        \n
        iOS: Multiple Targets +\u00a0.xcconfig<\/code><\/h1>\n
        To replicate Android-style flavoring on iOS, we created\u00a0multiple targets in Xcode<\/strong>\u00a0\u2014 one per environment (Development, Staging, Production). Each target allows unique bundle identifiers, app schemes, icons, and configs.<\/p>\n
        How to Create Targets in Xcode<\/h2>\n
          \n
        1. Open your project in Xcode<\/strong>\u00a0(.xcworkspace<\/code>).<\/li>\n
        2. In the project navigator, right-click your main app target \u2192\u00a0Duplicate<\/strong>.<\/li>\n
        3. Rename the duplicate to match the environment, like\u00a0MyAppDev<\/code>,\u00a0MyAppStaging<\/code>.<\/li>\n
        4. Select the new target and:<\/li>\n<\/ol>\n
            \n
          • Update its\u00a0Bundle Identifier<\/strong>\u00a0in\u00a0Build Settings \u2192 Packaging<\/code>.<\/li>\n
          • Assign a custom\u00a0Display Name<\/strong>\u00a0in its\u00a0Info.plist<\/code>\u00a0if needed.<\/li>\n<\/ul>\n
            5. For each new target:<\/p>\n
              \n
            • Create\u00a0.xcconfig<\/code>\u00a0files like\u00a0Dev.debug.xcconfig<\/code>,\u00a0Dev.release.xcconfig<\/code>, etc.<\/li>\n
            • Link them via\u00a0Build Settings \u2192 Configuration<\/code>.<\/li>\n<\/ul>\n
              \n
              \n
              \n
              For each target:<\/p>\n
                \n
              1. Defined unique Bundle ID<\/li>\n
              2. Assigned unique\u00a0APP_SCHEME<\/code><\/li>\n
              3. Linked separate\u00a0.xcconfig<\/code>\u00a0files (for Debug and Release)<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>\n
                Then, within\u00a0Info.plist<\/code>, we referenced a build-time variable:<\/div>\n<\/div>\n
                <\/div>\n
                <\/div>\n
                <key>CFBundleURLTypes<\/key>\r\n<array>\r\n<dict>\r\n<key>CFBundleURLSchemes<\/key>\r\n<array>\r\n<string>$(APP_SCHEME)<\/string>\r\n<\/array>\r\n<\/dict>\r\n<\/array><\/pre>\n
                In Xcode \u2192 Build Settings (per target), we added:<\/p>\n
                APP_SCHEME = app.dev\r\nAPP_SCHEME = app.staging\r\nAPP_SCHEME = app<\/pre>\n
                This way, you don\u2019t need different\u00a0Info.plist<\/code>\u00a0files \u2014 just plug in the correct runtime values.<\/p>\n
                Scripts in\u00a0package.json<\/code><\/h1>\n
                We added custom scripts to streamline build and run tasks:<\/p>\n
                \"android:dev\"<\/span>:<\/span> \"ENVIRONMENT=development expo run:android --variant developmentDebug\"<\/span>,<\/span>\r\n\"android:staging\"<\/span>:<\/span> \"ENVIRONMENT=staging expo run:android --variant stagingDebug\"<\/span>,<\/span>\r\n\"android:prod\"<\/span>:<\/span> \"ENVIRONMENT=production expo run:android --variant productionDebug\"<\/span>,<\/span>\r\n\"ios:dev\"<\/span>:<\/span> \"ENVIRONMENT=development expo run:ios --scheme app-dev\"<\/span>,<\/span>\r\n\"ios:staging\"<\/span>:<\/span> \"ENVIRONMENT=staging expo run:ios --scheme app-staging\"<\/span>,<\/span>\r\n\"ios:prod\"<\/span>:<\/span> \"ENVIRONMENT=production expo run:ios --scheme app\"<\/span>,<\/span><\/pre>\n
                You can run:<\/p>\n
                npm run android:staging\r\nnpm run ios:prod<\/pre>\n
                Triggering Builds and Submissions via Scripts<\/h1>\n
                Once your\u00a0eas.json<\/code>,\u00a0app.config.ts<\/code>, native Android\/iOS configurations, and environment variables are set up, you can leverage powerful build and submit scripts directly from your\u00a0package.json<\/code>.<\/p>\n
                These scripts make it super easy to automate builds and uploads for each environment without manual intervention.<\/p>\n
                \ufe0f Build Commands<\/p>\n
                \"build:dev:android\"<\/span>:<\/span> \"eas build --platform android --profile development\"<\/span>,<\/span>\r\n\"build:staging:android\"<\/span>:<\/span> \"eas build --platform android --profile staging\"<\/span>,<\/span>\r\n\"build:prod:android\"<\/span>:<\/span> \"eas build --platform android --profile production\"<\/span>,<\/span>\r\n\r\n\"build:dev:ios\"<\/span>:<\/span> \"eas build --platform ios --profile development\"<\/span>,<\/span>\r\n\"build:staging:ios\"<\/span>:<\/span> \"eas build --platform ios --profile staging\"<\/span>,<\/span>\r\n\"build:prod:ios\"<\/span>:<\/span> \"eas build --platform ios --profile production\"<\/span><\/pre>\n
                Submit Commands<\/p>\n
                \"submit:dev:android\"<\/span>:<\/span> \"eas submit --platform android --profile development\"<\/span>,<\/span>\r\n\"submit:staging:android\"<\/span>:<\/span> \"eas submit --platform android --profile staging\"<\/span>,<\/span>\r\n\"submit:prod:android\"<\/span>:<\/span> \"eas submit --platform android --profile production\"<\/span>,<\/span>\r\n\r\n\"submit:dev:ios\"<\/span>:<\/span> \"eas submit --platform ios --profile development\"<\/span>,<\/span>\r\n\"submit:staging:ios\"<\/span>:<\/span> \"eas submit --platform ios --profile staging\"<\/span>,<\/span>\r\n\"submit:prod:ios\"<\/span>:<\/span> \"eas submit --platform ios --profile production\"<\/span><\/pre>\n
                You can run these commands like so:<\/p>\n
                npm run build:staging:android\r\nnpm run submit:prod:ios<\/pre>\n
                This setup streamlines your deployment workflow and ensures consistency across environments.<\/p>\n
                Final Thoughts<\/h1>\n
                With this setup:<\/p>\n
                  \n
                • You isolate environments without code duplication.<\/li>\n
                • Each flavor gets its own deep links, configurations, and runtime settings.<\/li>\n
                • You gain full control over the build and release lifecycle for each variant.<\/li>\n<\/ul>\n
                  This setup has significantly streamlined our CI\/CD, testing, and release pipelines \u2014 making the app more maintainable and scalable.<\/p>\n
                  \u2705 Quick Tips<\/h1>\n
                    \n
                  • \u2757 Always keep a single\u00a0Info.plist<\/code>\u00a0and use build variables.<\/li>\n
                  • Place variant-specific AndroidManifests inside respective\u00a0src\/{flavor}<\/code>\u00a0folders.<\/li>\n
                  • \ufe0f Use\u00a0.xcconfig<\/code>\u00a0files to manage per-target variables on iOS.<\/li>\n
                  • Use EAS Build\u2019s gradleCommand<\/code>\u00a0and\u00a0scheme<\/code> per profile for complete separation.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
                      Maintaining different environments for development, staging, and production is essential in any large-scale mobile app. In this post, I\u2019ll walk you through how I implemented multi environment (flavor) support\u00a0in a React Native app built with\u00a0Expo + EAS \u2014 covering both Android and iOS \u2014 using separate configurations, build schemes, and runtime environment handling. \ufe0f […]<\/p>\n","protected":false},"author":1,"featured_media":8620,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1654,1655,1652,1656,1657,1653,257,412],"tags":[1669,1660,1666,1670,1151,1661,1672,1667,1665,1671,1664,14,586,169,1494,1659,1663,1668,1658,1662],"class_list":["post-8619","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-variants","category-development-environment","category-expo","category-mobile-development","category-mobile-devops","category-multi-flavors","category-react","category-react-native","tag-app-deployment","tag-app-variants","tag-app-json-configuration","tag-build-variants","tag-cross-platform-development","tag-development-environments","tag-development-workflow","tag-eas-build","tag-environment-variables","tag-expo-cli","tag-expo-configuration","tag-innovationm","tag-mobile-app-development","tag-mobile-app-testing","tag-mobile-devops","tag-multi-flavors","tag-production-environment","tag-react-native-development","tag-react-native-expo","tag-staging-environment"],"yoast_head":"\nHow to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog<\/title>\n<meta name=\"description\" content=\"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-26T13:11:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project\",\"datePublished\":\"2025-06-26T13:11:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/\"},\"wordCount\":585,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png\",\"keywords\":[\"app deployment\",\"app variants\",\"app.json configuration\",\"build variants\",\"cross-platform development\",\"development environments\",\"development workflow\",\"EAS build\",\"environment variables\",\"Expo CLI\",\"Expo configuration\",\"InnovationM\",\"Mobile App Development\",\"mobile app testing\",\"Mobile DevOps\",\"multi flavors\",\"production environment\",\"React Native development\",\"React Native Expo\",\"staging environment\"],\"articleSection\":[\"App Variants\",\"Development Environment\",\"Expo\",\"Mobile Development\",\"Mobile DevOps\",\"Multi Flavors\",\"React\",\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/\",\"name\":\"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png\",\"datePublished\":\"2025-06-26T13:11:47+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png\",\"width\":2240,\"height\":1260,\"caption\":\"React Native\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-native-expo-multi-flavors-dev-staging-prod-implementation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog","description":"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/","og_locale":"en_US","og_type":"article","og_title":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog","og_description":"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.","og_url":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/","og_site_name":"InnovationM - Blog","article_published_time":"2025-06-26T13:11:47+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project-1024x576.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project","datePublished":"2025-06-26T13:11:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/"},"wordCount":585,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png","keywords":["app deployment","app variants","app.json configuration","build variants","cross-platform development","development environments","development workflow","EAS build","environment variables","Expo CLI","Expo configuration","InnovationM","Mobile App Development","mobile app testing","Mobile DevOps","multi flavors","production environment","React Native development","React Native Expo","staging environment"],"articleSection":["App Variants","Development Environment","Expo","Mobile Development","Mobile DevOps","Multi Flavors","React","React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/","url":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/","name":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png","datePublished":"2025-06-26T13:11:47+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"Learn how to implement multi-flavors (dev, staging, prod) in React Native Expo projects. Run multiple app environments simultaneously on one device with our step-by-step guide from InnovationM's expert developers.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2025\/06\/How-to-Implement-Multi-Flavors-DevStaging-Prod-in-a-React-Native-Expo-Project.png","width":2240,"height":1260,"caption":"React Native"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/react-native-expo-multi-flavors-dev-staging-prod-implementation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Implement Multi-Flavors (Dev, Staging, Prod) in a React Native + Expo Project"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/8619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=8619"}],"version-history":[{"count":2,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/8619\/revisions"}],"predecessor-version":[{"id":8622,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/8619\/revisions\/8622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/8620"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=8619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=8619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=8619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}