React Navigation 5 - Deep linking not accepting given path and resolving to state as expected

Question

I am trying to use deep linking for my react native app that uses react navigation 5 and have been following: https://reactnavigation.org/docs/configuring-links

Here is what my code looks like:

...

const App = observer(() => {
  const { NavTheme, themeLoaded } = useTheme();
  const linking = {
    prefixes: ['myurlhere://'],
    config: {
      screens: {
        Confirmed: {
          path: 'confirm'
        }
      }
    }
  };

  return (
    <NavigationContainer linking={linking} theme={NavTheme}>
      <LoginStack.Navigator>

        <LoginStack.Screen name="Login" component={Login} options={{ headerShown: false }}/>
        <LoginStack.Screen name="Confirmed" component={Confirmed} options={{ headerShown: false }}/>

      </LoginStack.Navigator>
    </NavigationContainer>
  );
});

When I go to safari and type myurlhere://confirm, it will open the app and then show the following error:

console.error: "The action 'NAVIGATE' with payload {"name":"confirm","params":{}} was not handled by any navigator.
Do you have a screen named 'confirm'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

I expect this to navigate to my Confirmed route. What am I doing wrong?

Answer 1

I'm assuming you're using an older version of react-navigation

Try to change your config object like this

const linking = {
  prefixes: ['myurlhere://'],
  config: {
    Confirmed: 'confirm'
  }
};