React Native Made Easy: Native Bridge (feat. Scan Kit) Part 2
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.
Join the DZone community and get the full member experience.Join For Free
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.
To get started, you'll need the following:
Basic Android development skills
Basic React Native development skills
These areas have been covered immensely already on RN’s official site, this forum, and other sources
HMS properly configured
You can also reference the above article for this matter
RN Version: 0.62.2 (released on 9th April, 2020)
Gradle Version: 5.6.4
Gradle Plugin Version: 3.6.1
This tutorial is broken into 3 parts:
Pt. 2: Bridging HMS Scan Kit into React Native
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.
Add to buildscript > repositories
Add to buildscript > dependencies
Go to app/build.gradle and add this to header:
Add this to dependencies
Add in proguard-rules.pro
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
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.
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.
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:
There will be several error/reject conditions, let’s identify and declare their code first:
At this moment, the module should look like this:
Now, let’s implement the listener method
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.
Give it some content
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.
Same as before, we’ll add the package to our MainApplication.java, import the Package, and add it in the getPackages() function.
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:
Reload and see the button.
Similar to the one in the warm up, we can declare the Native Module using this simple way:
Now we’ll implement onScan() which uses the async/await syntax for asynchronous coding
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:
Note: one minor modification is needed if you are basing on the branch of this demo project mentioned before.
Now let’s try scan this. The actual data contained in the QR Code is:
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.
Opinions expressed by DZone contributors are their own.