How do I handle Product Flavors in a React Native Android app?

Question

My React Native app has 3 versions: App1, App2, App3. Each of these has a dev and prod version.

I've set these up in android/app/build.gradle as follows:

flavorDimensions "client", "backend"
    productFlavors {
        app1 {
            applicationId="com.app1name"
            dimension "client"
        }
        app2 {
            applicationId="com.app2name"
            dimension "client"
        }
        app3 {
            applicationId="com.app3name"
            dimension "client"
        }
        dev {
            dimension "backend"
        }
        prod {
            dimension "backend"
        }
    }
}

I've then set up android/app/src folders like this:

src
-- main
   -- assets
   -- java
      -- com
         -- app1name
            MainActivity.java
            MainApplication.java  
    -- res
    AndroidManifest.xml

But I'm not sure where to put the other app folders, and whatever I try doesn't seem to work. I've tried:

src
-- app2name
   -- assets
   -- java
      -- com
         MainActivity.java
         MainApplication.java  
    -- res
    AndroidManifest.xml

(and the same for app3)

and I've tried:

src
-- main
   -- assets
   -- java
      -- com
         -- app2name
            -- assets
            -- java
            -- com
               MainActivity.java
               MainApplication.java  
            -- res
            AndroidManifest.xml  
    -- res
    AndroidManifest.xml

I've made sure that each AndroidManifest.xml/MainActivity.java/MainApplication.java has the correct package name at the top.

However, I get the following error when I try to run app1name (it builds and installs ok):

Starting: Intent { cmp=com.app2name/.MainActivity }
Error type 3
Error: Activity class {com.app2name/com.app2name.MainActivity} does not exist.

So it looks as though it's trying to start app1, but for some reason is also looking for the main activity in app2, and I can't see why it's doing that.

What am I doing wrong?

Answer 1

To handle multiple productFlavours, you need to either add application id suffix, or the complete application id in your run command.

npx react-native run-android --variant=app1nameDebug --appId=com.app1name

Alternatively if you have appSuffixId mentioned in your productFlavours, then

npx react-native run-android --variant=app1nameDebug --appIdSuffix=dev

Answer 2

How I added React Native version: 0.73+

1. Install react-native-config.

2. Create your .env file (depending upon you). In my case, I have created three env files first .env.dev, second .env.production, and third .env.staging.

3. Under your_project_name/android/app/build.gradle add below line

   apply from: project(':react-native-config').projectDir.getPath() + 
   "/dotenv.gradle"
   
   project.ext.envConfigFiles = [
     dev:".env.dev",
     prod:".env.production",
     staging:".env.staging",
   ]
   

just like this

4. Add your Flavors

   buildTypes {
   debug {
       signingConfig signingConfigs.debug
   }
   release {
       // Caution! In production, you need to generate your own keystore file.
       // see https://reactnative.dev/docs/signed-apk-android.
       signingConfig signingConfigs.debug
       minifyEnabled enableProguardInReleaseBuilds
       proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
   }
    }
   // below code 
   flavorDimensions "default"
    productFlavors {  
       development {  // change development according to your build name
         dimension 'default'
         applicationIdSuffix ".development"   // here also
       }
    }
   

5. Like this

6. In package.json file

   "androidDevelopment": "ENVFILE=.env.production react-native run-android --mode=developmentDebug --appIdSuffix=development"
   

Like this

7. My .env file