CODEWITHSUNDEEP
firebasereact-nativepush-notificationfirebase-cloud-messagingreact-native-firebase
Ray Jonathan
Ray Jonathan

Reputation: 1355

React Native: managing notification on RNFirebase

I have successfully implemented a basic notification feature using react-native-firebase library, everything is working as expected, information is properly received and ready to be used for a purpose I have yet to determine. My code currently look like this for the notification handling part:

 componentDidMount() {
        /**
         * When app on foreground, rewrap received notification and re-send it as notification using channelId
         * A workaround because channelId never set by default by FCM API so we need to rewrap to make sure it is
         * shown on user's notification tray
         */ 
        this.notificationListener = firebase.notifications().onNotification((notification) => {
            //data object must have channelId props as a workaround for foreground notification on Android
            console.log('Notif ', notification);
            notification.android.setChannelId(notification.data.channelId);
            firebase.notifications().displayNotification(notification);
        });

        //On Notification tapped, be it from foreground or background
        this.notificationOpen = firebase.notifications().onNotificationOpened((notificationOpen) => {
            //body and title lost if accessed from background, taking info from data object by default
            const notification = notificationOpen.notification;
            console.log('Open ', notification)
            Alert.alert(notification.data.title, notification.data.body);
        });

        //When notification received when app is closed
        this.initialNotification = firebase.notifications().getInitialNotification()
            .then((notificationOpen) => {
                //body and title lost if accessed this way, taking info from data object where info will persist
                if (notificationOpen) {
                    const notification = notificationOpen.notification;
                    console.log('Initial ', notification)
                    Alert.alert(notification.data.title, notification.data.body);
                }
            });
    }

    componentWillUnmount() {
        this.notificationListener();
        this.initialNotification()
        this.notificationOpen();
    }

The above code let me use any information I sent from firebase console or a php server set up by my colleague from within the above scope (not sure how the server side implementation was done, but it gives me the exact same notification object on my end).

So that's good and all, but the problem is when I set badge on IOS from firebase console, the badge doesn't go away once I opened the notification. I have been trying to figure out if there's any extra bit I have to add to the above block to programatically decrement the badge counter, but have no luck so far.

So if anyone here can show me how to manage these notification objects properly (especially explaining the nature and lifecycle of these objects -- i.e. which data on which property/method persists or is static within the scope of the notification object) on both Android and IOS, that would be greatly appreciated :)

Upvotes: 2

Views: 6457

Answers (2)

Ray Jonathan
Ray Jonathan

Reputation: 1355

Turns out a simple firebase.notifications().setBadge(0) on root componentDidMount() clears out the badge count whenever the app is opened.

May need to use firebase.notifications().removeAllDeliveredNotifications() or firebase.notifications().cancelAllNotifications() to remove them from notification tray too.

Upvotes: 3

Jay Thummar
Jay Thummar

Reputation: 2299

May be you have to set code for badge while creating a notification 

  this.notificationListener = firebase.notifications().onNotification((notification) => {

     const localNotification = new firebase.notifications.Notification()
                .setNotificationId(notification.notificationId)
                .setTitle(notification.title)
                .setSubtitle(notification.subtitle)
                .setBody(notification.body)
                .setData(notification.data)
                .ios.setBadge(notification.ios.badge);

            firebase.notifications()
                .displayNotification(localNotification)
                .catch(err => console.error(err));
 }

Put this line in code .ios.setBadge(notification.ios.badge); while building a notification and try again

Upvotes: 0

Related Questions