A quick recipe to creating an interactive remote notification banner UI in a React Native app, with animations and interactivity.

Remote notifications are an essential part of many types of apps and their use-cases. They are the preferred way for systems to communicate time-sensitive information, from marketing to transactional purposes, to their users individually (using device tokens), a specified target group (using topics), or as a whole. To do this, React Native developers often turn to the ever-popular RNFirebase package by Invertase, which provides a wrapper around the native Firebase SDK for Android and iOS, and taking advantage of the Messaging module to listen to incoming remote messages sent from Firebase Cloud Messaging (FCM).

Why?

One might wonder, why the need for a custom notification UI? Won’t remote notifications just automatically be displayed in the notification shade? Looking at the docs, apparently, notifications cannot be displayed while the app is in foreground (while the user is actively using the app) — see table below.

Notification display support in RNFirebase

Notifications will only be shown in the notification shade if the application state is in background or quit/terminated. Hence, some form of in-app UI is needed to display the notifications to the user as they are received.

#react-native #notifications #firebase #ui #react