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 

  • Basic Android development.
  • Basic React Native development.
  • HMS properly configured You can also reference the above article for this matter 
  • Major dependencies 
    • RN Version: 0.62.2 (released on 9th April, 2020) 
    • Gradle Version: 5.6.4 
    • Gradle Plugin Version: 3.6.1 
    • agcp: 1.2.1.301 

This tutorial is broken into three parts: 

  1. Create a simple native UI component as intro and warm up 
  2. Bridging HMS Scan Kit into React Native 
  3. Make Scan Kit into a stand alone React Native Module that you can import into other projects or even upload to npm

Warm Up 

Let’s get to it. Before everything, the app looks like this:

Example app

Let’s make a simple UI component for warm up! We will add a native Android button whose text will change when it is clicked.

First, in our Android folder, let us create ReactNativeWarmUpModule.java. For simplicity, you can create this file in the same folder with MainApplication.java

This part would be easier to do on Android Studio due to auto import feature. For the name (the REACT_CLASS) of the module, it’s mostly up to you. RCT is an abbreviation of ReaCT and is a popular prefix 

Modify createViewInstance to do something

To make it more interactive with the React Native side, we can give it a ReactProp

We are done with ReactNativeWarmUpModule for now. This is how it looks:

Now, to register the ViewManager, we’ll have to create a ReactPackage. You can put it in different places, but also for simplicity, you can put it in the same folder with ReactNativeWarmUpModule.

Put ReactNativeWarmUpModule into createViewManagers

Since we will not register any other Native Modules for now, let’s also give it an empty list

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

At this point, our native UI component is ready! So, how do we actually use it in React Native? There are a couple ways to invoke it, the simplest way would be to add this in the file where you want it to be  

In the sample project it looks like this:

Then we render it

Now, the app looks like this. You can see the big grey area, which is actually our button here:  

Current state of app

Now, we set the ReactProp we gave it earlier

Reload, and it’d looks like this:

Current state of app

Click on the button:    

Button clicked

And we have finished the warm up!

Part one of the tutorial is done. Llease 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 an issue if you have any questions or updates.

Stay tuned for part two: Bridging HMS Scan Kit into React Native!



Source link

Write A Comment