Process Push notification in React Native

Tram Ho

Hello, when working with mobile apps, especially social networking apps, shopping … the push notification processing must be familiar and necessary. In this article, I would like to introduce through a library to help handle that job.

1. Introduce react-native-firebase library

This is a library, in my opinion is quite good and stable for dealing with firebase and push notifications.

Config library with project:

  • Installation: I can run the yarn or npm command, here I use npm

  • After running, I need some separate config for Android and IOS, as well as preparing the config on https://console.firebase.google.com/u/0/ to download the config file for both Android platforms and IOS (For android: google-services.json, for ios: GoogleService-Info.plist).

After configuring and installing the library successfully for the project, we begin to learn and use that library.

Refer to the link: https://rnfirebase.io/docs/v4.2.x/messaging/receiving-messages

2. Request permissions and listen for the notification

  • Call to firebase import firebase from 'react-native-firebase'
  • When we want to start sending, receiving and displaying notifications, we must first requestPermissionAndListen with the function:

  • Check to see if there is a right

  • When we want firebase to send notifications, we need to get the token of that machine, we use the getToken function

3. Problems encountered when displaying push notification on Android and IOS

When working with Android and IOS, I noticed there is a difference in the processing of notification display, because it is necessary to handle the notification display while using the app, in addition to the app and in the case of killing the app. (background, foreground, kill app)

On iOS side:

Android side:

Difference:

DifferenceAndroidIOS
Badge and NotificationOnly true for background casesAuto-display for all 3 cases
  • For IOS: Based and the information returned by firebase, will display the corresponding, title, message and badge respectively.

Action

Display

  • For Android side: Can not handle the display of the correct badge returned in all 3 cases (TH kill app and foreground, we have to handle properly from the display to the corresponding badge).

Treatment

Handle the notification display

4. Handling actions with notification

Above are a few introductions about handling push notifications in react native, depending on the version, there is a slight change, so you should read more on the firebase homepage (The current RN version I use in this article is) 0.59).

Share the news now

Source : Viblo