React-native-push-notification: Notification popup not showing when app at background - Android

[Gabsys]

Bug

Remote notification doesn't pop up on Android when app is in background. I did receive the notification at onNotification though.
Side note: Notification pop up was working back in version 3.2.1. At that time, both notifications from firebase console and my own api will trigger onNotification and show popup. However with the current version, using firebase console will show the notification in notification tray but doesn't popup nor trigger onNotification while using my api will trigger onNotification but does not show popup.

Environment info

react-native info output:

System:
    OS: macOS Mojave 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
    Memory: 39.16 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 13.7.0 - /usr/local/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 6.14.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      Android NDK: 20.0.5594570
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    @react-native-community/cli: ^2.9.0 => 2.10.0 
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1

Library version: 3.4.0

Steps To Reproduce

1. Install & setup react-native-push-notification
2. Use Firebase console to send test message = Notification popup showed but onNotification not triggered
3. Use own api to send notification = Notification popup not showed but onNotification triggered

Describe what you expected to happen:

1. Notification pop up when app is in background/exit

Reproducible sample code

1. npm i --save [email protected]
2. Set up androidmanifest.xml and gradle file as per instruction
3. Set up code as follow:

PushNotification.configure({

            onRegister: function (token) {
              console.log("TOKEN:", token);
            },

            // (required) Called when a remote or local notification is opened or received
            onNotification: function(notification) {
              console.log("NOTIFICATION:", notification);
              // process the notification here

              // required on iOS only 
              notification.finish(PushNotificationIOS.FetchResult.NoData);
            },
            // Android only
            senderID: "XXXXXX", //This is hidden to protect my own project 
            // iOS only
            permissions: {
              alert: true,
              badge: true,
              sound: true
            },
            popInitialNotification: true,
            requestPermissions: true
          })

[Dallas62]

Hi @Gabsys
Make sure you are on the latest version,
Also note this issue might be related to the version 3.2.1, the default channel is set to a wrong priority.
Two solutions:

• App has not been released with version 3.2.1: reinstall the application on the test device.
• App has been released with version 3.2.1: release a version by overriding the default channel in AndroidManifest, other issues already exist with the fix.

[Gabsys]

Oh wait.. do I have to create a notification channel somewhere ?

Edit:
Did some googling. Anyone knows how to create notification channel with v6 firebase? @@ All tutorials are for v5 firebase :(

[Dallas62]

https://github.com/zo0r/react-native-push-notification/issues/1395

[Gabsys]

1395

With the addition of meta-data, notification from Firebase Console can pop up (previously only added to notification tray), but not notification sent from my server-side. Is it that I have to configure some sort of channel at my server and AndroidManifest.xml ?

[Dallas62]

Did you tried the example project ? Maybe a wrong implementation of PushNotification.configure (must be outside of a component).

[Gabsys]

Yea I did, it didn't work. It shouldn't be implementation issue right? Because back in v3.2.1, everything was working fine with my current implementation

Basically if I send notification from firebase console:

• Notification pop up showed
• onNotification is not triggered

If I send notification from my server:

• Notification pop up doesn't show
• onNotification triggered

Edit:
Both type of notification did trigger messaging().setBackgroundMessageHandler() though

[Dallas62]

I tried both 3.4.0 and 3.2.1, I observe exactly the same behaviour with example project.
Can you provide a full example of your implementation ?
What do you send from your server (with fake data if you prefer) ?
Do you confirm all your test is with an Application in killed state ?

[Gabsys]

As of below is my implementation in notification_handler.js

import PushNotification from 'react-native-push-notification';

class NotificationHandler {
  onNotification(notification) {
    console.log('NotificationHandler:', notification);

  }

  onRegister(token) {
    console.log('NotificationHandler:', token);
  }

}

const handler = new NotificationHandler();

PushNotification.configure({
  // (optional) Called when Token is generated (iOS and Android)
  onRegister: handler.onRegister.bind(handler),

  // (required) Called when a remote or local notification is opened or received
  onNotification: handler.onNotification.bind(handler),

  // IOS ONLY (optional): default: all - Permissions to register.
  permissions: {
    alert: true,
    badge: true,
    sound: true,
  },

  // Should the initial notification be popped automatically
  // default: true
  popInitialNotification: true,

  /**
   * (optional) default: true
   * - Specified if permissions (ios) and token (android and ios) will requested or not,
   * - if not, you must call PushNotificationsHandler.requestPermissions() later
   */
  requestPermissions: true,
});

export default handler;

This is the log of what I receive from the notification sent from my server:
NotificationHandler: {"data": {"message": "Someone sent you a message!", "notificationId": "5ea93b354129775d0f815b57", "notificationType": "MSG_ADD", "title": "MyApp"}, "finish": [Function finish], "foreground": false, "id": "1483530077", "userInteraction": false}

And yes, I tried both with killed state & background state, both show same behaviour where onNotification is triggered but no notification popup showed

[Dallas62]

And what is the message send from server-side:

{
 "to" : "...",
 "collapse_key" : "type_a",
 "notification" : {
     "title": "Title of Your Notification",
     "body" : "Body of Your Notification"
 },
 "data" : {
     "title": "Title of Your Notification from data background",
     "message" : "Body of Your Notification from data background"
 }
}

[Dallas62]

[Gabsys]

Issue solved. Able to receive notification now.
Problem was with the message sent from server-side (Not really sure what's the exact issue as backend was handled by my colleague, prolly the message format issue). Thanks @Dallas62

Case closed.

[ArturTimoxin]

Hi @Gabsys
Make sure you are on the latest version,
Also note this issue might be related to the version 3.2.1, the default channel is set to a wrong priority.
Two solutions:

• App has not been released with version 3.2.1: reinstall the application on the test device.
• App has been released with version 3.2.1: release a version by overriding the default channel in AndroidManifest, other issues already exist with the fix.

Hi, when I added this string to app/src/main/AndroidManifest.xml
<meta-data android:name="com.dieam.reactnativepushnotification.channel_create_default" android:value="true"/>

It solved my problem with onNotification() listener when my app was in background. My package version is 4.0.0.
Thanks for your solution!

[muriloneo]

I can't get pop up to show on background.

Replicated all example code, might be missing something.
AndroidManifest.xml

<service
    android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService"
    android:exported="false" >
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

<meta-data android:name="com.dieam.reactnativepushnotification.channel_create_default" android:value="true" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground" android:value="true" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name" android:value="CanalPush" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description" android:value="Canal para Push CSJT" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@android:color/white" />

<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_name.rn-push-notification-channel-id-4-300" android:value="Example-Channel silent" />
<meta-data android:name="com.dieam.reactnativepushnotification.notification_channel_description.rn-push-notification-channel-id-4-300" android:value="Super channel description for silent channel" />`

android/app/build.gradle
implementation 'com.google.firebase:firebase-analytics:17.3.0' implementation project(':react-native-push-notification')

android/build.gradle
classpath("com.android.tools.build:gradle:3.5.3") classpath('com.google.gms:google-services:4.3.3')

What is missing?

[mfaisalabbasi]

@muriloneo having same issue notification sounds and pops up when app in foreground but when app closed or background notification silently show icon on notification tray (or area where notification icon show). how to implement same function for all states like social media messenger do.
@Dallas62 if you have solution kindly spare some kind time

[imsaurabhdixit]

In my case notification is coming from connectycube and even my onNotificaiton method get fire when the app is in background but notification popup and coming in notification list.
This is what i am getting in onNotification:
{
data:
badge: "1"
dialog_id: "60574552ca8bf468829098f5"
message: "You have 4 new messages"
user_id: "3791768"
__proto__: Object
finish: ƒ finish()
foreground: false
id: "-414371205"
userInteraction: false
}