How to use React Native Push Plugin? - Huawei Developers

Introduction
Mobile push notifications are notification messages sent by a server to mobile application users. Implementing push notifications has many benefits, such as improving user engagement by informing users about new special offers, products and services, increasing app retention rates of inactive users, tracking user behavior with A/B tests, and more.
Huawei push plugin for React Native enables developers to use Android HMS push kit in React Native applications. The publishers can push the notifications by using Huawei developer console or posting HTTP requests to Huawei push kit, which will send the notifications to the app users accordingly. The diagram below depicts the workflow of Huawei push kit.
{
"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"
}
Push Plugin Workflow
In this article, I’ll illustrate how to create your project in the Huawei developer console, integrate the plugin, and use it.
Creating Your Project in Huawei Developer Console
Registering a Huawei ID
You need to register a Huawei ID to use the plugin. If you don’t have one, follow the instructions here.
Creating a Huawei App
To create a Huawei App, visit the developer console and authenticate your Huawei ID. Follow the instructions in this tutorial to create an application.
Generating a Signing Certificate Fingerprint
Signing certificate fingerprint is required to authenticate your app to Huawei mobile services. Make sure JDK is installed. To create one, go to JDK directory’s bin folder and open a terminal in this directory. Execute the following command:
Code:
keytool -genkey -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks -storepass <store_password> -alias <alias> -keypass <key_password> -keysize 2048 -keyalg RSA -validity 36500
This command creates the keystore file in application_project_dir/android/app with the configurations you’ve typed in <…>.
Adding SHA256 Key to the Huawei Project in App Gallery
The next step is obtaining the SHA256, which is needed for authenticating your app to Huawei services, for the keystore file. To obtain it, type the following command in terminal:
Code:
keytool -list -v -keystore <application_project_dir>\android\app\<signing_certificate_fingerprint_filename>.jks
After an authentication, the SHA256 key will be revealed as shown below:
Copy the SHA256 key and visit Huawei developer console/<your_push_kit_project>/General Information. Paste it to the field SHA-256 certificate fingerprint, set the data storage location to Germany.
Finally, enable the push kit from Project Setting/Manage APIs.
You’ve completed configuring your React Native application in App gallery. In the further steps, I’ll explain how to integrate the plugin to your React Native application.
Integrating the Plugin
To integrate the plugin open a terminal in your project directory and type the following command:
Code:
npm i @hmscore/react-native-hwpush
After the command is executed, the file tree is supposed to be in the following way:
Code:
projectdir
|_ node_modules
|_ ...
|_ @hmscore
|_react-native-hwpush
|_ ...
|_ ...
Then, download the agconnect-services.json file from your push kit project in app gallery from the General Information tab. Place the file in android/app directory in your React Native project
Go to android/app/build.gradle directory in your React Native project. Follow the steps below:
Add the AppGallery Connect plug-in dependency show below to the file header.
Code:
apply plugin: 'com.huawei.agconnect'
In android/defaultConfig node, set the value of the field applicationId as the package name you entered in the AppGallery and set minSdkVersion to 19 or higher.
Code:
defaultConfig {
applicationId <package_name_of_the_project_in_app_gallery>
minSdkVersion 19
...
}
In android/signingConfigs/config node, enter the keystore file credentials.
Code:
signingConfigs {
config {
storeFile file(<keystore_file_name>)
storePassword ‘<store_password>’
keyAlias ‘<alias>’
keyPassword ‘<key_password>’
}
}
Go to android/build.gradle directory in your React Native project. Follow the steps below:
Add maven {url ‘https://developer.huawei.com/repo/'} to buildscript/repositories and allprojects/repositories.
Add classpath ‘com.huawei.agconnect:agcp:1.2.1.301’ to buildscript/dependencies.
The file content should look like as below.
Code:
buildscript{
repositories{
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
dependencies{
classpath 'com.huawei.agconnect:agcp:1.2.1.301'
}
}
allprojects{
repositories{
google()
jcenter()
maven {url 'https://developer.huawei.com/repo/'}
}
}
Go to android/settings.gradle and add the following:
Code:
include ‘:react-native-hwpush’
project(‘:react-native-hwpush’).projectDir = new File(rootProject.projectDir, ‘../node_modules/@hmscore/react-native-hwpush/android’)
You’ve integrated the plugin to your app. In the next section, I’ll explain how to use the plugin.
Using the Plugin
Obtaining a Token
In order to push notifications to a device, you need to obtain a token which is a unique identifier for your test device for push notifications. To get the token, use getToken method of the RNHmsInstanceId module.
Code:
import {NativeModules} from 'react-native'
NativeModules.RNHmsInstanceId.getToken((result, token) => {
console.log(JSON.stringify(token));
});