Deep Link Handling in Notifications

[moustafadevrn]

When you receive notifications containing deep links and the app is not open, your React Native app fails to detect the deep link URL using the Linking.getInitialURL() method. As a result, the app does not navigate to the appropriate page specified in the deep link URL.

but manually triggering the deep link using the following adb shell command successfully detects the deep link URL:

adb shell am start -a android.intent.action.VIEW -d "com.infobip.mobilemessaging://deeplink/TestDeeplinkingScreen/TestDeeplinkingScreen2" com.example

and Here is the code snippet you are using to handle the initial deep link URL:

function handleInitialDeeplinkUrl() {
Linking.getInitialURL()
.then(initialUrl => {
if (!initialUrl) {
return;
}
console.log(initialUrl);
})
.catch(error => {
console.log('Initial URL is not provided');
});
}

React.useEffect(() => {
handleInitialDeeplinkUrl();
}, []);

Steps to Reproduce:

1. Attach a deep link to a push notification.
2. Send the notification to an Android device.
3. Observe that the app does not navigate to the expected page.

Expected Outcome:

The app should detect the URL and navigate to the expected page.

Actual Outcome:
The app does not detect the URL and therefore does not navigate to the expected page.

[fortesdev]

Hi,
This is potentially a React Native problem: facebook/react-native#25675

[moustafadevrn]

@fortesdev
we appreciate your feedback on the deep linking part. However, we believe this is not a React Native issue as you suggest. We are currently using React Native OneSignal, and we have successfully attached a launch link in both iOS and Android environments in production. This approach has been effective in redirecting the user to the specified page, so we are confident that the deep linking is working as expected within the React Native ecosystem.

We kindly request you to re-evaluate the issue or provide any additional guidance on how we can troubleshoot this specific deep linking challenge. We value your support and insights.

[fortesdev]

Apologies and reopening the issue, we will investigate this further.

[alboldy-ib]

Hello there,
Indeed, our current implementation does not utilise Linking properly, yet it relies on navigation like in example here - https://github.com/infobip/mobile-messaging-react-native-plugin/wiki/How-to-use-%22deeplink%22-to-land-user-to-a-particular-app-page%3F#implement-deeplinks-handling-method

Feel free to test suggested implementation and let us know upon the results.

[moustafadevrn]

@alboldy-ib
Thank you for the information and the suggested implementation for handling deep links.

Indeed, I use navigation in my app to detect the initial URL via Linking.getInitialURL(). However, there seems to be an issue as the URL detection does not occur, and the URL value is null when I press on a notification that includes a link.

Additionally, I have noticed inconsistencies with the notificationTapped library event. While it triggers as expected when the app is open and I press on the notification on Android devices, it does not trigger when the app is closed and I press on the notification.

These challenges have made it difficult to handle deep links effectively within the app. I would appreciate any further guidance or insights you can provide on resolving these issues.

Thank you for your assistance.

[mshaheer-softindex]

I have the same issue @moustafadevrn describes above. It very disappointing to see no update has been provided on this for almost 2 months.

[Said-user]

Hello @fortesdev
I'm wondering if there're any updates on that issue. I have the same problem where I can't detect the URL when clicking on a notification. However, it's working well locally.

[alboldy-ib]

Hello,
Sorry for the wait, we will take a look into it in the next two weeks.

[tomgransden]

I'm also experiencing this issue - @alboldy-ib are there any updates on this?

[mehdimej1997]

i have the same issue

[mehdimej1997]

is there any update on this issue ???

[alboldy-ib]

Hello,

Thank you for the extra patience.

Our solution does not fully rely on React Native Linking library: to handle deeplinks form push notifications, it is expected to subscribe to one of the library events, and process the deeplink from the event’s data, like this:

    mobileMessaging.register("notificationTapped", (eventData) => {
      if (!eventData[0].deeplink) {
        return;
      }
      this.handleDeeplinkEvent(eventData[0].deeplink);
    });

  handleDeeplinkEvent = (deeplinkUrl) => {
    //taking not empty path segments from Url
    let pathSegments = new URL(deeplinkUrl).pathname.split('/').filter(Boolean);
    for (let pathSegment of pathSegments) {
      //opening of the concrete screen, using react native Navigation
      this.props.navigation.navigate(pathSegment);
    }
  };

React Native linking library in the example is used only to demonstrate that demo application can be opened by clicking on the deeplink somewhere outside of the application, we are sorry that documentation might be misleading, we will improve it.

If you have problems receiving the "notificationTapped" event in terminated app state once user clicks on the push message, please check that MobileMessaging.init is called as early as possible.

[mshaheer-softindex]

I have set up initialisation as early as possible, but the on-tap event is still not firing when the app is terminated.

I cannot use event.listener because I want to use the push type DEEP_LINK instead of OPEN_IN_URL_Browser.

Could this issue be conflicting with Notifee, which I also have installed?

[SomniumDigital]

  handleDeeplinkEvent = (deeplinkUrl) => {
    //taking not empty path segments from Url
    let pathSegments = new URL(deeplinkUrl).pathname.split('/').filter(Boolean);
    for (let pathSegment of pathSegments) {
      //opening of the concrete screen, using react native Navigation
      this.props.navigation.navigate(pathSegment);
    }
  };

React Native linking library in the example is used only to demonstrate that demo application can be opened by clicking on the deeplink somewhere outside of the application, we are sorry that documentation might be misleading, we will improve it.

Unfortunately the code in this example doesn't properly solve the issue. Opening up a deep link from a completely closed state in this way is not really a suitable solution due to the use of the navigate call. Opening a screen in such a way, assuming it is not the initialScreen of the app, leads to a situation whereby the initialScreen will load (resulting in unnecessary background API requests etc being made) and display prior to the navigate call firing, then the React Navigation animation will fire before transporting the user to the actual desired screen. This results in poor UX as well as at best inefficiencies in the app.