React Navigation dynamic screens and deep linking

Question

I want to create dynamically tab screens with react navigation, but I don't know how to figure it out with the deep linking.

I would like to have my tabs screens accessible with deeplinking like : /tabs/:tabId but I don't know how to deal with the linking config. If there is someone who can help me, I have created this snack :

https://snack.expo.dev/@natinho68/getting-started-%7C-react-navigation

Answer 1

First you need to set it up via documentation

This is minimal example. Root stack is a stack navigator which has 3 screens: Splash, Login and App. And App is another stack navigator(nested) with 2 screens: Dashboard and Login.

const deepLinkDevPrefix = "https://custom.server.org"
const deepLinkLocalProtocol = "customprotocol://"
const deepLinkConfig = {
  screens: {
    Splash: "Splash",
    Login: "Login",
    App: {
      path: "App",
      screens: {
        Dashboard: "Dashboard",
        Profile: "Profile,
      },
    },
  }
}

Inside of getInitialURL you can handle url that opened the app.

const App = () => {
  const getInitialURL = async () => {
    // Check if app was opened from a deep link
    const url = await Linking.getInitialURL();

    console.log('This is url')
    console.log(url)

    if (url !== null) {
      return url;
    }

    return undefined
  }
  
  const linking = {
    prefixes: [deepLinkDevPrefix, deepLinkLocalProtocol],
    deepLinkConfig,
    getInitialURL
  };

  return (
    <NavigationContainer linking={linking}>
      <RootStack />
    </NavigationContainer>
  );
}

Here you can find out how to navigate without navigation prop.