Beta Testing React Native Android Applications with Crashlytics

How to correctly setup Beta Testing for your React Native Android application using Fabric/Crashlytics

For the past couple weeks I’ve been diving head first into the development of a React Native Android application. The application is meant to support early Android versions like Jelly Bean and KitKat, as well as newer SDKs like Marshmallow and Nougat. Given the nature of Android development and the various vendors involved in the ecosystem, it was essential that we tested the application on multiple devices, with multiple users, in multiple environments and networks. Not only that, but the application is actually meant to be deployed to both Phones and Tablets, in both portrait and landscape modes, which only adds to the complexity of this testing task.

I am not a fan of excessively long blog posts so let’s just jump straight into it!

Fabric & Crashlytics

Crashlytics is a crash reporting tool that was acquired by Twitter in late 2013, and later sold to Google under the Fabric umbrella of developer tools. One of its new and highly anticipated features is the Beta Testing system. To get setup with the Crashlytics Beta Testing you will need 3 things: fabric.io account, signature certificate for your apps' APK file, some code in some files.

If you don’t have a fabric.io account, hop on to https://fabric.io and get yourself one.

fabric.io — https://fabric.io

After you create your account, create your Organization and grab your API keys. They should look like this:

Fake Screenshot of Fabric.io Organization API — https://fabric.io

You will need to save both the API Key and the API Secret key (Build Secret) for later use.

Application Signature Certificate

Android requires that all applications be digitally signed with a certificate before they can be installed, so to distribute your Android applications to Crashlytics (or to Google Play store), you’ll need to generate signed APK release files.

The process of signing a React Native Android application is rather simple and straightforward, but if you would like to learn more, here’s the Android Developers documentation on it.

To generate a signed key certificate you must use the keytool utility.

$ keytool -genkey -v -keystore signed-release-key.keystore -alias signed-key-alias -keyalg RSA -keysize 2048 -validity 10000

The signed-release-key keystore is your applications' certificate keystore. It contains a single key, which is valid for 10000 days. The signed-key-alias alias is a name that you will use later when signing your app — make sure to take note of it (both of these items can be renamed to any other string).

The created signed-release-key.keystore file should be placed inside of the android/app folder. Remember to add it to .gitignore to avoid pushing your key. After that, edit gradle.properties file inside the android directory and add the following lines to the bottom of the file:

MYAPP_RELEASE_STORE_FILE=signed-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=signed-key-alias
MYAPP_RELEASE_STORE_PASSWORD=***********
MYAPP_RELEASE_KEY_PASSWORD=***********

Since these are global gradle variables, we can use them inside of our application. Inside android/app/build.gradle add the following lines to sign your application with the newly created signed-release-key certificate.

android {
...
defaultConfig { ... }
signingConfigs {
release {
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}

Your application is now signed. If you would like to create a Signed Release APK file, inside the android folder, run ./gradlew assembleRelease.

Crashlytics SDK

Now that we've got a signed APK file, we need to add our Crashlytics SDK to the build system and create a quick command to run it.

First add the code below to your build.gradle file inside android/app :

buildscript {
repositories {
maven { url 'https://maven.fabric.io/public' }
}
dependencies {
classpath 'io.fabric.tools:gradle:1.22.1'
}
}
apply plugin: 'io.fabric'
repositories {
maven { url 'https://maven.fabric.io/public' }
}
dependencies {
...
compile('com.crashlytics.sdk.android:crashlytics:2.6.7@aar') {
transitive = true
}
}

The snippet above is adding the Crashlytics SDK to your gradle build script dependencies. And subsequently, add the following lines to your MainApplication.java inside of android/app/src/main/java/com/APP_NAME/ :

import com.crashlytics.android.Crashlytics;
import io.fabric.sdk.android.Fabric;
...
public void onCreate() {
...
Fabric.with(this, new Crashlytics());
...
}

Something like this:

Commit Diff

The snippet above is importing the Fabric and Crashlytics libraries and invoking a new Crashlytics instance inside your application's onCreate method.

Last but not least, we need to use those Fabric API keys that we generated in the beginning of the post. We will place both of the keys inside of a fabric.properties file which should also be placed inside android/app folder. The file should be as follow:

apiSecret=7ag1h57ag25h5j55725nm028n398s7f8s7d8s7d7wy2b2j2b
apiKey=911u4b175n2643bz8a72b459262bn2k1732g

Of course, these are fake keys. Once you save this file, do remember to add it to .gitignore to prevent pushing your API keys.

And that should be enough! You should now be able to go into your android subdirectory and run ./gradlew assembleRelease crashlyticsUploadDistributionRelease. This will tell gradle to run the regular build system for the application, and when done, sign the application with the release flag and upload it to Crashlytics using the API keys provided. You could also create a quick npm script that can allow you to more easily deploy latest builds to Crashlytics.

"deploy-crashlytics": "cd android && ./gradlew assembleRelease crashlyticsUploadDistributionRelease"

If successful, you should see something like this on your packager output:

React Native/Gradle Android packager screenshot

Once completed, you should receive an email similar to the one below explaining that your application has been added to Fabric.

New application added to Fabric — Email Screenshot

Beta Testing

At this time you should see your application on the your Fabric Dashboard Sidebar Menu. Make sure the correct application is selected from the dropdown and choose the Beta option to enroll in the Beta Testing system.

Fabric.io Sidebar — https://fabric.io

In the center of the page, you should now be able to see your latest release to Crashlytics. Something along the lines of:

Screenshot Crashlytics Beta — https://fabric.io

In order to add Testers to your application, just click the Add Testers button and invite your Beta users. You should be able to invite users individually or altogether inside of a group.

Invite Tester Dropdown — https://fabric.io

That is all! Your beta testing users should now receive an email inviting them to test your application. They will need to accept the Crashlytics terms and follow the simple process of installation. Whenever there is a new build out, you can simply send the group another invitation and they'll be two taps away from testing the new version of your application.

Crashlytics (and Fabric as a whole) is a really powerful set of tools that allows for a better DX (Developer Experience) while testing, logging, reporting and beta testing an application. It has enabled the thorough testing of this React Native Android application and it has been a seamless experience from the beginning.

If you'd like to use other Fabric tools (e.g. Answers and Crashlytics Crash Reporting), and have more control over logs and reports inside Fabric dashboard, you may want to leverage the community-maintained React Native Fabric package.

Cheers,

— AN