In order for my application to be approved and visible on both of Google PlayStore and Huawei App Gallery, I am currently maintaining two different branches:
Google branch which has react-native-maps installed but no HMS packages.
Huawei branch which has HMS maps installed but not react-native-maps.
I'm aware of the HMS+GMS approach, but from my experience having a module like react-native-maps that relies heavily on GMS made my app hidden from pure HMS devices, even though my app had ways to check and never navigate to screens that rely on GMS.
Both branches have the same code on the JavaScript side except one file which is used to display the map, this file imports from react-native-maps on GMS phones, and from react-native-hms-map for Huawei phones.
My question is: is there a way to dynamically exclude some files and packages in build time based on the product flavor so that I can use one codebase and just ignore some file when building the APK.
Solution: Managed to come up with a solution that got my app approved and fully visible on app stores through disabling auto linking for react native maps and manually linking it based on the product flavor. (Code might not be the cleanest but it's behaving as expected, so any cleanup suggestions would be appreciated)
Steps:
1. Disable manual linking for react-native-maps on android
By creating a file named react-native.config.js in the root directory of the project, and added the following
module.exports = {
dependencies: {
"react-native-maps": {
platforms: {
android: null,
}
}
}
}
2. Added product flavors for Google and Huawei
By adding the following to android/app/build.gradle
...
...
android{
...
...
flavorDimensions "provider"
productFlavors {
google {
dimension "provider"
}
huawei {
dimension "provider"
}
}
...
...
}
...
...
3. Added the following to the same android/app/build.gradle file
...
...
dependencies {
...
...
huaweiImplementation 'com.huawei.hms:location:4.0.2.300'
huaweiImplementation 'com.huawei.hms:hwid:4.0.1.300'
googleImplementation project(':react-native-maps')
...
...
}
...
...
4. Added the following into android/settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
5. Created 2 folders inside android/app/src
folders named: huawei and google with the following structure
6. added a java file inside android/app/src/google/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return new MapsPackage();
}
}
7. added a java file inside android/app/src/huawei/java/com/appname
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return null;
}
}
8. added the following to android/app/src/main/java/com/appname/MainApplication.java
import static com.appname.MapPackageChecker.getMapPackage;
...
...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//start of new lines
if(BuildConfig.FLAVOR.equals("google")){
packages.add(getMapPackage());
}
//end of new lines
return packages;
}
...
...
9. Access flavor name from react native code
I decided to use react-native-build-config for this purpose
Example for navigation component:
import googleMapScreen from "./googleMapScreen.js"; //relies on gms maps
import huaweiMapScreen from "./huaweiMapScreen.js"; //relies on hms maps
import BuildConfig from 'react-native-build-config';
const flavor = BuildConfig.FLAVOR
...
...
<Stack.Screen
name="MapScreen"
component={flavor === "huawei" ? huaweiMapScreen : googleMapScreen}
/>
...
...
10. After adding product flavors, we need to make some changes to our commands
yarn react-native run-android
becomes: yarn react-native run-android --variant=huaweiDebug
or: yarn react-native run-android --variant=googleDebug
./gradlew assembleRelease
becomes: ./gradlew assembleHuaweiRelease
or: ./gradlew assembleGoogleRelease
11. For convenience we can add the following to package.json scripts
"scripts":{
"run-huawei": "yarn react-native run-android --variant=huaweiDebug",
"run-google": "yarn react-native run-android --variant=googleDebug",
}
