[iOS] Foreground APNS notification not triggering listener / not handled
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();
};
}, []);
same problem here:
"react-native": "0.73.6", "@notifee/react-native": "^7.8.2", "@react-native-firebase/messaging": "^20.3.0",
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.
not stale
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.
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)
}