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…