Duplicate Notifications react-native-push-notification

As developers of mobile apps, we are well acquainted with notifications. Almost every mobile application that we develop will include a notification feature. This is because notifications serve as a crucial means of communication between our app and users.

Duplicate Notifications react-native-push-notification

But as a mobile app developer, particularly when using React Native, it is undeniable that there are challenges when it comes to creating a notification feature. This article will discuss the challenges I encountered while developing such a feature, focusing specifically on the problem of duplicate notifications.

Earlier, I utilized Firebase to develop a notification functionality.

@react-native-firebase/messaging

and for setting notifications on my local Android I used

react-native-push-notification

This notification duplicate event has two parts a duplicate when the app is in background mode and a duplicate when the app is in foreground mode.

Duplicate Foreground Mode

To handle duplicate notifications while our application is in foreground mode, we can add the following code to the AndroidManifest.xml file.

Duplicate Background Mode

Previously we had to know that this duplication occurred because there were two channel IDs that were formed when a notification came in, the default channel ID and the channel ID that we created when the notification came in with our application in background mode.

To prevent duplicates from occurring, it is necessary to delete the default channel ID that is automatically created. This channel ID, "fcm_fallback_notification_channel", is set by default in react-native-push-notification. You can delete this channel ID using the code below for more information on the process.

The code above is positioned in the index.js file for the AppRegistry, so it is the first file to be indexed in our application with React Native.

Hopefully, this tutorial or brief explanation can help solve the problem for developers who are confused about duplicate notifications when using react-native-push-notification.

If there is anything that is still unclear, please feel free to leave a comment below. Thank you and greetings from a React Native developer.