How to display notification count on icon in react native?

Question

How do you display notification count on an icon with react native like photo?

Answer 1

Setting a badge number is only supported on iOS. To imperatively set the badge number you can use e.g. PushNotificationIOS.setApplicationIconBadgeNumber. See how to set up PushNotificationIOS in the RN docs.

There are also a number of 3rd party libraries available to accomplish this, with push notification handling for both Android and iOS, should you need that.

Although "vanilla" Android does not support badge numbers, the same effect can be achieved by using a widget or a custom launcher. For further info, see this question.

Answer 2

Since React Native has deprecated their PushNotificationIOS library, you will have to explore other options.

Android (background/foreground/killed) and iOS (background/foreground)

With Android 8 and above devices, launcher icons will display notification badges by default for active notifications (source from Android). For updating the badge icon on iOS while your app is running (either in the foreground or background) you can use a package like react-native-push-notification, @react-native-community/push-notification-ios, or the previously paid service that is now free @notifee/react-native. All of them will have a method similar to:

//in onNotification handler
PushNotification.getApplicationIconBadgeNumber(badgeNumber => {
  PushNotificationIOS.setApplicationIconBadgeNumber(badgeNumber + 1)
})

Some of these may claim to work for Android, but use at your own caution. Since each launcher is different, a Samsung may behave differently than a Google Pixel with one of these libraries. For example, on a Samsung S9 running Android 10, manually setting the badge icon number from your app would be overridden when a user clears their notification tray.

iOS (killed)

For updating the badge icon for iOS while the app is killed, you have to either use a 'noisy' remote notification with a badge property, or a 'silent' remote notification that requires more configuration.

Noisy remote notifications

These types of remote notifications are immediately shown to the user, and contain a data property with an aps property. A noisy notification can update your badge icon by itself without waking up your app to run any code. Payload example:

{
  "aps": {
    "alert": {
      "body": "the body text",
      "title": "the title"
    },
    "badge": 6,
  }
}

In this method your backend service would track what the badge number should be. You would probably want to implement some functionality where if a user opens a notification or interacts with your app in a certain way, the app would then make an api call to your backend service to adjust/reduce the badge number for that user.

Silent remote notifications

There is a way to silently wake up your app and update it in the background (docs). This will not notify the user, so it is up to you to trigger a local notification if that's your desired result. It is also not guaranteed the user will receive this notification, say if their device has low battery or if the service is throttled because you tried to send too many updates per hour. As far as I know, you would have to update the badge icon number using one of the third party packages I mentioned above, as including the badge property on the payload would not be recognized here. To implement this method first open your project in Xcode, select your target project, and in the Signing & Capability tab, add the Background Modes capability, then select the Remote notification checkbox. The payload for these notifications looks like this:

aps: {
  // Important to receive the silent notification
  'content-available': 1,
          
   alert: {
     title: notification.title,
     body: notification.text,
   },
}

There seem to be a number of caveats about this method, so I highly recommend developers read the documentation linked above.