React Native: Working with Notification Badges
By: Ross Bulat
Tags: JavaScript, Software Engineering, Programming, iOS App Development, React Native

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:

“Badge Flow” diagram illustrating how badge UI can guide users to development of interest.

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: React Native: Creating an In-App Inbox.

Effective badge use cases

Receiving new messages are a strong — but not only — use case for effective badge use (of course, provided messages are not spammed to the user and stay relevant with their context). Here are some others that you may wish to implement based on your app’s primary domain / purpose:

Live updates on service status, such as order delivery status. Use badges to represent how many new updates there are, and place the badges in-app by icons or links that take the user to that new content.

For educational apps, badges are useful for notifying users when they receive new grades or comments from tutors. The same can be said in the gaming domain, when trophies are unlocked for example.

Other common use cases include financial apps and social media apps, where badges represent critical changes to stocks and trades (perhaps tied into the user’s open orders that directly effect their portfolio) for the prior use case, and new threads or comments for the latter.

Where not to use badges

I have found myself turning off badge notifications for apps that use badges for things like promotions — which are ultimately advertisements sent directly to your device. This is annoying, and is by far the biggest way developers use badges negatively.

Another unwelcome badge scenario is to set them for things that users don’t care about — such as traffic notifications in an area I am no longer in, or asking to review something such as a journey you recently took, a product you recently bought, or a service you recently used. These distracting prompts will only deter users from your app, distracting the user’s natural usage of the app and force them to work around these interferences.

Try to avoid these scenarios when designing badge integration. Question whether a user will care about them, and better yet, trigger a positive emotional reaction from them.

Use badges sparingly for key state changes

The key to badge use is to limit badges to features that your users will care about. Using them sparingly will minimise the risk of users turning off badges altogether (that is very easy to do within Settings).

Perhaps the most popular way to set a badge is via remote notifications (or APNs) that are delivered to a user’s device, partly due to the fact that your server-side processes make changes behind the scenes and often need to bring those changes to the user’s attention when they are synced with the app on-device.

The following section will explore how to do badge management in React Native with a context provider and some useful badge APIs. We will then focus on how to manage badges in conjunction with remote APNs in a Node JS environment in the section to follow.