Sending Push Notifications on React Native With Huawei Push Kit Plugin — Part 2

Please check out the previous article, before you start.

Sending Push Notifications on React Native With Huawei Push Kit Plugin — Part 1

Introduction

In the first part, we talked about how to send push notification. In this part we will send data message when application in background and killed state. Then we will push a local notification with data message information!

Sending a Data Message ✋

1. You can set the content of a data message using the Custom parameter type parameter, whose options are Key-value pair and Custom parameter.

• Key-value pair: The value adopts the key-value format. Multiple key-value pairs can be added.

• Custom parameter: The value can contain a maximum of 1024 bytes, in string or JSON object format.

We need to configure react native part for data message!

import {HmsLocalNotification, HmsPushEvent} from '@hmscore/react-native-hms-push';

• First we will register onRemoteMessageReceived listener to get data message in foreground.
• In Push kit plugin, data messages don’t appear like a notification. That’s the reason we are using HmsLocalNotification module to display it.

The notification appears successfully after all settings are done. Huawei Push Kit Plugin can send data message when application on killed state. Lets write some more code to get message on killed state💪

First we need to add “WAKE_LOCK” permission to AndroidManifest.xml file.

You can find the AndroidManifest.xml file under the android -> app -> src

<uses-permission android:name="android.permission.WAKE_LOCK" />

The next step is adding setBackgroundMessageHandler to index.js

Conclusion

In this article, we have learnt how to send data message with Huawei Push Kit Plugin in React Native.

For more details, you can visit our developer page.

References

About The Service

HMS-Core/hms-react-native-plugin