Enhancing User Alerts with Firebase Push Notifications in React Native

Push notifications are an essential feature in modern mobile applications, allowing developers to engage users effectively. One common challenge is notifying users visually when new content or updates arrive, especially when the app is in the background or killed. In a React Native CLI project, I encountered this challenge and successfully implemented a dynamic bell notification feature that alerts users by changing the icon's color. This article outlines the steps and logic behind this implementation.

Handling Notifications Across App States

When implementing push notifications, ensuring seamless functionality across different app states is crucial. In this project, Firebase Cloud Messaging (FCM) was used to send notifications, and the app's state was monitored to determine user activity.

Storing Notification Flags

To persist notification state, the app used AsyncStorage to store a flag whenever a new notification was received. This flag indicated whether the user had unseen notifications. The logic involved:

Storing the Flag: When a notification arrives, a flag (hasNewNotification) is set in AsyncStorage to true.

Retrieving the Flag: On app launch or resume, the stored flag is retrieved to check if a notification was missed while the app was inactive.

This approach ensures that users are alerted to new notifications, even if they missed the initial push.

Foreground and Background Notifications

Firebase Messaging provides methods to handle notifications in both foreground and background states.

Foreground Notifications

In the foreground state, users are actively using the app. The onMessage listener was used to capture incoming notifications and update the state dynamically. Upon receiving a notification:

The notification flag is set to true.

The bell icon’s color is updated to visually indicate the new notification.

Background Notifications

When the app is running in the background, notifications must still trigger the same flag update. The setBackgroundMessageHandler method was employed to handle background notifications. This ensures that the notification state persists and updates seamlessly when the app transitions from background to active.

Detecting App Resume Using AppState

React Native's AppState API was a key component in this solution. It detects when the app transitions between states, such as moving from background to active.

Refreshing the Notification State

When the app resumes, the stored notification flag in AsyncStorage is checked to determine if there are unseen notifications. If the flag is set to true, the bell icon's color is updated to alert the user. This functionality ensures that users are notified of updates regardless of whether the app was open when the notification was received.

Managing User Interaction with Notifications

To enhance user engagement, tapping the notification icon navigates the user to a dedicated screen displaying detailed notifications. This interaction involves:

Resetting the notification flag to false once the user views the notifications.

Clearing the visual alert (changing the bell icon back to its default color).

Persisting the updated state in AsyncStorage to reflect that the notifications have been seen.

Ensuring a Smooth User Experience

This approach prioritized user experience by providing consistent and intuitive notifications. The use of AsyncStorage allowed notification states to persist across sessions, while the dynamic icon updates ensured users were always visually alerted to new updates.

Key Considerations in the Implementation

Minimizing Redundancy: The notification handling logic was kept DRY (Don’t Repeat Yourself) by reusing functions like storeNotificationFlag and loadNotificationState.

Asynchronous Operations: Proper use of async/await ensured that state updates and storage operations were handled without blocking the main thread.

Scalability: The modular implementation allows for easy extension, such as integrating additional notification types or customizing icon behaviors based on the notification category.

Conclusion

Incorporating dynamic bell notifications into a React Native app is a practical way to enhance user engagement and ensure they stay informed. By handling notifications across foreground, background, and app-killed states, this implementation provided a reliable and intuitive user experience. The integration of Firebase Messaging, combined with React Native’s state management tools, made this possible with minimal complexity.

This feature not only improved user interaction but also demonstrated the importance of thoughtfully managing notifications in mobile app development. With the outlined approach, you can implement a similar solution tailored to your app’s specific requirements, ensuring users never miss an update again.