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..
- 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: 18.104.22.1681
This tutorial is broken into three parts:
- Create a simple native UI component as intro and warm up
- Bridging HMS Scan Kit into React Native
- Make Scan Kit into a stand alone React Native Module that you can import into other projects or even upload to npm.
Let’s get to it. Before everything, the app looks like this:
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:
Now, we set the ReactProp we gave it earlier
Reload, and it’d looks like this:
Click on the button:
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!