Deep Linking in Nested Navigators in react navigation

Question

I am using react-navigation and as per the structure of my application, we have a tab navigator inside stack navigator, I am not been able to find any proper guide for implementing Deep-Linking.

https://v1.reactnavigation.org/docs/deep-linking.html. this doesn't give any reference for nested navigators.

Answer 1

You have to basically pass a path to every upper route untill you come to you nested route. This is indipendent of the type of navigator you use.

const HomeStack = createStackNavigator({
    Article: {
        screen: ArticleScreen,
        path: 'article',
    },
});

const SimpleApp = createAppContainer(createBottomTabNavigator({
    Home: { 
        screen: HomeStack,
        path: 'home',
    },
}));

const prefix = Platform.OS == 'android' ? 'myapp://myapp/' : 'myapp://';

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

In this case to route to an inner Navigator this is the route: myapp://home/article.

This example is using react-navigation@^3.0.0, but is easy to transfer to v1.