Deep Linking

[andrewchester1]

Deep linking with react navigation is one of the worst experiences I have had in the react native world. Documentation recommends to not nest navigators, but if you don't nest navigators deep linking is almost impossible to setup. After four years of workings with react navigation, no major changes have been made to address this issue.

I would 100% prefer a way to listen to urls, and add a switch case and navigate people to the correct screen. This way I can have type safety for deep linking. You can have a MasterStack with all screens and then a TabStack with your tabs screens which is nested in the MasterStack(Like the docs recommend), Then make sure that the initial stack is rendered before linking is hit. I hate the idea of having this structure, then if you want deep linking your TabStack needs to have Nested Stacks inside the TabStack. Then if you want other screens you need to nest more stacks? What about navigating to Modal screens? These are not recommended to be in nest navigators either...
linking={(navigation, url, param)=> { switch(url): case "Profile": navigation.push("Profile") case "task-details": navigation.push("TaskDetails", { taskId: param }) }}

This would save me countless hours of configuration and testing deep linking. If we are going to be recommended to not nest navigators, there needs to be an easy way to configure custom deep linking. I know this feature will never be added, but just wanted to rant about this because it is an issue. I have never worked with anyone or heard anyone say deep linking with react navigation is fun or easy to setup and test. Whenever I need to add a new deep link I have to redo my navigation structure... I know this feature will never be added, but it would be amazing...

[Gautham495]

We have this exact configuration and it works well for us.

We use a combination with notifee handlers and FCM/APNS with React-navigation with ourapp://routes deeplink for both android and iOS.

I recommend using the notifee.onForegroundEvent for the nested navigation to work.

In that use the following,

  navigationRef.current.navigate('MainStack', {
              screen: 'SubStackInTabStack',
            });

This works extremely well for us in Android and iOS - In Foreground/Background and quit and there has been no issues.

This works for notification payload with title and description and in the data object we send required routes.

Let me know if it works for you.