React-native-firebase: 'Failed to display notificaton' on iOS

[im-aditya]

Issue

I am not able to trigger local / scheduled notifications on iOS.

My code:

const notification = new firebase.notifications.Notification()
        .setNotificationId('notificationId')
        .setTitle('My notification title')
        .setBody('My notification body')
        .setData({
            key1: 'value1',
            key2: 'value2',
        });

    if (Platform.OS === 'ios') {
        notification
            .ios.setBadge('1');
    } else {
        notification
            .android.setChannelId('test-channel')
            .android.setSmallIcon('ic_launcher');
    }

    try {
        firebase.notifications().displayNotification(notification);
    } catch (error) {
        console.warn('[FirebaseService] Failed to show local notification', error);
    }

    try {
        const date = new Date();
        date.setSeconds(date.getSeconds() + 10);
        firebase.notifications().scheduleNotification(notification, {
            fireDate: date.getTime(),
        });
    } catch (e) {
        console.warn('[FirebaseService] Failed to schedule notification', e);
    }

Getting this error:

For local notification:

Possible Unhandled Promise Rejection (id: 0):
Error: Failed to display notificaton
createErrorFromErrorData@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2056:26
http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2008:51
__invokeCallback@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2450:23
http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2195:34
__guardSafe@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2363:13
invokeCallbackAndReturnFlushedQueue@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2194:21
invokeCallbackAndReturnFlushedQueue@[native code]

For schedule notification:

Possible Unhandled Promise Rejection (id: 1):
Error: Failed to schedule notificaton
createErrorFromErrorData@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2056:26
http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2008:51
__invokeCallback@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2450:23
http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2195:34
__guardSafe@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2363:13
invokeCallbackAndReturnFlushedQueue@http://172.20.10.7:8081/index.bundle?platform=ios&dev=true&minify=false:2194:21
invokeCallbackAndReturnFlushedQueue@[native code]

I was using react-native-push-notifications but I had to switch to firebase for some reasons. With the previous library local notifications were working fine. But now its not.

Both of these promise rejections are coming from this file: https://github.com/invertase/react-native-firebase/blob/master/ios/RNFirebase/notifications/RNFirebaseNotifications.m

And it is not entering the try catch block of my code !!

I have requested the notification permissions and allowed it. Since notifications were working with the previous library, I am guessing my certificates and provisioning profile is setup correctly.

Also I have removed all the setup code for the previous library, just in case if it was causing some issue.

Environment

1. Application Target Platform:

iOS 11.0.3

1. Development Operating System:

macOS Sierra

1. Build Tools:

Xcode 9.3.1

1. React Native version:

0.55.4

1. React Native Firebase Version:

^4.2.0

1. Firebase Module:

messaging, notifications

1. Are you using typescript?

no

[im-aditya]

I added a breakpoint to the Obj-C code and the error it is displaying is this:

NSCocoaErrorDomain - code 4097
connection to service named com.apple.usernotifications.usernotificationservice

I don't know Obj-C so I have no idea what this is about. Any help ?

[hwde]

I was able to trace this in XCode, Apple expects UNMutableNotificationContent.badge to be NSNumber, so ensure that setBadge() gets a a number:

if (Platform.OS === 'ios') {
        notification
            .ios.setBadge(1);
}

Then it works.

[Titozzz]

I have the exact same bug and already have a badge value. Looking for the native side gives me that issue:

Adding notification request failed with error: Error Domain=NSCocoaErrorDomain Code=4097 "connection to service named com.apple.usernotifications.usernotificationservice" UserInfo={NSDebugDescription=connection to service named com.apple.usernotifications.usernotificationservice}

On the js side:

Possible Unhandled Promise rejection Error failed to display notification

My code, is basically just trying to display a notif when the app is opened:

this.notificationListener = firebase
      .notifications()
      .onNotification(this.handleNotification);

handleNotification = (notification) => {
    if (
      notification.data
      && (notification.data.type === 'SOMETHING')
    ) {
      if (Platform.OS === 'android') {
        notification.android
          .setPriority(firebase.notifications.Android.Priority.Max)
          .android.setChannelId('default')
          .android.setSmallIcon('ic_notif')
          .android.setColor(DARK_RED)
          .android.setBadgeIconType(
            firebase.notifications.Android.BadgeIconType.Small,
          )
          .android.setAutoCancel(true);
      } else {
        notification.setSound('default');
      }
      firebase.notifications().displayNotification(notification); // THIS BUGS ON IOS
    } else if (
      notification.data
      && notification.data.type === 'SOMETHING ELSE'
    ) {
        // DO STUFF
    }
  };

[Ehesp]

@Titozzz displayNotification is a promise - check the error that it returns as it's currently getting swallowed. The error could be more graceful than the raw one.

[Titozzz]

Sure let me try !

EDIT: So, I tried, the error was gone. Then I removed the change and the error was still gone. I'm kinda angry. Will le you know if the error comes back. 🙄

[krishanjangir]

In Function onNotification i reassign the title, body and sound and it works for me..

this.notificationListener = firebase.notifications().onNotification((notification) => {

  if (Platform.OS === 'ios') {
      notification.setNotificationId(new Date().valueOf().toString())
     .setTitle(notification.data.title)
     .setBody(notification.data.body)
     .setSound("bell.mp3")
    notification.ios.badge = 1
  }else {
           // Process your notification as required
  notification.android.setChannelId("@string/default_notification_channel_id")
    .android.setLargeIcon('ic_launcher')
     .android.setSmallIcon('ic_notification');
  }
  firebase.notifications().displayNotification(notification);
});

[ducpt2]

@Titozzz same error to me. :)))

[stale[bot]]

Hello 👋, this issue has been automatically marked as stale because it has not had activity for quite some time. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[tkow]

I found that notification instance from callback argument has null type data and they cause crush of app. I set undefined instead of null via set~ methods, then it is solved. So, it can be fixed by modifying initialize method of notification if null is passed to constructor.