Unable to get push notification from fcm in react native

Question

I am getting push notification from firebase but when I sent it using the "https://fcm.googleapis.com/fcm/send" on android in react native using react-native-firebase library, I do not get any notification on android. However I am able to display the message on the console using "onMessage" method. But how I can get notification in the notification bar. My message is data-only therefore I also created bgMessaging.js for handling background message and here also I am able to display message on console but not on notification.

How I can fix this issue and display the message on the notification bar with data-only messages.

Below is my code

bgMessaging.js

import firebase from 'react-native-firebase';
// Optional flow type
import type { RemoteMessage } from 'react-native-firebase';

export default async (message: RemoteMessage) => {
    // handle your message
    console.log("message")
    console.log(message)

    // senName = message.data.senderName;
    // senUid = message.data.senderUid;
    // const notification = new 
    // firebase.notifications.Notification()
    //     .setNotificationId('notificationId')
    //     .setTitle(message.data.title)
    //     .setBody(message.data.body)
    //     .android.setChannelId('channel_id_foreground')
    //     .android.setSmallIcon('ic_launcher');
    // firebase.notifications().displayNotification(notification);

    return Promise.resolve();
}

index.js(following lines added at the end)

AppRegistry.registerHeadlessTask('RNFirebaseBackgroundMessage', () => bgMessaging); // <-- Add this line

App.js

componentDidMount() {
    this.messageListener = firebase.messaging().onMessage((message: RemoteMessage) => {
      //process data message
      console.log(message);
    });
 }

AndroidManifest.xml

<service android:name="io.invertase.firebase.messaging.RNFirebaseBackgroundMessagingService" />
      <service android:name="io.invertase.firebase.messaging.RNFirebaseMessagingService">
        <intent-filter>
          <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
      </service>  
      <service android:name="io.invertase.firebase.messaging.RNFirebaseInstanceIdService">
        <intent-filter>
          <action android:name="com.google.firebase.INSTANCE_ID_EVENT"/>
        </intent-filter>
      </service>
      <service android:name=".MyTaskService" />

Akramz · Accepted Answer · 2019-02-16 18:02:20Z

I've had the exact same problem, I've received the data-only messages but couldn't display the notification.

I found out that in order to display notifications for 8+ Android Version you need to create an Android Channel first, Code:

// Create Channel first.
  const channel = new firebase.notifications.Android.Channel(
    "general-channel",
    "General Notifications",
    firebase.notifications.Android.Importance.Default
  ).setDescription("General Notifications");
  firebase.notifications().android.createChannel(channel);

  // Build your notification
  const notification = new firebase.notifications.Notification()
    .setTitle(...)
    .setBody(...)
    .setNotificationId("notification-action")
    .setSound("default")
    .setData(message.data)
    .android.setChannelId("general-channel")
    .android.setPriority(firebase.notifications.Android.Priority.Max);

  // Display the notification (with debug)
  firebase
    .notifications()
    .displayNotification(notification)
    .catch(err => console.error(err));

vignesh · Accepted Answer · 2018-12-14 18:03:28Z

0

You can also do things when the notification is displayed:

firebase.notifications().onNotificationDisplayed(notification => { ... })

Or when it is received by the phone:

firebase.notifications().onNotification(notification => { ... })

If you want to get the notification that triggered the app opening, use the following:

firebase.notifications().getInitialNotification().then(notification => { ... })

refer the document here https://rnfirebase.io/docs/v4.3.x/notifications/receiving-notifications

answered Dec 14, 2018 at 18:03

vignesh

2,5261 gold badge16 silver badges22 bronze badges

Comments

prospegto · Accepted Answer · 2019-01-25 11:18:02Z

0

App.js

async componentDidMount() {
    this.getToken();
    this.createNotificationListeners();
}

async createNotificationListeners() {
this.notificationListener = firebase.notifications().onNotification((notification) => {
            const { title, body, data } = notification;
            notification
                .android.setChannelId('channel')
                .android.setSmallIcon('icon')
                .android.setAutoCancel(true)
                .android.setPriority(firebase.notifications.Android.Priority.Max)
                .setSound('default');

            firebase.notifications().displayNotification(notification);
        });
}

answered Jan 25, 2019 at 11:18

prospegto

4194 silver badges5 bronze badges

Comments

muhammad ripqi · Accepted Answer · 2021-09-15 18:26:09Z

Firebase v6 will not show notification when the app is in foreground state refer to this: https://rnfirebase.io/messaging/usage

You can use 3rd party libraries like react-native-push-notification. In react-native-push-notification, you need to create a channel first. Please follow this documentation https://github.com/zo0r/react-native-push-notification#channel-management-android

After the channel created, include it when you want to show the notification. Like This:

import messaging from '@react-native-firebase/messaging';
...
messaging().onMessage(async (remoteMessage) => {
      console.log('Auth.js / Message handled in app!', remoteMessage)
      PushNotification.localNotification({
        message: remoteMessage.notification.body,
        title: remoteMessage.notification.title,
        bigPictureUrl: remoteMessage.notification.android.imageUrl,
        smallIcon: remoteMessage.notification.android.imageUrl,
        channelId: 'channel-id',
      });
    });

Collectives™ on Stack Overflow

Unable to get push notification from fcm in react native

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related