Firebase cloud messaging shows notification in React native app only on app opening

[toscalivia83]

Hello,
I'm using FCM to display my notifications and these notifications are displayed on my iPhone 7 only when I open the application...

See below the code I'm using where I've defined the messaging().setBackgroundMessageHandler function

In the logs of the scheduledLogs function used in Cloud functions, I can see that the notifications has well been sent at 9.05am. However I've seen this notification only at around 11.50am when I opened my app...

import messaging from '@react-native-firebase/messaging';
import { DefaultTheme, NavigationContainer } from '@react-navigation/native';
import React, { useContext, useEffect, useRef, useState } from 'react';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
// import analytics from '@react-native-firebase/analytics';
import Loading from '../../components/core/Loading';
import { createNotifeeNotificationChannel, displayNotifeeNotification, getNotificationSettings, onNotifeeBackgroundEvent, onNotifeeForegroundEvent, openAlarmPermissionSettings } from '../../components/Notifications/NotifeeNotification';
import { firebase, firestore } from '../../firebase/config';
import Colors from '../../utils/colors';
import { AuthContext } from './AuthProvider';
import AuthStack from './AuthStack';
import { useEvents } from './EventProvider';
import HomeStack from './HomeStack';
// import { useNotification } from './NotificationProvider';
import { AndroidNotificationSetting, EventType } from '@notifee/react-native';
import { useQuery } from '@tanstack/react-query';
import { useTranslation } from 'react-i18next';
import { Linking } from 'react-native';
import packageJson from '../../../package.json';
import { EVENT_API_MESSAGES } from '../../firebase/events';
import { updateUserToken } from '../../firebase/user';
import { captureException, captureMessage, setUserToSentry } from '../../sentry/config';
import { getDateStringFromTimestamp, isAndroid, isIOS, objectExistsInDb } from '../../utils/genericFunctions';
import { Routes as RouteNames } from "../../utils/routes";
import OnBoardingStack from './OnBoardingStack';
import { getHorses } from './react-query/horseQueries';
import { QUERY_KEYS, queryClient } from './react-query/queryClient';
import { SubEventTypes } from '../../components/Events/Event.types';
import { NOTIFICATION_ACTIONS } from '../../components/Notifications/Notifications.types';
import { getNotificationBody, getNotificationTitle } from '../../components/Notifications/Notifications.services';

async function requestUserPermission() {
const authStatus = await messaging().requestPermission();
const enabled =
authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
authStatus === messaging.AuthorizationStatus.PROVISIONAL;

if (enabled) {
console.log('Authorization status:', authStatus);
if (isAndroid) {
await createNotifeeNotificationChannel();
}
} else {
if (isAndroid) {
const settings = await getNotificationSettings();
if (settings.android.alarm !== AndroidNotificationSetting.ENABLED) {
await openAlarmPermissionSettings();
}
}
}

}

export default function Routes() {
const { user, setUser } = useContext(AuthContext);
const {
setInitializedEvent,
} = useEvents();
const {t} = useTranslation("common");
// const {setHasNotifications, reinitialiseHasNotifications} = useNotification();

const { data: horseData } = useQuery({
enabled: objectExistsInDb(user),
queryKey: QUERY_KEYS.horses(user?.id),
queryFn: getHorses,
});
const mySelectedHorse = horseData?.[0];

const [loading, setLoading] = useState(false);
const [initializing, setInitializing] = useState(true);
const [backgroundColorChosen, setBackgroundColorChosen] = useState(Colors.backgroundLightGrey);
const routeNameRef = useRef();
const isGreyBackgroundPage = (routeName) =>
[
RouteNames.UserAccount,
RouteNames.Login,
RouteNames.SignUp,
RouteNames.CreateOrSelectHorse,
].includes(routeName);
const navigationRef = useRef();

const getFCMToken = async () => {
try {
const token = await messaging().getToken();
// console.log('got token: --', token);
return token;
} catch (e) {
console.log(e);
}
};

// Get user and save to DB in order to use Firebase messaging
const getTokenAndSaveToDb = async (userId) => {
// TODO: double check how to request permission only once!
requestUserPermission();

const token = await getFCMToken()
if (token && userId) {
await updateUserToken(userId, token);
}
}

// const reinitializeNotifications = async (userId) => {
// await reinitialiseHasNotifications(userId);
// };

async function onAuthStateChanged(userAuth) {
if (userAuth && !loading) {
return await firestore()
.collection('USERS')
.doc(userAuth.uid)
.onSnapshot(async (doc) => {
const userDoc = doc?.data();
if (userDoc && userDoc.id) {
setUser(userDoc);
await setUserToSentry(userDoc);
await getTokenAndSaveToDb(userDoc.id);
// reinitializeNotifications([user.id](http://user.id/));
}

if (initializing) {
setInitializing(false);
}
setLoading(false);
});
} else {
setInitializing(false);
setLoading(false);
}
}

useEffect(() => {
const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
return subscriber;
}, []);

useEffect(() => {
const initializeEvent = async () => {
if (user && Object.keys(user).length > 1 && mySelectedHorse && Object.keys(mySelectedHorse).length > 1) {
await setInitializedEvent(user, mySelectedHorse);
}
};

if (user && Object.keys(user).length > 1) {
initializeEvent().catch((err) => {
console.error(err);
throw new Error(
`${EVENT_API_MESSAGES.ERROR_INITIALIZING_EVENT} ${err}`,
);
});
}
}, [user, mySelectedHorse]);

useEffect(() => {
// If using other push notification providers (ie Amazon SNS, etc)
// you may need to get the APNs token instead for iOS:
// if(Platform.OS == 'ios') {
// messaging().getAPNSToken().then(token => { return updateUserToken(user?.id, token); });
// }

const updateUsertokenOnRefresh = async () => {
return messaging().onTokenRefresh(async (token) => {
if (token && user?.id) {
await updateUserToken([user.id](http://user.id/), token)
}
});
};

updateUsertokenOnRefresh().catch(console.error);
}, []);

// TODO: double check if really needed
// useEffect(() => {
// // Assume a message-notification contains a "type" property in the data payload of the screen to open

// messaging().onNotificationOpenedApp(remoteMessage => {
// console.log(
// 'Notification caused app to open from background state:',
// remoteMessage.notification,
// );
// });

// // Check whether an initial notification is available
// messaging()
// .getInitialNotification()
// .then(remoteMessage => {
// if (remoteMessage) {
// console.log(
// 'Notification caused app to open from quit state:',
// remoteMessage.notification,
// );
// }
// });
// }, []);

const displayRemoteNotification = (remoteMessage) => {
const isEventAction = remoteMessage?.data?.action === NOTIFICATION_ACTIONS.EVENT_CREATED
|| remoteMessage?.data?.action === NOTIFICATION_ACTIONS.EVENT_UPDATED
|| remoteMessage?.data?.action === NOTIFICATION_ACTIONS.EVENT_DELETED;

if (remoteMessage?.data?.eventId) {
const isReminder = remoteMessage?.data?.action === NOTIFICATION_ACTIONS.EVENT_REMINDER;

displayNotifeeNotification(
getNotificationTitle(remoteMessage, t),
getNotificationBody(remoteMessage, t),
remoteMessage?.data,
isReminder ? "XXX://health-book" : "XXX://calendar",
);

} else {
displayNotifeeNotification(
getNotificationTitle(remoteMessage, t),
getNotificationBody(remoteMessage, t),
remoteMessage?.data,
isReminder ? "XXX://health-book" : "XXX://calendar",
);
}

if (isEventAction && remoteMessage?.data?.eventSubType) {
queryClient.removeQueries({ queryKey: ['events'], refetchType: 'active' });
queryClient.removeQueries({ queryKey: QUERY_KEYS.eventsSummary(mySelectedHorse?.id), refetchType: 'active' });
queryClient.removeQueries({ queryKey: QUERY_KEYS.weightEventsByHorse(mySelectedHorse?.id), refetchType: 'active' })
queryClient.removeQueries({ queryKey: QUERY_KEYS.eventsBySubType(remoteMessage?.data?.eventSubType, mySelectedHorse?.id), exact: true });
queryClient.removeQueries({ queryKey: QUERY_KEYS.event(remoteMessage?.data?.eventId), exact: true });
}
}

messaging().setBackgroundMessageHandler(async remoteMessage => {
displayRemoteNotification(remoteMessage);
});

useEffect(() => {
const unsubscribe = messaging().onMessage(async remoteMessage => {
// setHasNotifications(true);
displayRemoteNotification(remoteMessage);
});

onNotifeeForegroundEvent(({ type, detail }) => {
if (type === EventType.APP_BLOCKED) {
console.log('User toggled app blocked', detail.blocked);
}

if (type === EventType.CHANNEL_BLOCKED) {
console.log('User toggled channel block', [detail.channel.id](http://detail.channel.id/), detail.blocked);
}

if (type === EventType.CHANNEL_GROUP_BLOCKED) {
console.log('User toggled channel group block', [detail.channelGroup.id](http://detail.channelgroup.id/), detail.blocked);
}

const isEventAction = detail.notification?.data?.action === NOTIFICATION_ACTIONS.EVENT_CREATED
|| detail.notification?.data?.action === NOTIFICATION_ACTIONS.EVENT_UPDATED;

// if (type === EventType.PRESS && detail.notification.data.link) {
// Linking.openURL(detail.notification.data.link);
// } else
if (type === EventType.PRESS && (isEventAction || detail.notification.data.action === NOTIFICATION_ACTIONS.EVENT_ALERT) && detail.notification?.data?.eventId) {
Linking.openURL(`XXX://event-display/${detail.notification?.data?.eventId}`);
} else if (type === EventType.PRESS && detail.notification.data.action === NOTIFICATION_ACTIONS.EVENT_REMINDER) {
Linking.openURL("XXX://health-book");
} else if (type === EventType.PRESS) {
Linking.openURL("XXX://calendar");
}
});

onNotifeeBackgroundEvent(async ({ type, detail }) => {
// if (type === EventType.PRESS && detail.notification.data.link) {
// Linking.openURL(detail.notification.data.link);
// } else
if (type === EventType.PRESS && (isEventAction || detail.notification.data.action === NOTIFICATION_ACTIONS.EVENT_ALERT) && detail.notification?.data?.eventId) {
Linking.openURL(`XXX://event-display/${detail.notification?.data?.eventId}`);
} else if (type === EventType.PRESS && detail.notification.data.action === NOTIFICATION_ACTIONS.EVENT_REMINDER) {
Linking.openURL("XXX://health-book");
} else if (type === EventType.PRESS) {
Linking.openURL("XXX://calendar");
}
});

return unsubscribe;
}, []);

if (loading) {
return ;
}

const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: Colors.backgroundLightGrey,
},
dark: false
};

if (initializing) return null;

const config = {
screens: {
Tabs: {
screens: {
CalendarPage: {
path: 'calendar',
},
HealthBookPage: {
path: 'health-book',
},
},
},
FeedbackPage: 'feedback',
EventDisplay: 'event-display/:eventId',
NotificationsPage: 'notifications-page',
},
};

const linking = {
prefixes: ['https://XXX.com/', 'XXX://'],
config,
};

return (

theme={MyTheme}
ref={navigationRef}
onReady={() => {
routeNameRef.current = navigationRef.current.getCurrentRoute().name;
}}
onStateChange={async () => {
const previousRouteName = routeNameRef.current;
const currentRouteName = navigationRef.current.getCurrentRoute().name;

if (previousRouteName !== currentRouteName) {
await firebase.analytics().logScreenView({
screen_name: currentRouteName,
screen_class: currentRouteName,
});
}
setBackgroundColorChosen(
isGreyBackgroundPage(navigationRef.current.getCurrentRoute().name)
? Colors.backgroundLightGrey
: Colors.white
);
routeNameRef.current = currentRouteName;
}}
linking={linking}>
edges={['top', 'left', 'right']}
style={{
flex: 1,
backgroundColor: backgroundColorChosen,
}}>
{(!loading && user?.onBoarding) && }
{(!loading && !user) && }
{(!loading && user && !user.onBoarding) && }



);
}

And I'm using this function within the Google Cloud Scheduler:

async function sendOneNotification({token, notification}) {
  // const tokens = [
    // eslint-disable-next-line max-len
  //   "d1_KQFs1sE6PuFPsI1e18S:APA91bHrai5oxZv0I4hyR-PDBCBU2bgfKEAxz96AjMgQdra1CodBDTSrruLOwWQ_QKV-zjmtP4Gazh4AucCRyiaBdcadTrHa-9VFp6rgm7lDHyqCFXHv9e7eMscmfSA64YEAZhAT89Qu",
    // eslint-disable-next-line max-len
  //   // "ebd4K8xsTxaJPucviWWUgi:APA91bHyGlM1AW9eekfqASOHK6No7TfLlAb1XGO59Oee9-A6rJc6NvtmRDURoftQcgULzZWZ_-qxsGmZdaImRltWU0G8zAm1fm5nFZ3vrLJXaQe8bsUksIDnO8rtpG8QdXLZyOD4BR5Z",
  // ];
  console.log("token", token);
  const metadata = notification.metadata;
  console.log("metadata", metadata);
  const notificationObject = {
    data: {
      eventSubType: metadata.eventSubType,
      eventId: metadata.eventId,
      horseId: metadata.horseId,
      horseName: metadata.horseName,
      action: notification.action,
    },
    token,
  };
  if (metadata.dueDate) {
    notificationObject.data.dueDate = metadata.dueDate.toString();
  }
  if (metadata.alertDate) {
    notificationObject.data.alertDate = metadata.alertDate.toString();
    notificationObject.data.eventDate = metadata.eventDate.toString();
  }
  console.log("notificationObject", notificationObject);

  return admin
    .messaging()
    .sendAll([notificationObject])
    .then((response) => {
      const notif = notificationObject.data;
      if (response?.responses[0]?.error?.code) {
        console.log(
          "Error description",
          response.responses[0].error.code,
          response.responses[0].error.message,
          );
        return `Reminder NOT added: ${notif.eventId} ${notif.dueDate} ${token}`;
      } else {
        console.log("Successfully sent message:", response);
        return `Reminder added: ${notif.eventId} ${notif.dueDate} ${token}`;
      }
    })
    .catch((error) => {
      console.log("Error sending message:", error);
      return "ERROR";
    });
}

Can you see any reason why this is behaving this way?

Thanks in advance for your help

Marion