React-native-firebase: (ANDROID)Push notification on foreground

Created on 2 Jun 2017  Â·  15Comments  Â·  Source: invertase/react-native-firebase

Hello currently I'm working on react native project and having a problem on firebase push notification

as for the background notification is working but on foreground not working

in the documentation did tell to use onMessage method, in the console I can see it trigger but the notification doesn't appear at the top

can anybody guide me on how to do this

Thanks in advance

Most helpful comment

@irsyadmhdilham This is definitely something you'd have to build into your app then - there's certainly no way for FCM to know what screen you're on in your app and control whether to show it.

react-native-firebase does currently have the ability to display a local notification, so you could listen for the onMessage() and then do the following:

firebase.messaging().createLocalNotification({
  title: "My Notification Title",
  body: "My Notification Message",
  sound: "default",
  priority: "high",
  click_action: "ACTION",
  icon: "ic_launcher",
  show_in_foreground: true,
});

Just be aware, we are considering moving this out of the main react-native-firebase library into a standalone library in the future.

All 15 comments

Hi, can we see the push message data/object you're sending please

@Ehesp Yeah sure

I trigger via Firebase Cloud Functions and here is the message data/object

payload = {
notification: {
title: 'Wheeller',
body: 'New bill for :' + platNo,
sound: 'default',
icon: 'ic_notification',
color: '#FFFFFF'
}
};

You're missing a property on the payload. On my phone at the moment but I
believe it goes with the payload object.

show_in_foreground: true,

On 2 Jun 2017 6:22 am, "Lakau" notifications@github.com wrote:

@Ehesp https://github.com/ehesp Yeah sure

i trigger via Firebase Cloud Functions and here is the message data/object

payload = {
notification: {
title: 'Wheeller',
body: 'New bill for :' + platNo,
sound: 'default',
icon: 'ic_notification',
color: '#FFFFFF'
}
};

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/invertase/react-native-firebase/issues/140#issuecomment-305692473,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAzZXi_h1AUkrOBF_lLVeE3pbNaHtWvRks5r_5wBgaJpZM4NtqJI
.

@Ehesp I've tried just now

payload = {
notification: {
title: 'Wheeller',
body: 'New bill for :' + platNo,
sound: 'default',
icon: 'ic_notification',
color: '#FFFFFF',
show_in_foreground: true
}
};
still not working

this is the error message in cloud functions log
Error: Messaging payload contains an invalid value for the "notification.show_in_foreground" property. Values must be strings

@irsyadmhdilham all option values must be a string, so try: show_in_foreground: "true"

@Salakar I've tried it

same, still not working :(

Did it error though? Whats not working now?

@Ehesp in console and Cloud Functions log succeed = notification success

but in the foreground the notification doesn't appear at status bar

@irsyadmhdilham What exactly are you expecting to happen?

With an app in the foreground, it is technically up to the app to decide how to display the notification, as the OS (neither iOS or Android) won't display a popup notification for apps in the foreground, as the standard notification would normally get in the way of the users experience. The app can then choose whether to just show a numerical indicator, or some other form of notification within the app itself.

@chrisbianca hello

what I want is while the user in the main screen notification can still pop up in order to notify the user there's a new message in the child screen

For an example like Whatsapp app. While the user in the main screen the notification can still popping to say that there's a new message coming, but when the user in that specific screen then the notification will not appear

@irsyadmhdilham This is definitely something you'd have to build into your app then - there's certainly no way for FCM to know what screen you're on in your app and control whether to show it.

react-native-firebase does currently have the ability to display a local notification, so you could listen for the onMessage() and then do the following:

firebase.messaging().createLocalNotification({
  title: "My Notification Title",
  body: "My Notification Message",
  sound: "default",
  priority: "high",
  click_action: "ACTION",
  icon: "ic_launcher",
  show_in_foreground: true,
});

Just be aware, we are considering moving this out of the main react-native-firebase library into a standalone library in the future.

@chrisbianca Okay thank you for the solution, you really help me a lot

Sincerely

No problem, happy to help.

Same will work on iOS. Tried same code but in console I am getting notification payload. But its not showing in foreground. When app is running in background its showing properly.

+1

Was this page helpful?
0 / 5 - 0 ratings