React-native-push-notification: Among two notifications android only display one single notification

[akiladevinda]

Question

My scenario is on my app, once I do the successful payment I received two FCM notifications same time from my back end.
But my problem is my device only show the last FCM message which I got,

Once I debug my application it shows two messages have arrived as Foreground but only shows one popup.

My codebase

fcmService.registerAppWithFCM();
    fcmService.register(onRegister, onNotification, onOpenNotificaion);
    localNotificationService.configure(
      onRegister,
      onNotification,
      onOpenNotificaion,
      '327977904469',
    );

    if (Platform.OS == 'android') {
      localNotificationService.createChannelAndroid('wapp');
    }

    function onRegister(token) {
      console.log(
        '🚀 ~ file: Router.js ~ line 302 ~ onRegister ~ token',
        token,
      );
      saveFCMToken(token);
    }

    function onNotification(notify) {
      console.log(
        '🚀 ~ file: Router.js ~ line 309 ~ onNotification ~ notify',
        notify,
      );

      const options = {
        soundName: 'default',
        playSound: true,
      };
      localNotificationService.showNotification(
        0,
        notify.title,
        notify.body,
        notify,
        options,
        'wapp',
      );
    }

Helper File

import PushNotification from 'react-native-push-notification';
import PushNotificationIOS from '@react-native-community/push-notification-ios';
import {Platform} from 'react-native';

class NotificationHelper {
  configure = (onRegister, onNotification, onOpenNotification, senderID) => {
    PushNotification.configure({
      onRegister: function (token) {
        onRegister(token.token);
        console.log('[NotificationManager] onRegister token:', token.token);
      },

      onNotification: function (notification) {
        console.log('[NotificationManager] onNotification:', notification);

        if (Platform.OS === 'ios') {
          if (notification.data.openedInForeground) {
            notification.userInteraction = true;
          }
        }

        if (notification.userInteraction) {
          onOpenNotification(notification);
        } else {
          onNotification(notification);
        }

        if (Platform.OS === 'android') {
          notification.userInteraction = true;
        }

        // Only call callback if not from foreground
        if (Platform.OS === 'ios') {
          if (!notification.data.openedInForeground) {
            notification.finish('backgroundFetchResultNoData');
          }
        } else {
          notification.finish('backgroundFetchResultNoData');
        }
      },

      // ANDROID ONLY: GCM or FCM Sender ID (product_number) (optional - not required for local notifications, but is need to receive remote push notifications)
      senderID: senderID,
    });
  };

  unregister = () => {
    PushNotification.unregister();
  };

  createChannelAndroid = (channel) => {
    PushNotification.createChannel(
      {
        channelId: channel, // (required)
        channelName: 'My channel', // (required)
        channelDescription: 'A channel to categorise your notifications', // (optional) default: undefined.
        playSound: false, // (optional) default: true
        soundName: 'default', // (optional) See `soundName` parameter of `localNotification` function
        importance: 4, // (optional) default: 4. Int value of the Android notification importance
        vibrate: true, // (optional) default: true. Creates the default vibration patten if true.
      },
      (created) => console.log(`createChannel returned '${created}'`), // (optional) callback returns whether the channel was created, false means it already existed.
    );
  };

  showNotification = (id, title, message, data = {}, options = {}, channel) => {
    console.log('SHOWWWWWW');
    PushNotification.localNotification({
      /* Android Only Properties */
      ...this.buildAndroidNotification(
        id,
        title,
        message,
        data,
        options,
        channel,
      ),
      /* iOS and Android properties */
      ...this.buildIOSNotification(id, title, message, data, options),
      /* iOS and Android properties */
      title: title || '',
      message: message || '',
      playSound: options.playSound || false,
      soundName: options.soundName || 'default',
      userInteraction: false, // BOOLEAN: If the notification was opened by the user from the notification area or not
    });
  };

  buildAndroidNotification = (
    id,
    title,
    message,
    data = {},
    options = {},
    channel,
  ) => {
    return {
      channelId: channel,
      id: id,
      autoCancel: true,
      largeIcon: options.largeIcon || 'ic_launcher',
      smallIcon: options.smallIcon || 'ic_launcher',
      bigText: message || '',
      subText: title || '',
      vibrate: options.vibrate || true,
      vibration: options.vibration || 300,
      priority: options.priority || 'high',
      importance: options.importance || 'high', // (optional) set notification importance, default: high,
      data: data,
    };
  };

  buildIOSNotification = (id, title, message, data = {}, options = {}) => {
    return {
      alertAction: options.alertAction || 'view',
      category: options.category || '',
      userInfo: {
        id: id,
        item: data,
      },
    };
  };

  cancelAllLocalNotifications = () => {
    if (Platform.OS === 'ios') {
      PushNotificationIOS.removeAllDeliveredNotifications();
    } else {
      PushNotification.cancelAllLocalNotifications();
    }
  };

  removeDeliveredNotificationByID = (notificationId) => {
    console.log(
      '[LocalNotificationService] removeDeliveredNotificationByID: ',
      notificationId,
    );
    PushNotification.cancelLocalNotifications({id: `${notificationId}`});
  };
}

export const localNotificationService = new NotificationHelper();

[Dallas62]

Hi @akiladevinda
I suggest you to change the ID of the notification. You use the same notification id, which can lead to notification replacement.
Regards

[akiladevinda]

@Dallas62 exactly that was the issue. Thanks for your help

[JoelOnGithub]

@akiladevinda , can you explain which ID you had to replace? We face exactly the same issue.

[akiladevinda]

@JoelOnGithub

 localNotificationService.showNotification(
        0,  // You need to replace this with random generate number - not hardcode
        notify.title,
        notify.body,
        notify,
        options,
        'wapp',
      );

[JoelOnGithub]

I am confused though, this seems like a local notification, and not one sent through firebase?

[akiladevinda]

@JoelOnGithub check all files posted here.

Here I'm passing notification data to local notification service file to show the popup banner

[JoelOnGithub]

We are not doing that, because a banner shows up automatically after we send a push notification from server. But maybe we should start doing that. Thanks for your quick replies!