Unable to get push notification from fcm in react native - 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" />

Answer 1

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));

Answer 2

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

Answer 3

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);
});
}

Answer 4

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',
});
});