React-native-fcm: Local Notification not showing when app in foreground

Created on 3 Oct 2016 · 23Comments · Source: evollu/react-native-fcm

What verion of RN and react-native-fcm are you running?
"react-native": "^0.33.0",
"react-native-fcm": "^2.2.1",
What device are you using? (e.g iOS9 emulator, Android 6 device)?
Nexus 5 Real Device and Simulator
Is your app running in foreground, background or not running?
When app is in background i can see a localnotification, not working when in foreground.
(I see on('notification') receiving the notif with local_notification true) but nothing happens.

It doesn't work only on Android, ios seems working great!

Thanks !

Source

lukabers

👍2

Most helpful comment

v 2.3.0 published

evollu on 7 Oct 2016

❤2

All 23 comments

hmm, curious with iOS behavior, so now you see local notifications by using presentNotification? how about scheduled notification?

evollu on 7 Oct 2016

I blocked android notification manually to be consistent with iOS. But if iOS behavior is changed, I will fix android

evollu on 7 Oct 2016

Hi, we are using FCM.presentLocalNotification to display a local notif and on iOS when app is in foreground we see it (maybe iOS 10 changed it). As i said on Android they doesn't work when app is in foreground.

As a suggest i think it is better to show local notification even when app is in foreground because it is something that we manually call and you still have the choice to disable it by checking the Appstate. On the opposite side we can't do nothing to display it....

Thanks.

lukabers on 7 Oct 2016

ok i know what is happening here. In my read me setup for iOS I turned on the local notification for foreground. shouldn't do what without explanation.

completionHandler(UNNotificationPresentationOptionAlert);

evollu on 7 Oct 2016

@lukabers your suggestion make sense for present local notification. But what do you think for remote/delayed notifications?

evollu on 7 Oct 2016

For remote notifications i think you should maintain the actual behaviour, it is perfect at the moment.
About delayed notif i have 2 solutions:
1) Always display them, in this case you can still delete the notif if the app is open.
2) you can hide it if the app is in foreground and if someone want to always display it can send an instant local notification to avoid this behaviour.

However, IMHO the best solution is binding the show/hiding behaviour with a plugin variable like "visibleLocalForeground" or "visibleScheduledForeground" which can be set up at initialization time.

lukabers on 7 Oct 2016

i'm adding a flag attribute to determine if the banner should show up in foreground. it will work for all types of notifications

evollu on 7 Oct 2016

❤1 🎉1

Great Job!

lukabers on 7 Oct 2016

v 2.3.0 published

evollu on 7 Oct 2016

❤2

Tested on Android! It works!!! THANKS!

lukabers on 7 Oct 2016

it does not work for me on android

this is my code to present a local notification

FCM.presentLocalNotification({
      title: notif.title,
      body: notif.body,
      url: notif.url,
      icon: 'ic_notification',
      large_icon: "ic_notification",
      color: '#e34056',
      priority: "high",
      show_in_foreground: true,
    });

it just do the sound of a push notification, but it does not display it

sibelius on 10 Oct 2016

@lukabers could u share some code that u r using to make this work?

sibelius on 10 Oct 2016

👍1

Uhm it's working for me with this code:

FCM.presentLocalNotification({
                    body: "New message, check it out!",
                    priority: "high",
                    title: "Chat",
                    sound: "default",
                    show_in_foreground: true,
                    tag:"CHAT"
                });

This is working on Android and on a iOS 10 Simulator (no tested on a real iOS device)

lukabers on 10 Oct 2016

👎2

@evollu I think I found the bug to show local notification

~~it is in this line:~~
~~https://github.com/evollu/react-native-fcm/blob/master/android/src/main/java/com/evollu/react/fcm/FIRLocalMessagingHelper.java#L158~~

~~I think if(!mIsForeground || bundle.getBoolean("show_in_foreground")){ should come before~~

~~if(mIsForeground){~~

never mind, the logic is correct

sibelius on 12 Oct 2016

@sibelius why does the order matter?

evollu on 12 Oct 2016

fixed adding notification icon inside mipmap resource folder

u can close this now!

tks

sibelius on 12 Oct 2016

This is only working on iOS after 10. Carefull with that !

lukabers on 12 Oct 2016

@lukabers yep...

evollu on 12 Oct 2016

On android if you're using an icon in the drawable folder, set the icon property to drawable/ic_notification as by default it will only look under the mipmap folder

mlabrum on 24 Oct 2016

I'm getting this same issue. @lukabers example (below) displays nothing. This should show a notification banner even when the app is in the foreground, right?

Notification are displaying when the app is in the background, and I'm catching those fine with FCM.on('notification', ....

I'm using react native v0.37.0 and react-native-fcm v2.5.2 and running it on iOS10.

How might I even go about debugging this?

FCM.presentLocalNotification({
  body: "New message, check it out!",
  priority: "high",
  title: "Chat",
  sound: "default",
  show_in_foreground: true,
  tag:"CHAT"
});