React-native-firebase: Notification not showing only on foreground android oreo or newer with bundle build

[rynvva]

Issue

Notification not showing only on foreground android oreo or newer with bundle build, it's working fine on Android N or lower (foreground and background) and working on Android O or newer but only on background with bundle build.

Edit:
Sorry just realized, this issue is similar with #988 #1199 #1455 #1518 #1642 , but still not found the solution that works for me, I don't get it why it works on the App using (react-native run-android) but not with the android installdebug/release

---

Environment

• Platform that you're experiencing the issue on:
  
  
  
  • [ ] iOS
  
  
  • [x] Android
  
  
  • [ ] iOS but have not tested behavior on Android
  
  
  • [ ] Android but have not tested behavior on iOS
  
  
  • [ ] Both
  
  
• If known, the version of the platform are you experiencing the issue on:
  
  
  
  • Android API 26 or newer
  
  
• Operating System:
  
  
  
  • [x] MacOS, version: 10.13.6
  
  
  • [ ] Windows, version: N/A
  
  
  • [ ] Other, please specify: N/A
  
  
• Build Tools:
  
  
  
  • Android Studio 3.3
  
  
• **React Native 0.57.8
• React Native Firebase library version:
  
  
  
  • 5.2.1
  
  
• Firebase module(s) you're using that has the issue:
  
  
  
  • [ ] N/A
  
  
  • [ ] Authentication
  
  
  • [ ] Analytics
  
  
  • [ ] Cloud Firestore
  
  
  • [x] Cloud Messaging (FCM)
  
  
  • [ ] Crashlytics
  
  
  • [ ] Dynamic Links
  
  
  • [ ] Functions Callable
  
  
  • [ ] Invites
  
  
  • [ ] Instance ID
  
  
  • [x] Notifications
  
  
  • [ ] Performance Monitoring
  
  
  • [ ] Realtime Database
  
  
  • [ ] Remote Config
  
  
  • [ ] Storage
  
  
• Are you using TypeScript?
  
  
  
  • [x] No
  
  
  • [ ] Yes, version: N/A
  
  
• Are you using Expo, e.g. ExpoKit?
  
  
  
  • [x] No
  
  
  • [ ] Yes, I've _not_ ejected
  
  
  • [ ] Yes, but I have ejected to ExpoKit
  
  
  • [ ] Yes, but I have ejected to vanilla React Native
  
  
  • Expo version: N/A
  
  

---

Think react-native-firebase is great? Please consider supporting the project with any of the below:

• 👉 Donate via Open Collective
• 👉 Follow React Native Firebase and Invertase on Twitter
• 👉 Star this repo on GitHub ⭐️
• 👉 Contribute; see our contributing guide

[atlanteh]

Oh man you just saved my life, I was frustrated that the foreground notifications didn't show up, and coming across your issue, and trying the release build, got it to work. So I can confirm issue happens to me too on debug build. Thanks!

[rynvva]

the code below solve my problem

const channelId = new firebase.notifications.Android.Channel("Default", "Default", firebase.notifications.Android.Importance.High);
    firebase.notifications().android.createChannel(channelId);

    let notification_to_be_displayed = new  firebase.notifications.Notification({
                                                data: notification.data,
                                                sound: 'default',
                                                show_in_foreground: true,
                                                title: notification.title,
                                                body: notification.body,
                                            });

    if(Platform.OS == "android") {
        notification_to_be_displayed
        .android.setPriority(firebase.notifications.Android.Priority.High)
        .android.setChannelId("Default")
        .android.setVibrate(1000);
    }

    firebase.notifications().displayNotification(notification_to_be_displayed);

[ghost]

hi ,
can you please tell me where to add these lines of code.
i am listening notifications as below
this.notificationListener = firebase.notifications().onNotification((notification) => {
console.warn("called..........")
const { title, body } = notification;
this.showAlert(title, body);
});
where to get channel ID?
i am facing same issue from 2 days.

[MssMaster]

m also facing same issue in android , Here is my code to display the notification

this.notificationListener = firebase.notifications().onNotification((notification) => {
      console.log("inside onNotification", notification);
      if (Platform.OS === 'ios') {
        notification.setNotificationId(notification.notificationId)
          .setTitle(notification.title)
          .setBody(notification.body)
          .setSound("bell.mp3")
      } else {
        let { title, body } = notification;
        console.log(title, body);
        const channelId = new firebase.notifications.Android.Channel('test-channel', 'Test Channel', firebase.notifications.Android.Importance.Max)
        .setDescription('My apps channel');


      // Create the channel
      firebase.notifications().android.createChannel(channelId);
        console.log('channelId',channelId);

        const newNotification = new firebase.notifications.Notification()
          .android.setChannelId(channelId)
          .android.setSmallIcon('ic_launcher')
          .android.setAutoCancel(true)
          .android.setCategory(firebase.notifications.Android.Category.Alarm)
          .android.setPriority(firebase.notifications.Android.Priority.Max)
          .setNotificationId(notification.notificationId)
          .setTitle(notification.title)
          .setBody(notification.body)
          .setSound('default')
          .setData(notification._android._notification._data);

          console.log('newNotification',newNotification);
          firebase.notifications().displayNotification(newNotification);
      }
    });

[faizantariq1]

first check your AndroidManifest.xml file.

it should add these:
<service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService"> <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service> <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService"> <intent-filter> <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/> </intent-filter> </service> <receiver android:name="io.invertase.firebase.notifications.RNFirebaseNotificationReceiver"/> <receiver android:enabled="true" android:exported="true" android:name="io.invertase.firebase.notifications.RNFirebaseNotificationsRebootReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED"/> <action android:name="android.intent.action.QUICKBOOT_POWERON"/> <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/> <category android:name="android.intent.category.DEFAULT" /> </intent-filter> </receiver>

and second After android 8 you need to create channel in order to show notification in foreground.In you App.js class in react native. like this

`import React, { Component } from 'react';
import firebase from 'react-native-firebase';
import { Platform } from 'react-native';
class App extends Component {

componentDidMount() {

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

this.notificationListener = 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_launcher') // create this icon in Android Studio
      .android.setColor('#ffffff') // 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));

  }
});

}

componentWillUnmount() {
// this is where you unsubscribe notification listner
this.notificationListener();
}

};`

[TaraSinghDanu]

It was my mistake, the code below solve my problem

const channelId = new firebase.notifications.Android.Channel("Default", "Default", firebase.notifications.Android.Importance.High);
    firebase.notifications().android.createChannel(channelId);

    let notification_to_be_displayed = new  firebase.notifications.Notification({
                                                data: notification.data,
                                                sound: 'default',
                                                show_in_foreground: true,
                                                title: notification.title,
                                                body: notification.body,
                                            });

    if(Platform.OS == "android") {
        notification_to_be_displayed
        .android.setPriority(firebase.notifications.Android.Priority.High)
        .android.setChannelId("Default")
        .android.setVibrate(1000);
    }

    firebase.notifications().displayNotification(notification_to_be_displayed);

Getting
Error: You attempted to use 'firebase.notifications' but this module could not be found. Ensure you have installed and imported the '@react-native-firebase/notifications' package. at firebaseRootModuleProxy (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:179505:11) at createChannel (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:179302:44) at checkAndRequestPermission$ (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:179226:17) at tryCatch (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25701:19) at Generator.invoke [as _invoke] (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25877:24) at Generator.prototype. [as next] (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25744:23) at tryCatch (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25701:19) at invoke (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25777:22) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:25807:13 at tryCallTwo (http://localhost:8081/index.bundle?platform=android&dev=true&minify=false:27100:7)