How do I write flavor specifc code in react-native?

Question

About a week ago I starded developing a white-label app, where the only thing that will differ from app to app are some color values, source of images and API endpoints, but the app itself does the exact same thing.

So the last couple of days I tryied to learn how to build multiple apps from the same project... (lets mainly focus on Android here) thru my journey I found a few guides and I managed to make it work by following this guide and setting product flavors in my build.gradle.

    productFlavors {
    firstapp {
        applicationIdSuffix '.firstapp'
        resValue "string", "build_config_package", "com.myapp"
    }
    secondapp {
        applicationIdSuffix '.secondapp'
        resValue "string", "build_config_package", "com.myapp"
    }
}

Ok, now I can runreact-native run-android --variant=firstappDebug to emulate the app while developing, and latter on release gradlew assembleFirstappRelease and be able to generate multiple (in this case 2) different builds.

But, as im quite a begginer, I couldnt find the proper way to write flavor specific code to be rendered whenever I build for that specific flavor.

In addition, I followed this other guide that more or less shows how to do that, but again, I lack knowledge to proper execute some steps so I failed there. I couldnt figure out in what file should I right the code at STEP 2 and neither what is BuildConfig.FLAVOR, NSBundle.mainBundle(), and at STEP 3 UtilityManager.getTarget(), RNBuildConfig.FLAVOR

In conclusion.. Im still studying hard to grow and Ill look more deeply in environment varibles... but I felt the need to ask the community for help.

Diatom

Answer 1

The workaround I'm using at the time of this post (That's very important) is: Product Flavors (Android) and XCode Schemes (iOS) to build different apps with different names and icons.

To write code for specific Flavor/Scheme, I'm using environment variables. I created multiple .env files with the desired config variables. e.g.

//.env.mycustomenv

LOGIN_TITLE_TEXT= "My App"
LOGIN_STATUSBAR_CONTENT= "light-content"
LOGIN_BACKGROUND_COLOR= "#333"
LOGIN_SIMPLE_TEXT_COLOR= "#FFF"
LOGIN_TEXTINPUT_BACKGROUD_COLOR= "#FFF"
LOGIN_LOGIN_BUTTON_COLOR= "#009933"

To tell RN which .env file to look at im using react-native-config from the command line as simple as $env:ENVFILE=".env.mycustomenv" (On windows using powershell).

react-native-config should work to expose those variables above to your .js files, and it does, but for my experience it didn't work when using product flavors. So I started using react-native-build-config to do that task.. So in the end my code looks something like this:

import BuildConfig from "react-native-build-config"

export function MainStyle () {

  return(
    <>
      <StatusBar barStyle={`${BuildConfig.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={BuildConfig.LOGIN_BACKGROUND_COLOR} />
      <TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
    </>
  )
}

So on and so on...

I hope that this answer helps other devs that find this post looking to find help.

Diatom