Grouping notifications

[michelebombardi]

How can we group notifications?
I've seen the code of your library and the setGroup method is called on NotificationBuilder but my notifications are not grouped.

I'm using the following code to create a local notification:

messaging.createLocalNotification({
    title: message.title,
    body: message.body,
    sound: message.sound,
    priority: 'high',
    click_action: message.action || 'android.intent.action.MAIN',
    ticker: 'Nuovo avviso',
    auto_cancel: true,
    icon: message.icon,
    large_icon: 'ic_launcher',
    big_text: message.body,
    sub_text: 'Avvisi',
    color: message.color,
    vibrate: 300,
    tag: message.tag,
    group: 'caliup',
    lights: true,
    show_in_foreground: true
})

How can I handle grouping?

NOTE: I'm using android 8.0

[kevando]

where do you see documentation for functions like createLocalNotification?

All I could find is this and it doesnt seem comprehensive.
https://rnfirebase.io/docs/v3.0.*/messaging/reference/messaging#onTokenRefresh

[Ehesp]

The messaging docs are incomplete which we realise. There's some discussion about how we progress with it as it really needs an overhaul.

[kevando]

thanks @Ehesp the layout of that page and the ios installation instructions are quite good, so i thought i might be crazy.

have you thought about adding a "underconstruction" message with a link to contribute. I get a ton of value from rn+firebase and would be happy to help.

[Ehesp]

@kevando Yeah I guess we should - there is an edit button at the bottom of each page :)

[chrisbianca]

Thanks for reporting. We're aware of lots of issues with notifications and will be addressing them all as part of the v3.2.0 release stream. Please see #595 for updates.

[chrisbianca]

Good news, the long awaited alpha of our messaging and notifications overhaul is now available!!

Check out the release notes here: https://github.com/invertase/react-native-firebase/releases/tag/v4.0.0-alpha.1

If you have any comments and suggestions or want to report an issue, come find us on Discord

[michelebombardi]

I've tried to grouping notifications and still does not work. I'm using v.4.2.0 of your library with react-native v.0.55.1. I've set the group with setGroup method and according to this on Android 7.0 and higher (I'm testing on android 8) the system automatically builds a summary for your group using snippets of text from each notification so setting the groud should be enough.

Can you help me please?

[tuomohopia]

I also can't get grouping to work, using 4.2.0 too with Android SDK 26.
I wonder if createChannelGroup is the same as createChannel in the sense that it's safe to call again, so it could be called even everytime a message is received that should be displayed as a heads-up notif?

setVisibility also does not seem to be working but I think that's already a known issue, possibly fixed already.

[Salakar]

Re-opening to re-visit grouping issue, has been mentions on discord as well of it not working. Unless anyone can say otherwise or has it working for them?

---

Loving react-native-firebase and the support we provide? Please consider supporting us with any of the below:

• 👉 Back financially via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️

[aMarCruz]

@Salakar , grouping is working to me. This is a feature of Android 7.0 and above, as documented here.

In my case, I'm creating local notifications from remote messages. The trick is to create an additional notification that will contain the notifications for that group.

This is the relevant code:

// ID for grouping notifications, always the same
const SUMMARY_ID = `${ALERTS_GROUP}.summary`

const sendIt = (notification: Firebase.notifications.Notification) => {
  return firebase.messaging().hasPermission().then((yes) => {
    if (yes) {
      try {
        return firebase.notifications().displayNotification(notification)
          .catch((err) => {
            Log.e(`[sendNotification] ERROR: ${err}`)
            return Promise.resolve()
          })
      } catch (err) {
        Log.e('[sendNotification] Error displaying notification: ' + err)
      }
    }
    return Promise.resolve()
  })
}

const sendSummary = (data: MessageData) => {
  const summary = new firebase.notifications.Notification()
    .setNotificationId(SUMMARY_ID)
    .setTitle(_T('notification.channels.alert.description'))
    .setData(data)
    .android.setAutoCancel(true)
    .android.setCategory(firebase.notifications.Android.Category.Message)
    .android.setChannelId(getChannelId(MsgType.Alert))
    .android.setColor(variables.scheme.primaryColor)
    .android.setSmallIcon(STATUS_ICON)
    .android.setGroup(ALERTS_GROUP)
    .android.setGroupSummary(true)
    .android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)
  sendIt(summary)
}

/**
 * Called by `bgMessaging` or the `onMessage`  handler.
 */
export function sendNotification (message: Firebase.messaging.RemoteMessage) {
  const payload: MessagePayload = message.data as any || {}
  const notification = new firebase.notifications.Notification()
  // ... more code

  if (Platform.OS === 'android' && Platform.Version >= 24) {
    notification.android.setGroup(ALERTS_GROUP)
    sendSummary(notification.data)
  }
  Log.v('[sendSummary] sending notification.')
  return sendIt(notification)
}

There's an inbox-style which also allows grouping and works in SDK 23 and bellow, but is not implemented in RNF react-native-firebase.

[Salakar]

@aMarCruz thanks for confirming and the detailed example. Will close this again.

[lutchobandeira]

@aMarCruz @Salakar Do you know if there is a way to group notifications for versions prior to Android 7.0?

[chinalwb]

I found it is pretty tricky to show the notification group. Thanks @aMarCruz 's comment, but it still costs me several hours to make it work so I'd like to share my code:

This is mine:

  const groupNotificationId = 'test'
  const body = 'Chats list'
  const smallIcon = 'ic_launcher'
  const color = '#FF00FF'

  const groupNotification = new firebase.notifications.Notification()
    .setNotificationId(groupNotificationId)
    .setSubtitle(body) // This is setSubText(..) in Android
  groupNotification
    .android.setGroup(groupNotificationId)
    .android.setGroupSummary(true)
    .android.setChannelId('chat')
    .android.setSmallIcon(smallIcon)
    .android.setAutoCancel(true)
    .android.setColor(color)

  const title = 'Test Chat'
  const desc = 'User A added comment: Hello'
  const nid = '1001' // nid + tag is a composite key to identify the notification
  const tag = 'Test tag'

  const notification = new firebase.notifications.Notification()
    .setNotificationId(nid)
    .setTitle(title)
    .setBody(desc)
  notification
    .android.setBigText(desc)
    .android.setAutoCancel(true)
    .android.setChannelId('chat')
    .android.setTag(tag)
    .android.setGroup(groupNotificationId)

  firebase.notifications().displayNotification(groupNotification)
  firebase.notifications().displayNotification(notification)

Be careful, tag / notificationId, group, groupSummary and channel id, these are very important fields and you need to set.

And I am still running into an unexpected behavior, which is every time I see a notification, it pops up twice, I think one is for the groupNotification and the other one is for notification. Not found a solution yet.

Anyway hope this will help someone.

[aMarCruz]

@chinalwb try using .android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)

...and sorry, my example was incomplete and it missed relevant lines under "// ... more code"

[chinalwb]

@aMarCruz Thank you, I added the group alert behaviour to both group and child notification, it works now.

[chinalwb]

So this is the latest code.

  const groupNotificationId = 'test'
  const body = 'Chats list'
  const smallIcon = 'ic_launcher'
  const color = '#FF00FF'

  const groupNotification = new firebase.notifications.Notification()
    .setNotificationId(groupNotificationId)
    .setSubtitle(body) // This is setSubText(..) in Android
  groupNotification
    .android.setGroup(groupNotificationId)
    .android.setGroupSummary(true)
    .android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)
    .android.setChannelId('chat')
    .android.setSmallIcon(smallIcon)
    .android.setAutoCancel(true)
    .android.setColor(color)

  const title = 'Test Chat'
  const desc = 'User A added comment: Hello'
  const nid = '1001' // nid + tag is a composite key to identify the notification
  const tag = 'Test tag'

  const notification = new firebase.notifications.Notification()
    .setNotificationId(nid)
    .setTitle(title)
    .setBody(desc)
  notification
    .android.setBigText(desc)
    .android.setAutoCancel(true)
    .android.setChannelId('chat')
    .android.setTag(tag)
    .android.setGroup(groupNotificationId)
    .android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)


  firebase.notifications().displayNotification(groupNotification)
  firebase.notifications().displayNotification(notification)

[chinalwb]

@aMarCruz Sorry to bother you, I have one more issue about the group notification, that is you can see my code in above comment, I didn't set smallIcon to the (child) notification -- only setSmallIcon onto groupNotification, but in fact every child notification are being shown with a small icon.

Notice the gray square to the left side of each notification. (The green one at the group notification is being shown as expected.)

Can you help to give me some advice?

Thanks.

[aMarCruz]

@chinalwb of course, you need set the desired icon and color for individual notifications as well, otherwise, rn-firebase will put this (contrary to what is said in the docs) to the default icon of your App (mipmap/ic_launcher).

[chinalwb]

@aMarCruz Thanks, I set a different small icon string and it shows, but in fact I want to remove the icon from the child notification. Just like this:

Also I want to remove the / icon from the child notification, it makes the child notification looks like a group.

Many Thanks.

[aMarCruz]

@chinalwb I really don't know how to hide the icon in group elements.
But try using .android.setSmallIcon() with null, an empty string, or an fake name (ex. "noname")... I think one of those parameters will work without generating error.

Also, check in your AndroidManifest.xml and delete the meta with the name "com.google.firebase.messaging.default_notification_icon" if any, ...it is something like this:

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

Please tell me if some works.

[chinalwb]

@aMarCruz Thank you very much for your help!

I found the trick.

To hide the smallIcon in the child notification, I need to keep the setSmallIcon(smallIcon) and setColor(color) of the child notification to be exactly same with the group notifications.

I.e.: with the code in my above comment, it was:

const groupNotificationId = 'test'
const body = 'Chats list'
const smallIcon = 'ic_launcher'
const color = '#FF00FF'

const groupNotification = new firebase.notifications.Notification()
.setNotificationId(groupNotificationId)
.setSubtitle(body) // This is setSubText(..) in Android
groupNotification
.android.setGroup(groupNotificationId)
.android.setGroupSummary(true)
.android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)
.android.setChannelId('chat')
.android.setSmallIcon(smallIcon) ### // Sets small icon to group notification
.android.setColor(color) ### // Sets color to group notification
.android.setAutoCancel(true)

const title = 'Test Chat'
const desc = 'User A added comment: Hello'
const nid = '1001' // nid + tag is a composite key to identify the notification
const tag = 'Test tag'

const notification = new firebase.notifications.Notification()
.setNotificationId(nid)
.setTitle(title)
.setBody(desc)
notification // I didn't set smallIcon or color for child notification
.android.setBigText(desc)
.android.setAutoCancel(true)
.android.setChannelId('chat')
.android.setTag(tag)
.android.setGroup(groupNotificationId)
.android.setGroupAlertBehaviour(firebase.notifications.Android.GroupAlert.Children)

firebase.notifications().displayNotification(groupNotification)
firebase.notifications().displayNotification(notification)

See the embeded comment inside the code, I set smallIcon and color to group notification but didn't set either of them to child notification, this is one of the case that the child notification isn't the same to the group notification, so each child notification shows a small icon of itself -- in fact here, if there is no smallIcon set for child notification, it uses the default one, i.e.: 'ic_launcher', but because I set the color to group notification, so this action makes them different.

So to resolve (hide the smallIcon of the child notification) the issue, I did like this:

1. added setSmallIcon(smallIcon) to child notification
2. added setColor(color) to child notification

And BTW, to remove the \/ icon at the RHS of the child notification, just need to remove the call to setBigText(..).

And what's more, remove or keep the meta-info from manifest doesn't affect the result.

Now it looks like this:

Thank you @aMarCruz !

[aMarCruz]

@chinalwb great!

maybe, if I have the time in the next days, the PR #1323 will be ready. The Inbox style is the one used by Gmail and like yours, but make it easy and supports previous Android versions.

Thanks for your feedback.

[chinalwb]

@aMarCruz Thanks, will pay attention to the PR.

[marvinkome]

How's the PR coming up? Is there any way to show the messages in the group since the inbox style isn't available.

[iamsoorena]

Why is this thing closed? It's a must-have.

[tusharmutreja]

Hey guys,

Did anyone find the solution? I am still stuck in the grouping of notification

[firofame]

@chinalwb Thank you so much for your solution. it works perfectly when the app is in the foreground. unfortunately, the onNotification listener doesn't get triggered when the app is in the background or killed hence the notification doesn't group. do you have any workaround?