React-native-firebase: [Question] Is it possible to show heads up notifications in all app states? (killed, background,foreground)

Created on 25 Aug 2017  路  8Comments  路  Source: invertase/react-native-firebase

Hi @Salakar @chrisbianca

I'm currently using react-native-fcm but would like to migrate to this library for notifications among all the other great features available (nice work btw!!). However I have a question about the ability to show heads up style notifications in all app states:

Currently in react-native-fcm (using a nexus 5 API 23) I am unable to show heads up notifications when the app is killed or in the background if I'm using a notification + data payload. I only receive system tray/status bar notifications in these two states.

If I swap to a data only payload I get heads up notifications in background and foreground but no notifications on killed. I understand that is because a notification payload is necessary for a killed app.

So can someone let me know if it possible to get heads up style notifications in all app states (killed, background,foreground) using this library? I'm really looking to emulate a whatsApp like style for notifications and they are able to show heads up for all states.

PS. if I use a redmi Note 4 I get heads up notifications in all cases, which is interesting. I guess its because the rom is more of an IOS style?

Thanks!

Environment

  1. Target Platform - Android + IOS
  2. Development Operating System (e.g. macOS Sierra, Windows 10): windows 10
  3. React Native version (e.g. 0.45.1): 0.44
Android Messaging

Most helpful comment

How do you display a heads-up notification using local notifications?

All 8 comments

@rtman Can you explain exactly what you mean by a 'heads up' style notifications?

Hey @chrisbianca

I'm referring to these types of notifications.

Headsup

I ended up figuring how to get these style notifications in all app states with react-native-fcm. I can use fetch to send a custom payload to the fcm server that the library recognizes upon receiving and builds a local notification. I couldn't get heads up notifications in all app states using admin.messaging

I would prefer to use react-native-firebase if possible though.

_Sent from my Google Nexus 5 using FastHub_

@rtman Have you tried your new approach for react-native-fcm with react-native-firebase?

The custom payload you mention is something that is a bit of a hot topic here at Invertase. It's only supported on Android and goes against the general approach we have of keeping to the core FCM functionality, but we do currently have support.

Messaging as a whole is an area we want to spend some time with - it's the most complicated to set up and explain, and we're trying to look at ways to smooth this experience.

@chrisbianca

I haven't tried this in react-native-firebase yet, good to know that there is support for it in the package! I will give this a go soonish, I need a bit of time to do other things first tho as I got caught up getting react-native-fcm working properly.

Yea it's been quite difficult to understand how all this messaging works, it would be better to use a package like react-native-firebase as the documentation is much better and you guys are active. Maybe in the end there is a better cross platform way to do this, but as of now I have only found this way to enable heads up notifications in all app states for android.

I did hear from another user that you can get admin.messaging to accept a custom payload if you JSON.stringify the nested object within the data object of the payload. It's possible admin.messaging can get the same functionality then, but i haven't tested it.

I'm going to close this issue off as I think you'll be able to do what you want with react-native-firebase. As an aside, we are going to dedicate some time to FCM support in the near future and try to simplify how it all works!

How do you display a heads-up notification using local notifications?

+1

hi bro go to settings and active the notification access for your app

Was this page helpful?
0 / 5 - 0 ratings

Related issues

alizahid picture alizahid  路  3Comments

rtman picture rtman  路  3Comments

romreed picture romreed  路  3Comments

mahyarr picture mahyarr  路  3Comments

ODelibalta picture ODelibalta  路  3Comments