React native firebase notification heads up are not showing in some devices

Question

hi i am using react native firebase for notifications i succeed integrating it and notifications are coming for both platform but for android heads up are not coming when app is in either foreground or background. I read all of the issues regarding this but did't got any clue.

app environment:

• "react": "16.3.1",
• "react-native": "0.55.3",
• "react-native-firebase": "4.2.0",
• firebase cloud messaging tab in console for sending message -- tried with advanced options too

so when app is in foreground app need to handle notification that's how i am doing:

componentDidMount() {
    this.checkFirebase();
  }

  registerFbCloudMessagingListener = () => {
    firebase.notifications().onNotification(notification => {
      if (Platform.OS === "android") {
        notification.android.setChannelId("forgroundnotification");
      }
      firebase.notifications().displayNotification(notification);
    });
  };
  async checkFirebase() {
    const enabled = await firebase.messaging().hasPermission();
    if (enabled) {
      // user has permissions
      this.registerFbCloudMessagingListener();
    } else {
      // user doesn't have permission
      this.requestFbPermission();
    }
  }

  async requestFbPermission() {
    try {
      let permission = await firebase.messaging().requestPermission();
      if (permission) {
        this.checkFirebase();
      }
      // User has authorised
    } catch (error) {
      // User has rejected permissions
    }
  }

start i was using mi device in that it was showing notification in only app tray then i checked in settings > my_app > notifications > show floating notification turned on then heads up started coming in that device but then i tried with one plus device in that it's not showing.

i checked all of this issues

• https://github.com/invertase/react-native-firebase/issues/500
• https://github.com/invertase/react-native-firebase/issues/357
• https://github.com/invertase/react-native-firebase/issues/595

In oreo its not showing i think. because mi is having android N . Please help !!! Advance thanks.

Answer 1

Here's how did I crack it.

First of all pushing notification from firebase console won't show notification on android. This thing I got it from the discord channel. There I've asked this question and someone suggested to setup own server like trigger notification from your backend server using firebase API and then it started working.

Also, you have to set up the channel and subscribe to that as well on android to make it work.

Here is my updated code.

Note this code is based on

"react-native-firebase": "4.2.0"

"react": "16.3.1"

"react-native": "0.55.3"

There are chances lot methods get changed in latest version and code I am giving just for reference.

Following Steps I did follow that time:

 async checkFirebase() {
    const enabled = await firebase.messaging().hasPermission();
    if (enabled) {
      // user has permissions
      this.registerFbCloudMessagingListener();
    } else {
      // user doesn't have permission
      this.requestFbPermission();
    }
  }

async requestFbPermission() {
    try {
      let permission = await firebase.messaging().requestPermission();
      if (permission) {
        this.checkFirebase();
      }
      // User has authorised
    } catch (error) {
      // User has rejected permissions
    }
  }

const channelConfig = {
  channelId: "channelId",
  channelName: "Channel Name"
};

1. Subscribe to topic
2. Create a Channel and subscribe to it.
3. Check for the permissions and request for one if not there.

 componentDidMount() {
    firebase.messaging().subscribeToTopic("test");
    const channel = new firebase.notifications.Android.Channel(
      channelConfig.channelId,
      channelConfig.channelName,
      firebase.notifications.Android.Importance.Max
    ).setDescription("A natural description of the channel");
    firebase.notifications().android.createChannel(channel);
    this.checkFirebase();
  }