React Native App : White Label 102

Part 2: Android

Sean Najera
Sep 11 · 8 min read

In React Native App : White Label 101, we leveraged the power of iOS targets & the React Native Bridge to not only setup our White Label logic, but to also build our White Label apps. We will use the same approach with Android product flavors. But first…

The React Native Bridge

Open Android Studio and select Open an existing Android Studio project. In Finder, navigate to the WhiteLabelDemo > android folder, select it, and click Open.

Once all files have been synced and indexed, open the Project pane and switch from the default Android view to the Project view. This will help us see all of the different files we are about to create/modify.

We’re going to now create the WhiteLabelConfig.java file. In the Project window, expand the app directory navigate to app > src > main > java > com.whitelabeldemo. Right click on the com.whitelabeldemo package and select New > Java Class

In the Name: field, type WhiteLabelConfig and click OK.

In the newly created file, copy and paste the following contents

We will next create the React Package for our WhiteLabelConfig.java file. Right click on the com.whitelabeldemo package and select New > Java Class. Name the new class WhiteLabelConfigPackage. Open the newly created class in the editor and paste the following contents into it

Lastly, add the new WhiteLabelConfigPackage.java to the the list of packages in the MainApplication.getPackages() method. Open the MainApplication.java file in com.whitelabeldemo and add the following line of code that is in bold

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// ADD THIS LINE
packages.add(new WhiteLabelConfigPackage());
return packages;
}

Now start up an Android emulator by going to Tools > AVD Manager in the main menu. Choose an existing Android device and click the green run button (If there are no devices, click + Create Virtual Device.)

Finally, run the app via the command line

react-native run-android

The Android emulator should run the WhiteLabelDemo app just like on iOS

Android Product Flavors (tastes like efficiency 😋)

We have our React Native Bridge, now we need to setup our product flavors to create different white-labelled Android apps.

In the Project pane, expand the app directory and double click build.gradle to open in the editor.

Unlike Xcode, Android Studio uses Gradle scripting with a built-in Gradle plugin/library provided by Google called the Android Gradle Plugin to build, test, clean (etc.) your app. This build.gradle file is the configuration file used by the Android Gradle Plugin to build your app.

We are going to add these lines of code to our build.gradle file in the android { ... } closure (at the same level as the buildTypes).

android {  ...
...

buildTypes {
...
}
flavorDimensions "whitelabel"
productFlavors {
purpleParrots {
dimension "whitelabel"
applicationIdSuffix ".purpleparrots"
resValue "string", "white_label_app_name", "Purple Parrots"
}
}
// applicationVariants are e.g. debug, release
applicationVariants.all { ... }

This tells the Android Studio Plugin that we have have a new build configuration that can create a new app with a different app id & app name. After adding these lines click Sync Now in the top banner to update the project.

After the sync is completed, make sure in the Build Variants window that the Active Build Variant is purpleParrotsDebug

We need to create a new source set for our product flavor specific files, similar to groups in Xcode. Right click on app > src folder in the Project window and select New > Directory and name it purpleParrots.

Right click on the purpleParrots folder in the Project window and select New > Directory and name it java. Right click on the new java folder in the Project window and select New > Package and name it com. Right click on the new com package in the Project window and select New > Package and name it whitelabeldemo. Your project folder structure should now look like this

Now select and hold WhiteLabelConfig.java with the cursor and drag it to the purpleParrots > java > com.whitelabeldemo package. You will get a pop window, leave the defaults as they are and click Refactor. You should now have this project structure

Now update the WhiteLabelConfig.java file with the following contents

Then, update the labels in theAndroidManifest.xml file with the following lines in bold

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.whitelabeldemo">

<uses-permission android:name="android.permission.INTERNET" />

<application
android:name=".MainApplication"
android:label="@string/white_label_app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/white_label_app_name"
... </activity> ... </application>

</manifest>

Lastly we’re going to make a new icon for the Purple Parrots app. Right click on the purpleParrots folder in the Project window and select New > Directory and name it res.

We’re going to use the same icon as we used in iOS

After saving the image above, right click on the folder res. Select New > Image Asset.

The Asset Studio window will appear. In the Path: field, click the folder icon. This will bring up Finder. In Finder, navigate to where you saved the image and click open. You will then see that image in the preview window as your icon. If you wish, you can use the Resize: tool to size down the image to 67% (that worked best for this image on my machine). Once you’re satisfied, click Next.

When the Confirm Icon Path window appears, select the Res Directory: purpleParrots then click Finish

Ok, lets start’er up

react-native run-android --variant "purpleParrotsDebug" --appIdSuffix "purpleparrots"

Very Nice! What say we do it again…

New Product Flavor

We’re hitting the home stretch. Our last product flavor will be Green Monkeys to match our iOS implementation.

We are going to add these lines of code to our build.gradle file in the productFlavors { ... } closure. This is telling the Android Gradle Plugin that we have a new product flavor we want to setup. After you update the build.gradle file, click Sync Now at the top.

android {...
...

buildTypes {
...
}
flavorDimensions "whitelabel"
productFlavors {
purpleParrots {
dimension "whitelabel"
applicationIdSuffix ".purpleparrots"
resValue "string", "white_label_app_name", "Purple Parrots"
}
greenMonkeys {
dimension "whitelabel"
applicationIdSuffix ".greenmonkeys"
resValue "string", "white_label_app_name", "Green Monkeys"
}

}
// applicationVariants are e.g. debug, release
applicationVariants.all { ... }

After the sync finishes, go to the Build Variants window and select the Active Build Variant to be greenMonkeysDebug

We need to create the source set for our product flavor greenMonkeys, just as we did before. Right click on app > src folder in the Project window and select New > Directory and name it greenMonkeys.

Right click on new greenMonkeys folder in the Project window and select New > Directory and name it java. Right click on the new java folder in the Project window and select New > Package and name it com. Right click on the new com package in the Project window and select New > Package and name it whitelabeldemo.

Select the WhiteLabelConfig.java file and copy it with cmd(⌘) + c. Paste it, with cmd(⌘) + v, into the com.whitelabeldemo package. Accept the defaults and click OK. You folder structure should now look like this

Now update the greenMonkeys WhiteLabelConfig.java file with the following

Lastly we’re going to make the new icon for the Green Monkeys app. Right click on the greenMonkeys folder in the Project window and select New > Directory and name it res. Then use the Green Monkeys icon below as we did on iOS

After saving the image above, right click on the folder res. Select New > Image Asset. When the Asset Studio appears, in the Path: field, select the folder icon. This will bring up Finder. In Finder, navigate to where you saved the image and click open. If you wish, you can use the Resize: tool to size down the image to 67% (that worked best for this image on my local machine). Once you’re satisfied, click Next.

When the Confirm Icon Path window appears, select the Res Directory: greenMonkeys then click Finish

Let’s start it up (are you as EXCITED as I am!?)

react-native run-android --variant "greenMonkeysDebug" --appIdSuffix "greenmonkeys"

Conclusion

We did it! A React Native project with white label logic that scales, is automated, configurable, extensible, and works on both platforms. A couple of after thoughts for future work include

  • Can we validate the contract WhiteLableConfig on iOS & Android (maybe even TypeScript)??????
  • Can we white label complete user features of the React Native app?
  • Can we reduce code duplication?

Perhaps we will go over this next time in React Native White Label 201.

And as always, you can grab the project on GitHub if you’d like to customize it to your hearts content.

Sean Najera

Written by

Mobile Engineer: Bridging the gap between iOS & Android

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade