Member-only story
React Native: Working with Notification Badges
How to invoke and dismiss iOS notification badges in React Native and server-side
Effectively get user attention with notification badges
App badges are tied into Apple’s push notification service. They can be displayed beside the app icon on the home screen and within the app itself. Not only this, app badges can also be set within the app, bypassing the need to rely on notifications to set the badge.
By setting up an event handler for when notifications are delivered, badges setting can be handled in-app as soon as a remote notification is delivered (this is particularly useful when a user is in the app as a notification is delivered, since notifications are not displayed in Notification Center if the app is actively in the foreground). Finally, badges can be dismissed at any point within an app, giving the developer flexibility to tailor how badges behave.
When used wisely badges can be very effective to not only alert a user of an important development relating to your app, but also focus their attention to a particular point of the app — and even guide users to a screen where that development is at. Take the following scenario of receiving a new message, where badge UI guides the user to the particular message screen:
Badges can be embedded in a tab bar controller of React Navigation, or to any other component within your app. In addition, any component can set and dismiss the badge. We’ll be visiting the particular packages and APIs to do this further down.
This article will walk through how to apply badge features in React Native (and NodeJS on the server-side in relation to Apple Push Notifications) to manage badges for an app.
If you are interested in developing an inbox feature in React Native, I have published an article detailing how to develop the feature in full with the key components needed; it acts as a good prerequisite to this piece if you’d like to build badge functionality into the feature. Read the article here…
