Make push notifications appear as pop up when app is on background with firebase

Question

I am setting up push notifications with my react native app to android users using Firebase Cloud Messaging. So far I have followed mostly this tutorial. I managed to make push notifications to show on lock screen, and deal with them when the app is on foreground. When app is on background, though, I can't manage to show notification as a pop up. It appear on the notification tray, but it does not show a pop up, like gmail's or whatsapp's notifications do.

I believe my problem is that I am not sending the correct params with the message. I am using firebase console, so it's not very flexible. How can I config (programmatically) an notification to show as pop up upon receival?

EDIT:

Setting Up notification Channel works for newer android devices - tested on Android 8.1 (API level 27).

On older devices - testing on Android 6.0 (API level 23) -, heads up notifications still doesn't appear. I am sending the following message using aws sns console:

{ 
  priority: 'high',
  content_available: true,
  notification: { 
     title: 'hello',
     body: 'Just test',
     android_channel_id: 'test-channel',
     sound: 'default' 
  },
  data: { title: 'title', body: 'body', sound: 'default' }
}

I also sent messages using Firebase console setting Priority High and Sound Enabled, with and without Android Channel Id. None of that worked. The notification arrives silently on tray bar. This discussion shows the same problems, but the solution one person pointed did not work for me. I didn't go through editing the react-native library code a lot. I tried section Problems with older Android version (Foreground), it made heads up appear on foreground, but not on background, which is the intended behaviour here.

Furthermore, is seems that this is an unresolved issue to quite a few people using this react native package (github issue, github issue).

So, I think I should reformulate my question. For Android 7.1 or lower(testing on 6.0):

1. Is setting priority='high' and notification.sound='default' supposed to be enough to show heads up notification? (From my research it should be)

2. Do I need to make any further configuration on my application code to go from notification arriving silently on tray bar to it appering as a heads up?

Answer 1

Thank you @ismailalaoui for contributing to this question. I wasn't able to make notifications to shows as heads up when received by System Tray, so I had to go with a work around. I will show how I did it with react-native-firebase.

For new android devices, you should create a notification channel. Add the following on your App.js

componentDidMount(){
  ...
  const channel = new firebase.notifications.Android.Channel('test-channel', 'Test Channel', firebase.notifications.Android.Importance.Max).setDescription('My apps test channel'); //add this line

  firebase.notifications().android.createChannel(channel); //add this line
}

For older devices, I had to go with a work around. Instead of using notification messages, I used data messages, so you can listen to then on the background. See item 4.

First create a new file bgMessaging.js:

import firebase from 'react-native-firebase';

export default async (message) => {
  // handle your message
  const notification = new firebase.notifications.Notification()
  .setNotificationId(message.messageId)
  .setTitle(message.data.title)
  .setBody(message.data.body)
  .android.setChannelId('test-channel')
  .android.setSmallIcon('ic_launcher')
  .android.setPriority(firebase.notifications.Android.Priority.Max)
  .setSound('default');

  await firebase.notifications().displayNotification(notification);
  console.log({message})
  return Promise.resolve();
}

On your index.js file, add:

import bgMessaging from './src/bgMessaging'; // <-- Import the file you just created

...

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); 

react-native-firebase is using Headless JS to run the javascript code you defined in bgMessaging. According to the docs you need to add the service to AndroidManifest.xml. On android/app/src/main/AndroidManifest.xml add:

<application>
  ...
  <service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" /> <!--Add this-->
  ...
</application>