React-native-firebase: The event "firebase.messaging().onMessage" is not called on a real device

[sturmenta]

Issue

In the background the notification arrives correctly, but if you have the application open and you are using a real device, the event "firebase.messaging().OnMessage" is not called

firebase.messaging().onMessage(() => {
    alert('Notification received!');
});

Environment

1. Application Target Platform: Both

2. Development Operating System: macOS Sierra

3. React Native version: 0.56.0

4. React Native Firebase version: 4.3.8

5. Firebase Module: Cloud messaging

[nezaidu]

anyone? :(

[dackom]

I also have problem with this. Tried to put onMessage() listener in App.js and in some other components, but it doesnt trigger in foreground or background. What's more, I get this warning in console:

Sending notifications_notification_received with no listeners registered.

[amirasaran]

+1

[ghost]

+1

[alexYopeso]

+1

[cristianplaias]

+1

[ghost]

I have found the solution. Use the onNotification method as described below.

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

[amirasaran]

I found my problem:
In firebase when I set only data index like following request :

{
   "to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
   "data" : {
     "Nick" : "Mario",
     "body" : "great match!",
     "Room" : "PortugalVSDenmark"
   },
}

I get in onMessage but when I send message like the following I get that onNotification

{
    "to" : "bk3RNwTe3H0:CI2k_HHwgIpoDKCIZvvDMExUdFQ3P1...",
    "notification" : {
      "body" : "great match!",
      "title" : "Portugal vs. Denmark",
      "icon" : "myicon"
    }
}

[sturmenta]

Thanks @calintamasyopeso and @amirasaran.

In web working with this:

firebase.messaging().onMessage(notification => {
    alert('Notification received!', notification);
});

but in react-native working with this (after installing firebase.notifications)

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

with the same payload

{
    "to" : "",
    "notification" : {}
}

[aysfzaicmu]

@amirasaran i've been trying to do this however in both cases, the onMessage function is triggered and not onNotification..any idea where i might be going wrong

[muscaiu]

Thanks @calintamasyopeso and @amirasaran.

In web working with this:

firebase.messaging().onMessage(notification => {
  alert('Notification received!', notification);
});

but in react-native working with this (after installing firebase.notifications)

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

with the same payload

{
    "to" : "",
    "notification" : {}
}

console.log and alert works also for me, but how i real notification doesn't.

[yardenst]

I'm using the web (NOT React Native)

version 7.3.0
Chrome 78

The callback I register to firebase.messaging().onMessage isn't called when tab in the foreground.

I tried to send a notification message and data message (neither work)

(I can confirm that setBackgroundMessageHandler does work)
(I can also confirm that when sending notification message and the tab is in the bg, it pops up)

Any idea? I need to handle the case when i receive a message and the tab is in the foreground.

[mikehardy]

@yardenst this is the repo for "react-native-firebase", I don't believe we can help

[yardenst]

@mikehardy Thanks (and sorry)

[VIRGO96]

I'm using the web (NOT React Native)

version 7.3.0
Chrome 78

The callback I register to firebase.messaging().onMessage isn't called when tab in the foreground.

I tried to send a notification message and data message (neither work)

(I can confirm that setBackgroundMessageHandler does work)
(I can also confirm that when sending notification message and the tab is in the bg, it pops up)

Any idea? I need to handle the case when i receive a message and the tab is in the foreground.

did u get it to work i am having same problem in web

[yardenst]

Yes, I did get it to work (needed to update the firsebase version then it worked)

[VIRGO96]

@yardenst what version were you using ?

[mikehardy]

@VIRGO96 in web? this is a react-native module. It does not do anything web-related.

[VIRGO96]

@mikehardy yes i understand but @yardenst is the only person i found to having the same problem as me and unfortunately he is on react native thread so thats why i commented here

[yardenst]

7.3.0

[kolyuchii]

Well, I've got the same issue.

React Native: 61
"@react-native-firebase/app": "^8.2.0",
"@react-native-firebase/auth": "^8.1.2",
"@react-native-firebase/crashlytics": "^8.1.2",
"@react-native-firebase/database": "^7.3.2",
"@react-native-firebase/dynamic-links": "^7.3.2",
"@react-native-firebase/firestore": "^7.4.3",
"@react-native-firebase/functions": "^7.2.2",
"@react-native-firebase/messaging": "^7.4.2",
"@react-native-firebase/storage": "^7.2.2",

constructor(props) {
const authorizationStatus = await messaging().requestPermission();
                    if (
                        authorizationStatus ===
                            messaging.AuthorizationStatus.AUTHORIZED ||
                        authorizationStatus ===
                            messaging.AuthorizationStatus.PROVISIONAL
                    ) {
                        messaging()
                            .getToken()
                            .then((token) => {
                                console.log('token', token);
                                return UsersModel.updateCurrentUserData({
                                    token,
                                });
                            })
                            .catch((error) => console.log('App_:79', error));
                    } else {
                        console.log(
                            'User has notification permissions disabled',
                        );
                    }
}
componentDidMount() {
this.mesaging = messaging().onMessage((remoteMessage) => {
            console.log('Message', remoteMessage);
});
}

[Doetheman]

I am having this issue in flutter when sending custom data

[mikehardy]

@Doetheman - this is react-native not flutter, it will have little bearing on your problem, you should open an issue in FlutterFire package