Receiving notifications from within a react component doesn't work

[danmdinu]

Hi,

I'm trying to receive notifications while the app is in foreground from within my react component following the guide here: https://github.com/invertase/react-native-firebase-docs/blob/master/docs/notifications/receiving-notifications.md

However, none of the listeners are ever called when I send a test notification from the firebase console.

It works fine if I register the listener outside a react component, and the notification is successfully received.

This works:
`export const initNotifications = async () => {
if (!firebase.messaging().hasPermission()) {
return;
}
registerNotificationsCallbacks()
registerTokenRefresh()
}

const registerNotificationsCallbacks = () => {
firebase.notifications().onNotification(notification => {
alert('Notification received!', notification)
});
}`

This doesn't work:
async componentWillMount() {
await asyncOperation(); // not important
this.notificationDisplayedListener();
this.notificationListener();
}
componentDidMount() {
this.notificationDisplayedListener = firebase.notifications().onNotificationDisplayed((notification) => {
// Process your notification as required
// ANDROID: Remote notifications do not contain the channel ID. You will have to specify this manually if you'd like to re-display the notification.
});
this.notificationListener = firebase.notifications().onNotification((notification) => {
// Process your notification as required
console.log(notification)
alert(notification)
});
}

The notification which I'm sending from the firebase console looks like this

{ "data" : { "Nick" : "Mario", "Room" : "PortugalVSDenmark" } } }

I've tried also including the notification but it doesn't make any difference. Still, receiving a notification from outside the react componnent works while inside the react component doesn't.

What else can I try?

Thanks!