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

[ceebows]

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();
        };
    }, []);

[LagoonProject]

same problem here:

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

[Michal-Babins]

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.