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

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>

to show notification in pop up like whatsApp , you should set your notification channel importance with IMPORTANCE_HIGH

from the official documentation here

Makes a sound and appears as a heads-up notification

int importance = NotificationManager.IMPORTANCE_HIGH;
NotificationChannel channel = new NotificationChannel(CHANNEL_ID, name, importance)

Edit :

for device running lollipop --> Nougat , you are required to set a vibrate or ringtone to make Heads-up work. However, here's a quick hack that doesn't require VIBRATE permission to produce a head-up notification . link

notificationBuilder.setPriority(Notification.PRIORITY_HIGH);
if (Build.VERSION.SDK_INT >= 21) notificationBuilder.setVibrate(new long[0]);

For react-native-firebase v6:

To create a channel add the following lines to MainActivity.java

import android.app.NotificationChannel;
import android.app.NotificationManager;
import android.os.Build;

protected void onCreate(Bundle savedInstanceState) {
// any other code goes here
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            NotificationChannel notificationChannel = new NotificationChannel("500", "MainChannel", NotificationManager.IMPORTANCE_HIGH);
            notificationChannel.setShowBadge(true);
            notificationChannel.setDescription("Test Notifications");
            notificationChannel.enableVibration(true);
            notificationChannel.enableLights(true);
            notificationChannel.setVibrationPattern(new long[]{400, 200, 400});
            //notificationChannel.setLockscreenVisibility(Notification.VISIBILITY_PUBLIC);
            NotificationManager manager = getSystemService(NotificationManager.class);
            manager.createNotificationChannel(notificationChannel);
        }
}

This is the message sent from the server

const message = {
notification: {
    title: data.subject,
    body: data.message,
},
data: {
    id: data.id,
    title: data.subject,
    body: data.message,
    origin: 'chat',
    request: 'test'
},
android: {
    priority: 'high',
    notification: {
        title: data.subject,
        body: data.message,
        sound: 'default',
        priority: 'high',
        channelId: '500'
    }
},
token: "TOKEN"
};
//firebase admin
admin.messaging().send(message)
            .then((response) => {
                // Response is a message ID string.
                console.log('Successfully sent message:', response);
            })
            .catch((error) => {
                console.log('Error sending message:', error);
            });

Found this answer on a GitHub issue thread. All credit goes to them. Tested on android Nougat(v7) and Pie(v9)