How to handle deep linking to nested navigator

[nhuesmann]

Current Behavior

• When opening a deep link, the app does not navigate to the expected screen.

Expected Behavior

• The app should navigate to the screen in the nested navigator.

How to reproduce

• Snack: https://snack.expo.io/@nhuesmann/surprised-cookies
• Create deep link url that will open in the snack: exp://expo.io/@nhuesmann/9bbb10/--/change-password/dbsfkjs-a2fs2sg
• Copy and paste deep link url in the browser of the device you're testing on (simulator or physical device)
• Open in expo

The app will open to OnboardingLanding instead of OnboardingChangePassword. I believe this is because of the nesting I had to do in order to enable a modal in the Onboarding stack. If you change line 49 of App.js from rendering <OnboardingNavigator /> to <OnboardingCoreNavigator />, the deep link will work, since the stack navigator that has the OnboardingChangePassword screen as its direct child will no longer be nested in the stack navigator used for displaying the modal.

I am following all documentation from react-navigation@next, including the recommended setup for authentication flow (conditional rendering, which replaces Switch navigator), displaying a modal (enclosing navigator with mode="modal"), and handling deep links (see the snack). I also tried using getStateFromPath but I'm not sure how to target the nested OnboardingChangePassword route within the Onboarding navigator when creating the state object

In the previous version on React Navigation I was able to achieve this functionality. How can I get this to work in the latest version of React Navigation?

[satya164]

Currently you should be able to do something like this:

import { getStateFromPath } from '@react-navigation/core';

// ...

const { getInitialState } = useLinking(ref, {
  prefixes: [prefix],
  config: {
    OnboardingChangePassword: "change-password/:key"
  },
  getStateFromPath: (path, options) => {
    const state = getStateFromPath(path, options);

    return {
      routes: [{ name: 'Modal', state }]
    }
  }
});

[nhuesmann]

Thanks for the reply @satya164, I will try that soon and comment with the results!