Expo - Implementing Notifications Set App Icon Badge Number

Question

Despite numerous attempts to implement the app icon badge number in our Expo app, the app icon badge number could not be set. The documentation on setting notifications app icon badge number is also very limited. We are trying to set app icon badge number to 1 when there is new push notification and then reset the app icon badge number to 0 after the user clicked on the notification.

Can anyone point out what’s wrong here?

The following is the callback function for the Notifications listener.

handleNotification = async (notification) => {
    const { origin, data, notificationId } = notification
    const notif = { id: notificationId, ...data }

    // set notifications badge count
    try {
      const setAppBadgeCount = await Notifications.setBadgeNumberAsync(1)
      console.log(`showing app badge number to 1 ${setAppBadgeCount}`)
    } catch (err) {
      console.log('did not manage to show notif app badge count!', err)
    }
    if (origin === 'selected') {
      this.navigateToNotificationScreen(data)
      try {
        const resetAppBadgeCount = await Notifications.setBadgeNumberAsync(0)
        console.log(`reset app badge count ${resetAppBadgeCount}`)
      } catch (err) {
        console.log('did not manage to reset notif app badge count!', err)
      }
    } else { // origin === 'received', show in-app
      const { dispatch } = this.props
      dispatch(setActiveNotifications([notif]))

      setTimeout(() => {
        dispatch(setInactiveNotifications([notif]))
      }, 10000)
    }
  }

Thanks in advance!

Answer 1

Ah I got reminded that I didn't leave my solution here. In my case, the Expo front end code was written perfectly. The way I wrote it above works like a charm. Issue for me is that the backend request sent to the Expo server wasn't written correctly. Refer to this link - https://docs.expo.io/versions/latest/guides/push-notifications/#sending-notifications-from-your-server

[
  {
    "to": "ExponentPushToken[xxxxxxxxxxxxxxxxxxxxxx]",
    "sound": "default",
    "body": "Hello world!"
  },
  {
    "to": "ExponentPushToken[yyyyyyyyyyyyyyyyyyyyyy]",
    "badge": 1,
    "body": "You've got mail"
  },
  {
    "to": [
      "ExponentPushToken[zzzzzzzzzzzzzzzzzzzzzz]",
      "ExponentPushToken[aaaaaaaaaaaaaaaaaaaaaa]"
    ],
    "body": "Breaking news!"
  }
]

Specifically, I didnt add the param "badge": 1 in the request body of the notification sent to the Expo server. As a result, the app icon badge number is not set at all.