How can I implement React Navigation's deep linking using messaging().getInitialNotification()?

[nhhynd]

Since version 7.0.0 of Notifee, messaging().getInitialNotification() from React Native Firebase no longer triggers.
https://notifee.app/react-native/docs/release-notes#700

However, according to the React Navigation deep linking guide,
you should use getInitialURL as follows:
https://reactnavigation.org/docs/deep-linking/#third-party-integrationsnotes

const linking = {  
prefixes: ['myapp://', 'https://myapp.com'],  
  
// Custom function to get the URL which was used to open the app  
async getInitialURL() {  
// First, you would need to get the initial URL from your third-party integration  
// The exact usage depend on the third-party SDK you use  
// For example, to get the initial URL for Firebase Dynamic Links:  
const { isAvailable } = utils().playServicesAvailability;  
  
if (isAvailable) {  
const initialLink = await dynamicLinks().getInitialLink();  
  
if (initialLink) {  
return initialLink.url;  
}  
}  
  
// As a fallback, you may want to do the default deep link handling  
const url = await Linking.getInitialURL();  
  
return url;  
},

In Notifee version 6.0.0, you can follow the guide mentioned above.

async getInitialURL() {  
const remoteMessage = await messaging().getInitialNotification();  
const remoteDeepLink = remoteMessage?.data?.deepLink;  
  
if (remoteDeepLink) {  
  return remoteDeepLink;  
}  
  
return await Linking.getInitialURL();
}  

However, in Notifee version 7.0.0, instead of messaging().getInitialNotification(), you should use onForegroundEvent.
https://notifee.app/react-native/docs/ios/remote-notification-support#handling-events

import { useEffect } from 'react';
import notifee, { EventType } from '@notifee/react-native';
function App() {
  // Subscribe to events
  useEffect(() => {
    return notifee.onForegroundEvent(({ type, detail }) => {
      console.log('Remote notification info: ', detail.notification?.remote)
      switch (type) {
        case EventType.DISMISSED:
          console.log('User dismissed notification', detail.notification);
          break;
        case EventType.PRESS:
          console.log('User pressed notification', detail.notification);
          break;
      }
    });
  }, []);
}

The challenge is in obtaining the detail.notification data from onForegroundEvent and passing it to getInitialURL. Unfortunately, you're having trouble finding a solution, and you've resorted to downgrading to Notifee version 6.0.0.

Is there a better solution available, or can you provide guidance on how to retrieve the detail.notification data from onForegroundEvent and pass it to getInitialURL in Notifee version 7.0.0? Any assistance in resolving this issue would be greatly appreciated.

This article was translated by chat gpt.

[github-actions]

Hello 👋, to help manage issues we automatically close stale issues.

This issue has been automatically marked as stale because it has not had activity for quite some time.Has this issue been fixed, or does it still require attention?

This issue will be closed in 15 days if no further activity occurs.

Thank you for your contributions.

[nhhynd]

resolved issue myself

[endritbajrami]

@nhhynd Can you share the solution, because I am facing the same issue, messaging.getInitialNotification() returns null on getInitialURL() function on navigator linkingOptions

[nhhynd]

@endritbajrami

function App() {
  const [remoteMessage, setRemoteMessage] =
    useState<FirebaseMessagingTypes.RemoteMessage | null>(null);
  const [eventDetail, setEventDetail] = useState<EventDetail | null>(null);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setEventDetail({});
      setRemoteMessage({fcmOptions: {}});
    }, 1000);

    (async () => {
      if (Platform.OS === 'ios') {
        notifee.onForegroundEvent(({type, detail}) => {
          clearTimeout(timeout);
          setEventDetail(null);

          switch (type) {
            case EventType.PRESS:
              setRemoteMessage({fcmOptions: {}});
              setEventDetail(detail);
              break;
            default:
              break;
          }
        });
      } else {
        const remoteMessage = await messaging().getInitialNotification();

        if (remoteMessage) clearTimeout(timeout);

        setEventDetail({});
        setRemoteMessage(remoteMessage);
      }
    })();
  }, []);

  return (
        <SafeAreaProvider>
              <DeepLinkProvider>
                {remoteMessage !== null && eventDetail !== null ? (
                  <RootNavigator
                    remoteMessage={remoteMessage}
                    eventDetail={eventDetail}
                  />
                ) : null}
              </DeepLinkProvider>
            </SafeAreaProvider>
  );
}

also, you can check this link.
I waiting for resolve this issue in notifee future version.

#912