Using the react-native-push-notification library for your React Native notification needs

kevbosaurus - Apr 15 '21 - - Dev Community

Notifications are critical to the mobile experience. Not only are notifications an important way to interact with your users, but they also serve to grow user engagement and retention.

But notifications on a mobile platform can get complicated. In addition to “local” or “in app” notifications that you might want to display while the user is actively using your application, you might want to also use “push” notifications that bring users back when they aren’t using your application.

To make matters more complicated, the mechanisms for providing push notifications on Android and iOS devices are different. If you have simple notification needs, a notification library may not be necessary. However, the more complicated your notification needs, the more useful a library becomes to help manage them.

There are a number of React Native notification libraries to choose from, and this post will spotlight one of the leading options: react-native-push-notification.

Why react-native-push-notification is a popular React Native notification library

To start, the react-native-push-notification library supports local and push notifications, and uses a platform-independent approach to adding new features. This can be a huge advantage for developers who want speed to value now and flexibility for their future notification needs.

Given that react-native-push-notification is the most popular library, you can expect more complete documentation and helpful resources as you explore how to solve problems with a quick web search.

Although there are plenty of choices when it comes to third party React Native notification libraries (or even building your own), react-native-push-notification is a top option thanks to its popularity, support of both mobile platforms and notification types, many features, and a wealth of available documentation.

What to consider before building notifications from scratch or choosing a library

If you were sure you only needed a particular type of notification on a particular platform, it might make sense to create your own solution from scratch. Even in that case though, using a proven library allows you to save time by not replicating somebody else’s work. And since your application’s needs may change over time, it may be worth using a library that supports many notification types across many platforms, even if you don’t initially need to.

The APIs for sending local and push notifications are different, and to make things spicier, the APIs for doing both for Android and iOS are different, too. In addition, there are multiple mechanisms for sending push notifications. Since a library already exists to deal with all of these issues, in most cases, it makes sense to use a library rather than create your own solution.

When selecting which library to use to address a particular need, an easy way to start is to explore the most popular solution available. When a library is popular, that means many of those users already researched other possible solutions for the problem you’re trying to solve and decided on that library (the react-native-push-notification library, in this case). And the more popular a library is, the better it tends to be supported and the better its documentation.

It can sometimes be difficult to gauge how popular something is, but React libraries are downloaded from official repositories, and the download statistics are publicly available. Developers can also explicitly rate a library via stars if they like it, and those statistics are also publicly available.

Specifically, react-native-push-notification has over 5,600 stars, while the closest competitor (react-native-notifications) has less than half that number. The raw report has more information, but as you can see from just the download statistics below, it is clear that react-native-push-notification is by far the most popular React Native notification library.

npmtrends
Source: npmtrends

The main reason this library is so popular is that it presents a unified way to support both notification types on both platforms, but it is also chock full of features. These include scheduled notifications, as well as the ability to add custom badges and sounds.

Even though using a library makes dealing with React Native notifications simpler, there is still a fair amount of complexity that needs to be worked through. This is mostly because the mechanisms for sending push notifications are profoundly different, which adds a thick layer of complexity to an already complex problem.

On top of that, the way you register a device to receive notifications is vastly different between Android and iOS devices. So, documentation and support become even more important because of the inherent complexity that no library can completely eliminate. The GitHub page for the react-native-push-notification library provides excellent support and documentation.

You can also find more robust and helpful documentation to walk you through any issues you might encounter with the react-native-push-notification library. Some specific resources include:

Honorable mentions for React Native notification libraries

Even though react-notify-push-notification is the most popular option in most situations, there might be other situations where a different library may be a better fit. All of the options mentioned here also meet our criteria for being active and well supported.

react-native-notifications

This library is a close runner-up to react-notify-push-notification but offers fewer common features, is larger, and will take longer to load. Few common features mean there will be more code in your application doing roughly the same thing based on what platform the application is running on.

A significant advantage of this library is that it is sponsored by a well established company (Wix), which means it is highly likely to continue to be updated and supported in the future. Another advantage is that it has more platform-specific features (Android vs. iOS), so if you want to take full advantage of the notification features available for one or both platforms, then you might want to use this library.

react-native-onesignal

This library allows local notifications and push notifications via the OneSignal service. Because using OneSignal bypasses the normal push notification mechanisms, this library is much easier to use and much smaller. Using this library also provides for a unified notification system if you support more than one application or more than one mobile platform.

The main disadvantage to using this library is that a OneSignal account is required, and while some limited functionality is free of charge, significant use of the service costs money. The pricing structure, available here, is fairly complicated, but the free option is really only useful for push notifications to mobile platforms.

If you’re sure you will only ever need mobile push notifications or you are in a position to pay for the expected volume of notifications, then you might want to use this library.

react-native-root-toast

This is a relatively easy-to-use library that allows only local “toast” notifications. Toast notifications are simple, allow no user interaction, and can be set to expire after being displayed for a certain amount of time.

If you are sure you only need local notifications, then this library may be a better choice.

It’s time to stop worrying—start using the react-native-push-notification library today

Notifications, and especially push notifications, can be a critical and differentiating part of your mobile app experience. There are some best practices to follow, but the main point is that the best notifications are timely, personal, and actionable.

When done properly, notifications can increase user satisfaction and retention, so it is definitely an advantage to implement notifications in your application. Unfortunately, React Native notifications are difficult and usually require you to use a library.

For most situations, the library you want to use is react-native-push-notification. It supports both local and push notifications, both major platforms, is free to use, has many features, and is well-supported and documented.

. . . . . . . . . . . . . . . . . . . . . . . .