{{announcement.body}}
{{announcement.title}}

React Native Made Easy: Native Bridge (feat. Scan Kit) Part 2

DZone 's Guide to

React Native Made Easy: Native Bridge (feat. Scan Kit) Part 2

This article will walk you through how to create an Android native bridge to connect your React Native app with HMS Kits.

· Web Dev Zone ·
Free Resource

Introduction

React Native is a convenient tool for cross platform development, and though it has become more and more powerful through the updates, there are limits to it, for example its capability to interact with and using the native components. Bridging native code with Javascript is one of the most popular and effective ways to solve the problem. Best of both worlds!

Currently not all HMS Kits has official RN support yet, this article will walk you through how to create android native bridge to connect your RN app with HMS Kits, and Scan Kit will be used as an example here.

The tutorial is based on https://github.com/clementf-hw/rn_integration_demo/tree/4b2262aa2110041f80cb41ebd7caa1590a48528a, you can find more details about the sample project in this article: https://forums.developer.huawei.com/forumPortal/en/topicview?tid=0201230857831870061&fid=0101187876626530001.

Prerequisites

To get started, you'll need the following: 

  1. Basic Android development skills

  2. Basic React Native development skills

    1. These areas have been covered immensely already on RN’s official site, this forum, and other sources

  3. HMS properly configured

    1. You can also reference the above article for this matter

  4. Major dependencies

    1. RN Version: 0.62.2 (released on 9th April, 2020)

    2. Gradle Version: 5.6.4

    3. Gradle Plugin Version: 3.6.1

    4. agcp: 1.2.1.301

This tutorial is broken into 3 parts:

  1. Pt. 1: Create a simple native UI component as intro and warm up

  2. Pt. 2: Bridging HMS Scan Kit into React Native

  3. Pt. 3: Make Scan Kit into a stand alone React Native Module that you can import into other projects or even upload to npm.

Bridging HMS Scan Kit

Now we have some fundamental knowledge on how to bridge, let’s bridge something meaningful. We will bridge the Scan Kit Default View as a QR Code Scanner, and also learn how to communicate from Native side to React Native side.

First, we’ll have to configure the project following the guide to set Scan Kit up on the native side: https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/scan-preparation-4 

Put agconnect-service.json in place. Then, add to allprojects > repositories in root level build.gradle.

Groovy


Add to buildscript > repositories

Groovy


Add to buildscript > dependencies

Groovy


Go to app/build.gradle and add this to header:

Groovy


Add this to dependencies

Groovy


Add in proguard-rules.pro

Plain Text


Now, do a gradle sync. Also you can try to build and run the app to see if everything’s okay even though we have not done any actual development yet.

Add these to AndroidManifest.xml

XML


So, the basic setup/configuration is done. Similar to the warm up, we will create a Module file first. Note that for the sake of variance and wider adaptability of the end product, this time we’ll make it a plain Native Module instead of Native UI Component.

Java


We have seen how data flows from RN to native in the warm up (e.g. @ReactProp of our button). There are also several ways for data to flow from native to RN. In Scan Kit, it utilizes startActivityForResult; therefore, we need to implement its subsequent listeners.

Java


There are couple small details we’ll need to add. First, React Native javascript side expects a Promise from the result.

Java


We also need to add a request code to identify that this is our scan kit activity. 567 here is just an example, the value is of your own discretion:

Java


There will be several error/reject conditions, let’s identify and declare their code first:

Java


At this moment, the module should look like this:

Java


Now, let’s implement the listener method

Java


Let’s walk through what this does

  • When the listener receives an activity result, it checks if this is our request by checking the request code.

  • Afterwards, it checks if the promise object is null. We will cover the promise object later, but briefly speaking this is passed from RN to native, and we rely on it to send the data back to RN.

  • Then, if the result is a CANCELED situation, we tell RN that the scanner is canceled, for example closed by user, by calling promise.reject()

  • If the result indicates OK, we’ll get the data by calling getParcelableExtra()

  • Now we’ll see if the resulting data matches our data type and is not empty, and then we’ll call promise.resolve()

  • Otherwise we will resolve a general rejection message. Of course here you can expand and give a more detailed breakdown and resolution if you wish

  • This is a lot of checking and validation, but one can never be too safe, right?

Cool, now we have finished the listener, let’s work on the caller! This is the method we’ll be calling in RN side, indicated by the @ReactMethod annotation.

Java


Give it some content

Java


Let’s do a walk through again

  • First we get the current activity reference and check if it is valid

  • Then we take the input promise and assign it to mScannerPromise which we declared earlier, so we can refer and use it throughout the process

  • Now we call the Scan Kit! This part is same as a normal android implementation.

  • Of course we wrap it with a try-catch for safety purposes

At this point we have finished the Module, same as the warm up we’ll need to create a Package. This time it is a Native Module therefore we register it in createNativeModules() and also give createViewManagers() an empty list.

Java


Same as before, we’ll add the package to our MainApplication.java, import the Package, and add it in the getPackages() function.

Java


All set! Let’s head back to the RN side. This is our app from the warm up exercise(with a bit style change for the things we are going to add).

Let’s add a Button and set its onPress property as this.onScan(), which we’ll implement after this:

JavaScript

Reload and see the button.

Similar to the one in the warm up, we can declare the Native Module using this simple way:

JavaScript

Now we’ll implement onScan() which uses the async/await syntax for asynchronous coding

JavaScript


Important! Scan Kit requires CAMERA and READ_EXTERNAL_STORAGE permissions to function, make sure you have handled this beforehand. One of the recommended way to handle it is to use react-native-permissions library https://github.com/react-native-community/react-native-permissions. I will make another article regarding this topic, but for now you can refer to https://github.com/clementf-hw/rn_integration_demo if you are in need.

Now we click…TADA!

In this demo, this is what onScan() contains:

JavaScript


Note: one minor modification is needed if you are basing on the branch of this demo project mentioned before.

JavaScript


Now let’s try scan this. The actual data contained in the QR Code is:

JSON

Which bring us to Auckland! Now, your HMS Scan Kit in React Native is up and running!

Pt. 2 of this tutorial is done, please feel free to ask questions. You can also check out the repo of the sample project on github: https://github.com/clementf-hw/rn_integration_demo, and raise issue if you have any question or any update.

In the 3rd and final part of this tutorial, we'll go through how to make this RN HMS Scan Kit Bridge a standalone, downloadable and importable React Native Module, which you can use in multiple projects instead of creating the Native Module one by one, and you can even upload it to NPM to share with other fellow developers.

Topics:
integration, java, native bridge, open source, react native

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}