React Native Made Easy Ep. 1 – Native Bridge - Huawei Developers

More articles like this, you can visit HUAWEI Developer Forum
Forum link: https://forums.developer.huawei.com/forumPortal/en/home​
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
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
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 3 parts:
Pt. 1: Create a simple native UI component as intro and warm up
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.
Warm up
Let’s get to it. Before everything, the app looks like this:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Let’s make a simple UI component for warm up! We will add a native android button, which text will change when it is clicked.
First, in our android folder, let us create ReactNativeWarmUpModule.java. For simplicity purpose, you can create this file in the same folder with MainApplication.java
Code:
package com.cfdemo.d001rn;
import android.widget.Button;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
public class ReactNativeWarmUpModule extends SimpleViewManager<Button> {
private static final String REACT_CLASS = "RCTWarmUpView";
private static ReactApplicationContext reactContext;
public ReactNativeWarmUpModule(ReactApplicationContext context) {
reactContext = context;
}
@NonNull
@Override
public String getName() {
return null;
}
@NonNull
@Override
protected Button createViewInstance(@NonNull ThemedReactContext reactContext)
{
return null;
}
}
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
Code:
@NonNull
@Override
protected Button createViewInstance(@NonNull ThemedReactContext reactContext) {
Button button = new Button(reactContext);
button.setOnClickListener(v -> ((Button) v).setText("Button Clicked"));
return button;
}
To make it more interactive with the React Native side, we can give it a ReactProp
Code:
@ReactProp(name = "text")
public void setText(Button button, String text) {
button.setText(text);
}
We are done with ReactNativeWarmUpModule for now, this is how it looks
Code:
package com.cfdemo.d001rn;
import android.widget.Button;
import androidx.annotation.NonNull;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;
public class ReactNativeWarmUpModule extends SimpleViewManager<Button> {
private static final String REACT_CLASS = "RCTWarmUpView";
private static ReactApplicationContext reactContext;
public ReactNativeWarmUpModule(ReactApplicationContext context) {
reactContext = context;
}
@NonNull
@Override
public String getName() {
return REACT_CLASS;
}
@NonNull
@Override
protected Button createViewInstance(@NonNull ThemedReactContext reactContext) {
Button button = new Button(reactContext);
button.setOnClickListener(v -> ((Button) v).setText("Button Clicked"));
return button;
}
@ReactProp(name = "text")
public void setText(Button button, String text) {
button.setText(text);
}
}
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.
Code:
package com.cfdemo.d001rn;
import androidx.annotation.NonNull;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Collections;
import java.util.List;
public class ReactNativeWarmUpPackage implements ReactPackage {
@NonNull
@Override
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
return null;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
Put ReactNativeWarmUpModule into createViewManagers
Code:
package com.cfdemo.d001rn;
import androidx.annotation.NonNull;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.Arrays;
import java.util.List;
public class ReactNativeWarmUpPackage implements ReactPackage {
@NonNull
@Override
public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
return Collections.emptyList();;
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new ReactNativeWarmUpModule(reactContext)
);
}
}
Since we will not register any other Native Modules for now, let's also give it an empty list
Code:
Collections.emptyList();
Next, we’ll add the package to our MainApplication.java, import the Package, and add it in the getPackages() function
Code:
import com.cfdemo.d001rn.ReactNativeWarmUpPackage;
…
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
packages.add(new ReactNativeWarmUpPackage());
return packages;
}
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
Code:
const RNWarmUpView = requireNativeComponent('RCTWarmUpView')
In the sample project it looks like this
Code:
//…
import { RNRemoteMessage } from 'react-native-hwpush';
import { getLastLocation, parseLocation, getLocationPermission } from '../../Helpers/LocationHelper'
import * as R from 'ramda'
const RNWarmUpView = requireNativeComponent('RCTWarmUpView')
export default class App extends Component {
constructor(props) {
//…
Then we render it
Code:
render() {
const { displayText, region } = this.state
return (
<View style={styles.container}>
<Text style={styles.textBox}>
{displayText}
</Text>
<RNWarmUpView style={styles.nativeModule}/>
<MapView
style={styles.map}
region={region}
showCompass={true}
showsUserLocation={true}
showsMyLocationButton={true}
>
</MapView>
</View>
);
}
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
Code:
<RNWarmUpView
style={styles.nativeModule}
text={"Render in Javascript"}
/>
Reload and it'd looks like this　　
Click on the button:
And we have finished the warm up!
Pt. 1 of the 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.