ANDROID & IOS: Press notification not have data on quit state and foreground but have data in background #1128
Description
i have some problem about my notification no data while in app and when quit state. here is my code to handle notification, am i doing something wrong? please help me, below is the code:
useNotificationFCM:
import { storage } from "@/services/storage";
import { RootStackParamList } from "@/types/navigation";
import notifee, {
AndroidImportance,
EventDetail,
EventType,
} from "@notifee/react-native";
import messaging, {
FirebaseMessagingTypes,
} from "@react-native-firebase/messaging";
import { NavigationProp, useNavigation } from "@react-navigation/native";
import { useEffect } from "react";
import { PermissionsAndroid, Platform } from "react-native";
export const AndroidNotificationChannelId = "App";
export const AndroidNotificationChannelName = "App";
const useNotificationFCM = () => {
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
// const authToken = useUserStore(store => store.authToken);
async function onReceiveMessage(
remoteMessage: FirebaseMessagingTypes.RemoteMessage | EventDetail
) {
console.log("Received notification message: ", remoteMessage);
await notifee.displayNotification({
title: remoteMessage.notification?.title || "App",
body: remoteMessage.notification?.body || "New notification",
android: {
channelId: AndroidNotificationChannelId,
importance: AndroidImportance.HIGH,
ongoing: true,
smallIcon: "ic_stats_notification",
color: "#000000",
},
});
}
const requestUserPermission = async () => {
const authStatus = await messaging().requestPermission();
if (Platform.OS === "ios") {
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;
return enabled;
}
await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
);
// Request permissions (required for iOS)
await notifee.requestPermission();
// Create a channel (required for Android)
await notifee.createChannel({
id: AndroidNotificationChannelId,
name: AndroidNotificationChannelName,
importance: AndroidImportance.HIGH,
});
return true;
};
async function registerFCMTokenOnAppStart() {
if (Platform.OS === "android") {
await messaging().registerDeviceForRemoteMessages();
}
try {
const token = await messaging().getToken();
console.log("registerFCMToken-->", token);
if (token) storage.set("deviceToken", token);
} catch (error) {
console.log("registerFCMToken Device Token error ", error);
}
}
async function onAppOpenedByNotification() {
const initialNotification = await notifee.getInitialNotification();
console.log("App opened by notification ", initialNotification);
if (initialNotification) {
console.log(
"Notification caused application to open",
initialNotification.notification
);
}
}
useEffect(() => {
// if (authToken) {
void registerFCMTokenOnAppStart();
}, []);
useEffect(() => {
async function init() {
console.log("Initializing FCM handler");
await requestUserPermission();
await onAppOpenedByNotification();
// messaging().setBackgroundMessageHandler(onReceiveMessage);
messaging().onNotificationOpenedApp(
(remoteMessage: FirebaseMessagingTypes.RemoteMessage) => {
console.log("Notification received OPEN APP", remoteMessage);
// navigate in here
}
);
}
void init();
const unsubscribe = messaging().onMessage(onReceiveMessage);
return () => {
unsubscribe();
};
}, []);
useEffect(() => {
const unsubscribe = notifee.onForegroundEvent(({ type, detail }) => {
console.log("Notification received in foreground", type, detail);
switch (type) {
case EventType.DISMISSED:
console.log("User dismissed notification", detail.notification);
break;
case EventType.PRESS:
console.log("User pressed notification", detail.notification);
// handle navigate in here
break;
case EventType.DELIVERED:
console.log("Notification delivered", detail.notification);
break;
case EventType.FG_ALREADY_EXIST:
console.log(
"Notification already in foreground",
detail.notification
);
break;
case EventType.TRIGGER_NOTIFICATION_CREATED:
console.log("Notification triggered");
break;
default:
break;
}
});
notifee.onBackgroundEvent(async ({ type, detail }) => {
console.log("Notification received in background", type, detail);
switch (type) {
case EventType.ACTION_PRESS:
console.log(
"User pressed notification from background",
type,
detail
);
if (
detail.notification?.data &&
Object.keys(detail.notification?.data).length > 0
) {
// handle navigate in here
} else {
navigation.navigate("Notifications");
}
break;
case EventType.DISMISSED:
console.log(
"User dismissed notification from background",
type,
detail
);
break;
case EventType.DELIVERED:
console.log(
"Notification delivered from background",
detail.notification
);
break;
case EventType.PRESS:
console.log(
"User pressed notification from background",
type,
detail
);
break;
case EventType.FG_ALREADY_EXIST:
console.log(
"Notification already in foreground from background",
detail.notification
);
break;
case EventType.TRIGGER_NOTIFICATION_CREATED:
console.log("Notification triggered from background");
break;
default:
break;
}
});
return () => {
unsubscribe();
};
}, []);
};
export default useNotificationFCM;
`NotificationHandler:
import useNotificationFCM from '@/utils/hooks/useNotificationFCM';
function NotificationHandler() {
useNotificationFCM();
return null;
}
export default NotificationHandler;because I need to put in to be able to handle clicking on notifications to navigate them (inside
And I haven't done anything in index.js yet, thank you everyone for reading the article, I hope to get help.