React-native-notifications: [v3][Android] Foreground notifications are empty inside drawer

[IljaDaderko]

I'm using v3.1.1 of the library. App receives foreground notifications correctly, however it also adds empty notification to the drawer as shown in the screenshot. This notification only shows app name, all other presets like icon / title / text are empty (All of them work correctly in background notifications).

This empty notification seems to have correct payload associated to it as when I exit my app and click on it opens my app and navigates to correct screen (i.e. my custom logic based on notification payload works).

Is there any way to not display this notification when it is received in foreground or at least make it have correct content?

[IljaDaderko]

I think foreground notifications completely ignore these settings inside AndroidManifest.xml as well (these are applied to background notifications correctly)

 <meta-data
            android:name="com.google.firebase.messaging.default_notification_channel_id"
            android:value="@string/default_notification_channel_id" />

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_icon"
            android:resource="@drawable/ic_stat_ic_notification" />

        <meta-data
            android:name="com.google.firebase.messaging.default_notification_color"
            android:resource="@color/pink" />

[WhaSukGO]

I'm using ^2.1.7 of the library and struggling with the same issue.

I already tried to append
<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/notification_icon" /> , but no change happened.

It must be fixed...

[dehypnosis]

{
  data: {
    title: "title",
    body: "body",
    anyAdditionalPayload...,
  }
}

To fix it, embed title and body to data field and don't fill notification field for FCM payload.

[IljaDaderko]

It's already there. Essentially all notifications have same payload and ones that arrive as "background" have correct title / body / icon etc...

[mogryo]

Hi,

Using v3.1.1 version.

Facing the same issue. The fact that notification is empty in foreground does not bother me that much, because in my app I would like to completely hide the system notification while the app is in the foreground.

I checked the Java code of the package, and noticed you have no logic for checking if app is in foreground or not. My question is, will you add such functionality? to opt-in show or not to show the android OS notification while the app is in the foreground.

Would be great if you could answer asap, since if the answer is negative, I have to start re-writing the whole service myself for the app.

[yogevbd]

I'm trying to reproduce it in the example app, how does your payload look like?

[BenWildeman]

@yogevbd you can send a test push notification through firebase to see the same problem

[Vishal7Sharma]

Facing the same issue, working while app is in background, but showing empty notification if app is in foreground.

[eduardopelitti]

Same issue here sending notifications from Firebase Cloud Messaging (and we had the same issue with v2, so nothing new here). If I log the Notification object in the registerNotificationReceivedBackground listener, I can see all the information is there.

If I send the notification via the package fcm-push with the payload inside the "data" object, then the notification information is displayed successfully in the Notifications tray. Basically what @dehypnosis said.

This works, e.g.:

const message = {
    to: config.android.deviceToken,
    data: {
      title: 'Title of your push notification data',
      message: '📋 Paste 👌',
      subtitle: 'subtitle',
    },
  }
fcm.send(message)

But I don't know a way of formatting the notification in this manner from the Firebase console. I'm not sure if this will be an issue in the future (for the marketing team planning to use the console, for example).

[dehypnosis]

I figured out that this problem cannot be resolved from firebase console.
It is so sad but we need to make own console for marketing or management users.

[orhanoksuzz]

But I don't know a way of formatting the notification in this manner from the Firebase console. I'm not sure if this will be an issue in the future (for the marketing team planning to use the console, for example).

@dehypnosis
The private key value can be sent from the Firebase console in step 5.But as you stated, can we do this in the future, I am also curious.I hope a solution to this problem is produced as soon as possible.

[nec286]

{
  data: {
    title: "title",
    body: "body",
    anyAdditionalPayload...,
  }
}

To fix it, embed title and body to data field and don't fill notification field for FCM payload.

With this approach you won't get any delivery analytics in Firebase.

[dehypnosis]

@nec286
I know what you mean, but the FCM itself is badly designed. Aside additional features like Firebase console, FCM payload with notification field always display head-up notification even when user is foreground also that payload cannot be handled with background task and open handler.
So as Google said, you need to empty all notification field and use only data field to handle behavior of notification by yourself. Not only for the react-native-notification beahavior.

In short, FCM payload should use data field only if need to more than just showing head-up notification popup. Also Firebase console does not fit for that purpose.

reference: https://firebase.google.com/docs/cloud-messaging/concept-options#data_messages

Below is how I send messages without console. (nodejs)

const admin = require('firebase-admin');
admin.initializeApp({
  credential: admin.credential.cert(path.resolve(__dirname, "../firebase-adminsdk.json")),
});
const messaging = admin.messaging();

// should work as below for each platforms
// foreground -> handle data (o)
// background -> show notification if need (o) then handle data on clicked (o)

const t = new Date();
const time = `${t.getHours()+1}:${t.getMinutes()}:${t.getSeconds()}`;

messaging.send({
  condition: "!('none' in topics)",
  data: {
    title: "title remote??",
    body: "body remote???",
    data: JSON.stringify({
      message: "hello.... remote",
      time,
    }),
  },
  android: {
    priority: "high",
  },
})

[patrickyin]

Firebase suggested payload structure:

{
  "GCM": {
    "notification": { "title": "title", "body": "body"},
    "data": { "additional": "data here"}
  }
}

react-native-notifications suggested payload structure:

{
  "GCM": {
    "data": {"title": "title", "body": "body",  "additional": "data here"}
  }
}

@dehypnosis @nec286 I'm still prefer to use Firebase suggested payload structure since the other one couldn't make FCM message delivery analytics work.
There are 2 issues if we use the Firebase payload:

1. The foreground notification is empty. This one can be fixed by updating the logic of PushNotificationProps class;
2. undefined will be passed to the app as initial push notification data when user open the app through background push notification. To fix this issue, we can add an extra step to onActivityStarted in RNNotificationsPackage class which is setting up the initial message from the intent the app gets.

Details in PR https://github.com/wix/react-native-notifications/pull/496

[rnnyrk]

Facing the same issue. I think it's due to not having a FirebaseMessagingService in my AndroidManifest.xml as mentoined in https://firebase.google.com/docs/cloud-messaging/android/client

The docs are also not clear on how to add a custom service with this package unfortunately.

Not sure about this, but my Amazon service definitely send out correct data. Works on iOS as well.

Anyone who can clear this up?

[ShaneMatthias]

I am not sure why they added this line of code, but I removed this line of code and it fixed it for me.

In node_modules/react-native-notifications/lib/android/app/src/main/java/com/wix/reactnativenotifications/core/notification/PushNotification.java

@Override
public void onReceived() throws InvalidNotificationException {
    // postNotification(null); <-- I took out this line
    notifyReceivedToJS();
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[BenWildeman]

oi, bot

[rnnyrk]

Well not resolved for me unfortunately. Anyone with a fix?

[ShaneMatthias]

I am not sure why they added this line of code, but I removed this line of code and it fixed it for me.

In node_modules/react-native-notifications/lib/android/app/src/main/java/com/wix/reactnativenotifications/core/notification/PushNotification.java

@Override
public void onReceived() throws InvalidNotificationException {
    // postNotification(null); <-- I took out this line
    notifyReceivedToJS();
}

Did you this ^

[RayKayy]

As mentioned by @ShaneMatthias,
onReceived is calling postNotification which in return invokes

final NotificationManager notificationManager = (NotificationManager) mContext.getSystemService(Context.NOTIFICATION_SERVICE);
        notificationManager.notify(id, notification);

This is causing all incoming payload with or without the notification property to show up on the system tray.
However, according to Firebase docs:

• https://firebase.google.com/docs/cloud-messaging/android/receive
• https://firebase.google.com/docs/cloud-messaging/concept-options#notifications_and_data_messages

Use notification messages when you want FCM to handle displaying a notification on your client app's behalf. Use data messages when you want to process the messages on your client app.

I believe the proper fix for this issue is to only call notifyReceivedToJS(); and not postNotification(null) within onReceived() and have the client handle the payload accordingly (Be it posting a local notification/ business logic in the background).

This will also make _Notification messages with optional data payload_ behave as expected

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[stale[bot]]

The issue has been closed for inactivity.