notifee icon indicating copy to clipboard operation
notifee copied to clipboard

[iOS] Foreground APNS notification not triggering listener / not handled

Open ceebows opened this issue 1 year ago • 4 comments

Hi,

I am unable to get notifee to work with incoming APNS notification when react native app is in foreground. None of the event handlers are triggered. Notifications are received correctly and interaction with them works correctly when app is not in foreground.

Tested on real iOS device. iPhone 14 Pro Max

Versions: "react-native": "^0.73.7", "@notifee/react-native": "^7.8.2" "@react-native-firebase/messaging": "^19.2.2", // i also use FCM

Tested via CURL

curl -v -d '{"aps":{"alert":"Hello from APNS","sound":"default"}}' \
-H "apns-topic: your.bundle.identifier" \
-H "apns-push-type: background" \
-H "authorization: bearer YOUR_JWT_TOKEN" \
--http2 \
https://api.sandbox.push.apple.com/3/device/YOUR_DEVICE_TOKEN

Code handling foreground:

import notifee, { AndroidImportance, EventType } from '@notifee/react-native';
...

useEffect(() => {
        const unsubscribe = notifee.onForegroundEvent(({ type, detail }) => {
            console.log('notifee.onForegroundEvent');
            console.log('type', type);
            console.log('detail', detail);

            switch (type) {
                case EventType.DELIVERED:
                    console.log('User DELIVERED notification', detail.notification);
                    break;
                case EventType.DISMISSED:
                    console.log('User DISMISSED notification', detail.notification);
                    break;
                case EventType.PRESS:
                ...
                break;
                ...
            }
         });

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

ceebows avatar May 22 '24 16:05 ceebows

same problem here:

"react-native": "0.73.6", "@notifee/react-native": "^7.8.2", "@react-native-firebase/messaging": "^20.3.0",

LagoonProject avatar Jul 31 '24 15:07 LagoonProject

For anybody still struggling with this, here is what we got working.

We set up react-native-notification to handle receiving and managing the notifications, while we use notifee to display the notifications.

Here is how we broke up these two libraries:

react-native-notifications: handles the receipt and management of notifications in both foreground and background states. It also handles initial notifications when the app is opened from a terminated state.

notifee: displays and manages the appearance and behavior of notifications.

Here is an example code snippet of how the two are married together:

const ExampleCode = () => {
  const [notificationPayload, setNotificationPayload] = useState(null);

  useEffect(() => {
    async function setup() {
      // Request user permissions for notifications
      const settings = await notifee.requestPermission();

      // Create a notification channel (Android)
      const channelId = await notifee.createChannel({
        id: 'default',
        name: 'Default Channel',
        importance: AndroidImportance.HIGH,
      });

      // Example with foreground notification
      Notifications.events().registerNotificationReceivedForeground(
        async (notification, completion) => {
          const { payload } = notification;
          await notifee.displayNotification({
            title: payload.title,
            body: payload.body,
            android: { channelId, importance: AndroidImportance.HIGH },
          });
          setNotificationPayload(payload);
          completion({ alert: false, sound: false, badge: false });
        }
      );
  May not be what everyone is looking for, but if it helps anyone out, here is this. 

Michal-Babins avatar Jul 31 '24 16:07 Michal-Babins

not stale

ceebows avatar Sep 28 '24 04:09 ceebows

I am hoping to replace react-native-notifications in my application because it does not appear to be actively maintained, and I have some concerns about it supporting the new architecture.

Unfortunately, this seems like a major gap in the functionality. Is there any plan or path to notifee being able to support this?

Note: I use a third party tool for push delivery, and it unfortunately doesn't use FCM for the iOS application. If it did, I think I could just use the fireabse messaging package to do this. Since I have no control over that - I need to be able to handle remote notifications from both APNS and FCM.

ghost avatar Feb 22 '25 23:02 ghost

This code helped me to display notifications in foreground on iOS

AppDelegate.swift

func userNotificationCenter(_ center: UNUserNotificationCenter, willPresent notification: UNNotification, withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void) {
    print("willPresent notification \(notification)")

    var options = [.sound, .badge] as UNNotificationPresentationOptions
    if #available(iOS 14, *) {
      options.update(with: .banner)
      options.update(with: .list)
    } else {
      options.update(with: .alert)
    }

    completionHandler(options)
  }

kesha-antonov avatar May 05 '25 11:05 kesha-antonov