React-native firebase foreground notifications are not showing

Question

We are having issues with foreground notifications. We implemented everything (I assume correctly), but for some reason, we are not receiving foreground notifications. When the application is closed or minimized, we are able to receive push notifications in the background. Here is our code for sending notifications:

    async createNotificationListeners() {
    
    const channel = new firebase.notifications.Android.Channel(
      'channelId',
      'Channel Name',
      firebase.notifications.Android.Importance.Max
    ).setDescription('A natural description of the channel');
    firebase.notifications().android.createChannel(channel);

    // the listener returns a function you can use to unsubscribe
    this.unsubscribeFromNotificationListener = firebase.notifications().onNotification((notification) => {
      if (Platform.OS === 'android') {

        const localNotification = new firebase.notifications.Notification({
            sound: 'default',
            show_in_foreground: true,
          })
          .setNotificationId(notification.notificationId)
          .setTitle(notification.title)
          .setSubtitle(notification.subtitle)
          .setBody(notification.body)
          .setData(notification.data)
          .android.setChannelId('channelId') // e.g. the id you chose above
          .android.setSmallIcon('ic_stat_notification') // create this icon in Android Studio
          .android.setColor('#000000') // you can set a color here
          .android.setPriority(firebase.notifications.Android.Priority.High);

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

      } else if (Platform.OS === 'ios') {

        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));

      }
    });
    
    // This listener triggered when notification has been received in foreground
    this.notificationListener = firebase.notifications().onNotification((notification) => {
      const { title, body } = notification;
      this.displayNotification(title, body);
   
    });

    // This listener triggered when app is in backgound and we click, tapped and opened notifiaction
    this.notificationOpenedListener = firebase.notifications().onNotificationOpened((notificationOpen) => {
      
      const { title, body } = notificationOpen.notification;
      this.displayNotification(title, body);
    });

    // This listener triggered when app is closed and we click,tapped and opened notification 
    const notificationOpen = await firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      
      const { title, body } = notificationOpen.notification;
      this.displayNotification(title, body);
    }
  }

  componentWillUnmount() {
    // this is where you unsubscribe
    this.unsubscribeFromNotificationListener();
  }

  
  
  displayNotification(title, body) {
    // we display notification in alert box with title and body
    Alert.alert(
      title, body,
      [
        { text: 'Ok', onPress: () => console.log('ok pressed') },
      ],
      { cancelable: false },
    );
  } 

We have already searched on google and tried many different steps before posting, but unfortunately, we haven't managed to fix this issue. If anyone knows how to do it, it would be highly appreciated

Answer 1

as per React Native Firebase Notification you have to follow this way to get notification on background as well as on foreground.
your notification format from back-end side should be like this

{
    "to":"fpyskooyTr6Ga0OkKoVafK:APA91bHZzVr8OU4og2saA_lyn5Lw3agP6c5EYVLTtNaThjoj3VdHXjyKpuZ-B2jfmX8p9fe24Ig6oVEjuOuI7eTxhRUN78WrJX3-T5lckt6sTGqmXTMS5Ga_DM-Wy6D94rEF2HaRsaPM",
    "collapse_key": "type_a",
    "notification": {
        "body": "Your Order has dsdsdsd accepted",
        "title": "Order has been dsdsdsd"
    },
    "data": {
        "target_screen": "order_detail",
        "wasTapped": "true",
        "text_message": "Your Order has been accepted",
        "id": "238",
        "title": "Order has been Accepted"
    }
}