notifee + react-native-firebase: no notification shown

[leurs247]

I'm trying to integrate notifee with react-native-firebase (messaging).

My code so far:

// index.js
import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import notifee from '@notifee/react-native';
import App from './App';
import { name as appName } from './app.json';

const onMessageReceived = async (message) => {
  const { type, object } = message.data;

  const parsedObject = JSON.parse(object);

  if (type === 'directmessage') {
    await notifee.displayNotification({
      title: parsedObject.title,
      body: parsedObject.body,
    });
  }
};

messaging().onMessage(onMessageReceived);
messaging().setBackgroundMessageHandler(onMessageReceived);

AppRegistry.registerComponent(appName, () => App);

I hear a sound when a notification arrives, but the notification (notifee.displayNotification) is never shown.

When I leave out the JSON.parse-stuff and just 'hard code' a title and body, it works. But it seems like the JSON.parse-function is blocking (?) something.

Even the if/else-statement is not working as expected. I always hear a sound, but the notification is shown only like 10% of the total. When I leave out everything except for a notifee.displayNotification with a hardcoded title and body, it works, but as soon as I add more logic, it fails.

Edit:

I had it working for a couple times, I could even add some more code logic, but then it stopped working again. I hear a sound so a notification arrives, but only 5-10% of the notifications are actually shown on the screen.

[mikehardy]

I believe this is a few issues at once

• from a react-native-firebase perspective if the two handlers are being called, there is no issue except project code, unless the message.data itself is not populated by the library correctly with respect to the JSON you are sending, which you would have to test / confirm with a full console.log(JSON.stringify(message.data, null, 2)) to verify
• from a notifee perspective if some notifications are displayed but some are not you might check application state vs expectations and config of the notification, as I don't believe iOS shows a notification over the app by default if the app is in foreground

[leurs247]

I have a chat application. When I close the app on one device and send a message to this device from another device, a notification should popup.

Expected behaviour:
Every message should trigger a notification.

Observed behaviour:
The first message only triggers a notification sound, but does not display a notification. The second message sometimes shows a notification. Starting from the third message, the notifications are shown after every message.

I do not change the state of the app on both devices during the test.

EDIT:

when the app is open on the receiving device (the device where the notifications should appear), every notification is shown (so it works). But when the app is in background mode/closed, the first/first 2 notifications fail.

[helenaford]

Hi, sorry about the problems you're facing with the notifications. I have a few questions:

1. Are you testing on android or iOS? If it's android, the channelId is missing. If it's iOS, are you sending a data-only message, if so do you have "content_available": true, in the payload (important for background mode/closed)?

2. Can you verify onMessage is always called? If not, you might be better going over to RNFB issues (https://github.com/invertase/react-native-firebase/issues). There's lots of advice on how to solve this.

3. Can you give us an example of the type of messages you are sending. Maybe add some validation to make sure you are always sending a string to title and body.

4. When the first message triggers a sound, can you see this notification in your notification tray? If yes, this suggests that you're not getting a heads-up notification.

[leurs247]

Update.

I'm sorry for the delay, was busy working on another project.

I changed my build scheme from debug to release in XCode, and all notifications are received now. When the build scheme is in debug, all notifications are received when the app is open, but not when the app is in background state/closed. Then, a lot of the notifications just don't arrive.

Is this because the app is in debug mode?

[mikehardy]

@yesterday24 I think you may be running in to an issue I can generally summarize as "the react-native-firebase native module attempts to send events to the javascript bundle before it's loaded". My hunch is based on release (which is optimized and faster to load and start executed) vs debug, so debug loses the "race" and release works. Related PR: invertase/react-native-firebase#4144

Note another PR recently as well targets background (not closed) state that may have this symptom: invertase/react-native-firebase#4180

If you were not re-testing against the most up to date version you may not have those - messaging@7.8.4 or higher

[ccfz]

@mikehardy from other issues you have commented on, in the react-native firebase repo, I finally had a closer look at content_available. After reading this article I finally figured it out. My problem was that the background notification only sometimes worked on iOS. Long story short, in the notifee server config documentaiton for integration with firebase the docs don't mention that content_available: "true" HAS to be set on the data object in order for the ios app to be woken consistently. Otherwise, it depends on how much resources iOS gives the app, which causes occasional background notification to be received.

[mikehardy]

I just had a look and you're right. Seems like each of the examples that send data-only json could use an ios chunk with content available, yes? If I recall correctly each docs page has an edit button to propose a quick PR, the github workflow for PRs makes it a trivial thing, if you could put them in where you think they would have helped you we can merge it and spare future devs the frustration!

[ccfz]

@mikehardy done