React-native-notifee: [iOS] - displayNotification not working

[jpudysz]

Prerequisites:

@notifee/react-native: 0.3.0
@react-native-firebase/messaging: 6.4.0-rc4
iOS (physical device)

Steps to reproduce:

import messaging from '@react-native-firebase/messaging'
import notifee, { Importance } from '@notifee/react-native'

useEffect(() => {
    const unsubscribe = messaging()
        .onMessage(message => {
             console.log('received on foreground')

             notifee.displayNotification({
                  title: 'Title',
                  body: 'Message',
                  ios: {
                       importance: Importance.HIGH
                  }
             })
             .then(console.log)
             .catch(error => console.log('Error', error)
        })

    return () => unsubscribe()
}, [])

Result:

received on foreground
9PRew2UGTykhPkxZhd1E (from then's console.log)

Expected result:

received on foreground
Message has been displayed on iOS
9PRew2UGTykhPkxZhd1E (from then's console.log)

[Salakar]

Hey, are you able to try 0.4.0 and see if the behaviour is still the same - I tweaked the internals around foreground notifications

[jpudysz]

Unfortunately, the same issue on 0.4.0 - Android displays notification and iOS not.

[Salakar]

Have you requested permission and accepted it on your device, won't display visually without permission, see: https://notifee.app/react-native/docs/ios/permissions

[jpudysz]

Yes, I tried both provisional (on app launch) and full permissions (on button press).
I'm able to receive push notifications on background/killed state - but they're created by OS.

[Salakar]

@jpudysz would you be able to screenshare with me on Discord (Salakar#1337) or something?

[jpudysz]

Thanks for the yesterday chat. Can I give anything else to help you with reproducing this issue?

[jbohman]

I've run into this issue as well, displayNotification works on Android but fails on iOS (both Simulator and physical device). I'm on version 0.4.0 and here is permissions output:

{
  "alert": 1,
  "announcement": -1,
  "authorizationStatus": 1,
  "badge": 1,
  "carPlay": -1,
  "criticalAlert": -1,
  "inAppNotificationSettings": 0,
  "lockScreen": 1,
  "notificationCenter": 1,
  "showPreviews": 1,
  "sound": 1
}

[umang-simform]

We faced this issue earlier but we managed to get it working properly. So definitely not issue with notified. I will try to get that piece of code which we have done in order to get it working.

[jpudysz]

@umang-simform thanks! I still wasn't able to make it work - only foreground and iOS.

[jpudysz]

any update? @umang-simform @Salakar

[basofi-attenza]

Hi, I'm currently having the same problem, and after doing some backtracking I found out that the display notification stopped working after I added @react-native-firebase/messaging.

I hope this tiny bit of info helps.

Btw I'm quite new to react native and ios dev, so I wonder: Do we have a specific place in the code that we can look into if the problem was indeed at @react-native-firebase/messaging?

[Salakar]

I have a potential fix for RNFB messaging to stop it interfering with other notification libraries - I'll get an RC version published to day and will post here when its up

[Salakar]

Please try the 6.4.1-alpha.0 versions of RNFirebase from NPM - this should fix the issues - PR https://github.com/invertase/react-native-firebase/pull/3427

Let me know how you get on, thanks

[jpudysz]

Thanks! @Salakar I can confirm that with 6.4.1-alpha.0 push notification appeared on the foreground.
But there is something new, I tested push with firebase console, this time shape is different:

It was:

{
     collapseKey: string,
     data: KeyValuePair,
     notification: {
         body?: string,
         title?: string
    }
    ... other keys
}

Right now it is:

{
     collapseKey: string,
     data: {
              notification: {
                 body?: string,
                 title?: string
              }
      },
      ... other keys
}

[umang-simform]

@jpudysz Are you able to fix the issue with displaying notification? Our code seems similar to yours to show the notification, Are you sure that you have implemented notifee.config.json file properly?

[jpudysz]

Yes, its working with newest alpha version. There was some issue inside RNFB with interrupting notifee

[umang-simform]

It is strange as we are still using stable RNFB and it seems working really fine, Might be an issue with your push JSON (Just a raw thought).

[byu]

I can confirm a difference in the data structure of the message when in foreground, but only in the simulator:

1. Sending notifications via Firebase web console.
2. iPhone 6Plus device
3. iPhone 11 simulator
4. @react-native-firebase/[email protected]

On iOS device, the structure was what I expected from 6.4.

On Device, launching from background:

{"messageId":"XXXX","data":{},"sentTime":"1586885390","notification":{"body":"Test Body","ios":{},"title":"Title Test"}}

On Device, handling while in foreground:

{"messageId":"XXXX","data":{},"sentTime":"1586885445","notification":{"body":"Test Body 2","ios":{},"title":"Title Test 2"}}

On iPhone11 Simulator:

{"data":{"notification":{"body":"Test Body 3","title":"Title Test 3","tag":"campaign_collapse_key_35091XXXXXX54","e":"1"}},"collapseKey":"XXXX","from":"NNNNNN"}

The notification gets embedded into the data key of the message.

[Salakar]

I'm not entirely sure how this mutation of the payload is happening 😓 I will look into this as part of tomorrows release

[photorouletteadmin]

@Salakar This "mutation" is happening when a message with a notification payload is sent over the FCM connection rather than through APNs. In such cases, the remoteMessage.appData dictionary includes a "notification" entry, which this library is currently adding to the "data" entry of the payload sent to the message handler.

Example dictionary when receiving a message with a notification payload through FCM (remoteMessage.appData):

{
    "collapse_key" = "com.xxx.yyy";
    from = 123456789;
    notification = {
        body = "Notification body";
        e = 1;
        title = "Notification title";
    };
    "custom_data_field" = "Hello world!";
}

And when receiving the same message through APNs (notification.request.content.userInfo):

{
    aps = {
        alert = {
            body = "Notification body";
            title = "Notification title";
        };
    };
    "gcm.message_id" = 123456789;
    "google.c.a.e" = 1;
    "google.c.sender.id" = 123456789;
    "custom_data_field" = "Hello world!";
}

Takeaways:

1. Only string-valued entries should be added to the data dictionary
2. Consider extracting notification data from the "notification" entry

Here is how we are currently patching this:

--- a/node_modules/@react-native-firebase/messaging/ios/RNFBMessaging/RNFBMessagingSerializer.m
+++ b/node_modules/@react-native-firebase/messaging/ios/RNFBMessaging/RNFBMessagingSerializer.m
@@ -87,7 +87,8 @@ + (NSDictionary *)remoteMessageUserInfoToDict:(NSDictionary *)userInfo {
     if (
         [key isEqualToString:@"aps"] ||
             [key hasPrefix:@"gcm."] ||
-            [key hasPrefix:@"google."]
+            [key hasPrefix:@"google."] ||
+            ![userInfo[key] isKindOfClass:[NSString class]]
         ) {
       continue;
     }
@@ -95,6 +96,23 @@ + (NSDictionary *)remoteMessageUserInfoToDict:(NSDictionary *)userInfo {
   }
   message[@"data"] = data;

+  if (userInfo[@"notification"] != nil && [userInfo[@"notification"] isKindOfClass:[NSDictionary class]]) {
+    NSDictionary *rawNotificationDict = userInfo[@"notification"];
+
+    // message.notification.title
+    if (rawNotificationDict[@"title"] != nil) {
+      notification[@"title"] = rawNotificationDict[@"title"];
+    }
+
+    // message.notification.body
+    if (rawNotificationDict[@"body"] != nil) {
+      notification[@"body"] = rawNotificationDict[@"body"];
+    }
+
+    notification[@"ios"] = notificationIOS;
+    message[@"notification"] = notification;
+  }
+
   if (userInfo[@"aps"] != nil) {
     NSDictionary *apsDict = userInfo[@"aps"];
     // message.category