Notification not showing up in foreground after triggering displayNotification() (Android) #988

leonchabbey · 2018-04-17T10:08:22Z

Issue

When the app is in foreground, I'd like to show possible remote notifications.
So I use new firebase.notifications.Notification() to create a new notification when a remote notification has been received and then trigger firebase.notifications().displayNotification(); to display it as it says in the docs.
It works well on iOS but not on Android (doesn't even show up in the status bar).

componentDidMount() {
    this.notificationListener = firebase.notifications().onNotification(this._onNotification);
}

(...)

_onNotification(notif) {
    const { appState } = this.state;
    console.log(notif);

    const ts = moment().format('x');

    if (appState === "active") {
      const localNotif = new firebase.notifications.Notification()
        .setNotificationId(ts)
        .setTitle(notif._title)
        .setBody(notif._body)
        .setData(notif._data);;

      if (Platform.OS === "android") {
        localNotif.android.setChannelId(CHANNEL_ID);
      }

      firebase.notifications().displayNotification(localNotif);
    }
  }

Environment

Application Target Platform: iOS, Android
Development Operating System: macOS High Sierra
Build Tools:

Xcode: 9.3, iOS: 11.3
Android Studio: 3.1.1, Android SDK: 26.0.0

React Native version: 0.55.2
RNFirebase Version: 4.0.3
Firebase Module: database, auth, messaging, notifications

The text was updated successfully, but these errors were encountered:

mitchellbutler · 2018-04-20T18:00:35Z

It seems as if the requirements for displaying a foreground notification are stricter on Android. I was stuck on this same issue (notifications showing only in the background) and adding sound: 'default' solved it for me.

Here is my configuration:

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

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

      }
    });

    // ...
  }

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

  // ...
};

chrisbianca · 2018-04-24T16:17:35Z

Yes, Android controls whether these notifications are shown in the foreground based on the fields that you've defined. Be aware that this may differ across different versions of Android so it's worth consulting the official documentation to find out what you need to include: https://developer.android.com/guide/topics/ui/notifiers/notifications.html

yashojha87 · 2018-05-31T18:45:53Z

@mitchellbutler you're solution seems that it should be working on first go. but I am still not been able to show notifications when app is foreground. it is showing in console though.

mitchellbutler · 2018-06-01T13:09:21Z

@yashojha19, I ran into a few more issues after posting the config above. I've just updated it now with a clearer example that I can confirm is working on iOS and Android. In combination with the official docs it should be enough to get things working.

ezekel · 2018-06-10T17:17:02Z

@mitchellbutler can I ask what is the purpose of this code


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

suppose I want to send notification via firebase console for testing do I still need that code to be declared ?

Thank you in advance.

mitchellbutler · 2018-06-13T13:54:44Z

@ezekel, there is information regarding Android channels here in the official documentation.

forestPump89 · 2018-06-27T13:07:50Z

@mitchellbutler , Hey there and thanks for helping new developers, I am trying out your code for remote push notifications . Foreground works just fine I added a console.log to verify it. But when I am on the background and I tap on the notification my app starts and nothing happens,no Console,log like expected.I am aware of the chanelId required by Android. I set the chanel Id on firebase console the same string as the one I declared on your hardcoded setup.Any ideas how i can fix this?

mitchellbutler · 2018-06-27T16:25:14Z

@tsavlis, it sounds like you have notifications displaying properly and you want to do something when you tap one. In that case you need to read the documentation on onNotificationOpened or getInitialNotification here at the bottom of the page.

This is unrelated to the issue mentioned above and I don't want to pollute the issues for this project. If you read through the documentation and those functions are not behaving properly then I recommend searching through existing issues and opening a new one if none of them are relevant.

forestPump89 · 2018-06-27T16:52:19Z

I have alrdy made a new topic https://stackoverflow.com/questions/51061999/react-native-firebase-starter-kit-push-notifcactions-not-working I just searched for solution at my problem and found your thread. Still cant figure out what I am doing wrong , I have alrdy read and copied the instructions you linked me 2018-06-27 7:25 GMT-09:00 Mitchell Butler <[email protected]>:

…

@tsavlis <https://github.com/tsavlis>, it sounds like you have notifications displaying properly and you want to do something when you tap one. In that case you need to read the documentation on onNotificationOpened or getInitialNotification here <https://rnfirebase.io/docs/v4.2.x/notifications/receiving-notifications#4> -Listen-for-a-Notification-being-opened). This is unrelated to the issue mentioned above and I don't want to pollute the issues for this project. If you read through the documentation and those functions are not behaving properly then I recommend searching through existing issues and opening a new one if none of them are relevant. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#988 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ATdcqgrYOEPg1jLJ3g5zaxbeFHHpk-2Lks5uA7HugaJpZM4TYAq2> .

leonchabbey · 2018-07-17T13:18:58Z

Sorry I haven't come back here earlier but in my case adding a .setSound("default") made the local notification show in foreground on Android as well as on iOS.

const localNotif = new firebase.notifications.Notification()
        .setNotificationId(notif.notificationId)
        .setTitle(notif.title)
        .setBody(notif.body)
        .setSound("default");

if (Platform.OS === "android")
      localNotif
         .android.setChannelId(CHANNEL_ID)
         .android.setSmallIcon('app_icon');

MahmoudShaeer · 2018-07-19T19:13:13Z

@mitchellbutler i do this but get error could not send notifications ? :\
on android

aseemupadhyay · 2018-09-28T09:08:56Z

@mitchellbutler Hi, i did try your snippet but apparently, it is giving me an error could not send notification. Is there anything else that is needed to be done?

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

firebase.notifications().onNotification(notification => {
  console.log(notification);
  const localNotification = new firebase.notifications.Notification({
    show_in_foreground: true
  })
    .setNotificationId(notification.notificationId)
    .setTitle(notification.title)
    .setSubtitle(notification.subtitle)
    .setBody(notification.body)
    .setData(notification.data)
    .setSound('default')
    .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);
});`

EDIT

so, apparently, you need a logo (required). otherwise your notification won't render .android.setSmallIcon("ic_stat_notification") is required and must be fulfilled

StijnCoolen · 2018-11-13T15:40:06Z

@mitchellbutler can you share your complete implementation? I can't get the notifications to show in the foreground. Thanks!

miguelnfuertesc · 2018-12-13T21:48:10Z

I disabled the sound from Firebase Cloud Mesagging, then it works! Thanks @mitchellbutler

cuongtora1996 · 2019-03-21T08:35:16Z

@mitchellbutler work like a charm. You saved my day. Thanks

nj-kore · 2019-05-05T17:18:21Z

I changed
firebase.notifications.Android.Importance.Max
To
firebase.notifications.Android.Importance.High
when creating the channel and it worked for me.

bsor-dev · 2020-07-03T07:06:37Z

It seems as if the requirements for displaying a foreground notification are stricter on Android. I was stuck on this same issue (notifications showing only in the background) and adding sound: 'default' solved it for me.

Here is my configuration:
...........

How to do this set up in v7? I confuse in new docs now

leonchabbey changed the title ~~Notification not showing up in foreground after triggering display() (Android)~~ Notification not showing up in foreground after triggering displayNotification() (Android) Apr 17, 2018

chrisbianca closed this as completed Apr 24, 2018

This was referenced Jul 21, 2018

Android - Error: AndroidNotification: Missing required channelId property - Local Notifications #936

Closed

Not getting notifications when app is in background #1319

Closed

onNotificationOpened not working on Android (background/foreground) #1272

Closed

reyn-nova mentioned this issue Jan 31, 2019

Notification not showing only on foreground android oreo or newer with bundle build #1873

Closed

29 tasks

faizantariq1 mentioned this issue Dec 5, 2019

Push Notification not showing on "foreground in android #2121

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Notification not showing up in foreground after triggering displayNotification() (Android) #988

Notification not showing up in foreground after triggering displayNotification() (Android) #988

leonchabbey commented Apr 17, 2018

mitchellbutler commented Apr 20, 2018 •

edited

Loading

chrisbianca commented Apr 24, 2018

yashojha87 commented May 31, 2018

mitchellbutler commented Jun 1, 2018

ezekel commented Jun 10, 2018

mitchellbutler commented Jun 13, 2018

forestPump89 commented Jun 27, 2018

mitchellbutler commented Jun 27, 2018 •

edited

Loading

forestPump89 commented Jun 27, 2018 via email

leonchabbey commented Jul 17, 2018

MahmoudShaeer commented Jul 19, 2018 •

edited

Loading

aseemupadhyay commented Sep 28, 2018 •

edited

Loading

StijnCoolen commented Nov 13, 2018

miguelnfuertesc commented Dec 13, 2018

cuongtora1996 commented Mar 21, 2019

nj-kore commented May 5, 2019

bsor-dev commented Jul 3, 2020

Notification not showing up in foreground after triggering displayNotification() (Android) #988

Notification not showing up in foreground after triggering displayNotification() (Android) #988

Comments

leonchabbey commented Apr 17, 2018

Issue

Environment

mitchellbutler commented Apr 20, 2018 • edited Loading

chrisbianca commented Apr 24, 2018

yashojha87 commented May 31, 2018

mitchellbutler commented Jun 1, 2018

ezekel commented Jun 10, 2018

mitchellbutler commented Jun 13, 2018

forestPump89 commented Jun 27, 2018

mitchellbutler commented Jun 27, 2018 • edited Loading

forestPump89 commented Jun 27, 2018 via email

leonchabbey commented Jul 17, 2018

MahmoudShaeer commented Jul 19, 2018 • edited Loading

aseemupadhyay commented Sep 28, 2018 • edited Loading

StijnCoolen commented Nov 13, 2018

miguelnfuertesc commented Dec 13, 2018

cuongtora1996 commented Mar 21, 2019

nj-kore commented May 5, 2019

bsor-dev commented Jul 3, 2020

mitchellbutler commented Apr 20, 2018 •

edited

Loading

mitchellbutler commented Jun 27, 2018 •

edited

Loading

MahmoudShaeer commented Jul 19, 2018 •

edited

Loading

aseemupadhyay commented Sep 28, 2018 •

edited

Loading