Issue with using a Context Provider in the onMessage() method of react-native-firebase/messaging?

Question

As a newcomer in the developer world and currently working on a React Native Expo project, I'm seeking your help for the first time.

We receive FCM notifications in the app; we want to display these notifications with a Toast. But how do we prevent the Toast from being displayed if the user is already on the right page and can see the interface update? Does the 'onMessage' callback from FCM not have access to the context provider?

My objective is to prevent the appearance of a notification if the user is on a certain page (in this case, a conversation). The packages used are react-native-firebase (for backend and reception) and Notifee for displaying notifications. The issue i'm encountering is that when a new message is posted in a conversation, users receive a notification even if they are on the page at that moment.

Thus, I need to determine on which page the user is and save it. I came up with the idea of using the name of the page concatenated with the conversation ID within the existing provider to know when to push the notification or not.

The problem is that in the messaging().onMessage() method of firebase/messaging, it seems that the Context is not recognized and always appears empty.

Here's the relevant code:

useEffect(() => {
   const {currentPage} = useContext(DataContext);
   console.log('current page on HomeScreen', currentPage);
    ...

    if (!isExpoGo) {
      if (requestUserPermission()) {
        messaging().getToken().then((token) => {
          sendPushToken(token, user);
        });
      } else {
        console.log('Messaging: failed token status');
      }

      // 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,
        );
        // navigation.navigate(remoteMessage.data.type);
        console.log('App should navigate : ', remoteMessage.data);
      });

      // 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,
            );
            console.log('App woke up : ', remoteMessage.data);
          }
        });

      ...

      const unsubscribe = messaging().onMessage((remoteMessage) => {
        ...
        console.log('current Page FCM :', currentPage);
        ...
      });

      return unsubscribe;
    }
  }, []);

And here are the log returns:

 LOG  current page on HomeScreen conversation_event/66260fb009ea6ba6a551c23b 
 LOG  forground current Page :

If you have any suggestions, I'd greatly appreciate them as I've been grappling with this issue for several days without success.

Answer 1

i think you need use navigationRef.getCurrentRoute() to stop action or any route that you used

  import {
  StackActions,
  CommonActions,
  createNavigationContainerRef,
} from '@react-navigation/native';

    export const navigationRef = createNavigationContainerRef();

    const currentRouteName = navigationRef.getCurrentRoute()?.name;

    const isFocused = currentRouteName === "pageNameYouWant "
      return isFocused == true ? null : unsubscribe;

I hope I was useful and good luck 🤞

======>>>> update ======>>>>

1- first create NavigationActions.js file

2- add

export const navigationRef =createNavigationContainerRef();
export const isReadyRef = React.createRef();

3- make sure you use navigationRef inside NavigationContainer in App.js

like

 <NavigationContainer
            theme={theme === 'Dark' ? darkMode : lightMode}
            ref={navigationRef}
            onReady={() => {
              isReadyRef.current = true;
            }}
            onStateChange={async () => onStateChange()}>