Deeplinking with a nested navigation (react-native)

Question

Trying to set up deeplinking for my project following this guide: https://reactnavigation.org/docs/en/next/deep-linking.html

However when trying the implementation I always see the main screen instead of the account screen.

Running an example like this:

adb shell am start -W -a android.intent.action.VIEW -d "hdsmobileapp://main/account/" com.digithurst.hdsapp

I have a nested navigation which can be seen below:

import {createDrawerNavigator, createStackNavigator} from "react-navigation";
    import {NavigationOptions} from "./components/NavigationOptions";
    import {SideMenu} from "./components/SideMenu";
    import LoginScreen from "./containers/LoginScreen";
    import MainScreen from "./containers/MainScreen";
    import MyAccountScreen from "./containers/MyAccountScreen";

    import SplashScreen from "./containers/SplashScreen";
    import { createAppContainer} from "react-navigation";


    const AppContainer = createAppContainer(
        {
            Splash: {
                screen: SplashScreen,
                navigationOptions: {
                    header: null,

                },
            },
            Login: {
               screen: createStackNavigator(
                   {
                       Login: {
                           screen: LoginScreen,
                           navigationOptions: {
                               header: null,
                           },
                       },                                     
                   },
               )
            },
            Main: {
                screen: createDrawerNavigator(
                    {
                        Main: {
                            screen:  createStackNavigator(
                                {

                                    Main: {
                                        screen: MainScreen,
                                        navigationOptions: NavigationOptions.getSearchFilterHeader("title.main"),
                                    },

                                    MyAccount: { screen: MyAccountScreen, path: 'account',},


                                },
                            ),

                        },
                    }, {
                        drawerWidth: 300,
                        initialRouteName: "Main",
                        contentComponent: SideMenu,

                    },
                ),
            },
        },

    );

And then inside App.tsx the following is included:

import React, {Component} from "react";
import SplashScreen from "react-native-splash-screen";
import {Provider} from "react-redux";
import RootStack from "./navigation";
import AppContainer from "./navigation";
import store from "./store/store";
import {createAppContainer} from 'react-navigation'
import { AppRegistry } from 'react-native';




class App extends Component {
    public componentDidMount() {
        SplashScreen.hide();
    }

    public render() {
        return (

            <Provider store={store}>
                <RootStack  uriPrefix={prefix}  />
            </Provider>
        );
    }
}


const prefix = 'hdsmobileapp://hdsmobileapp';

const MainApp = () => <AppContainer uriPrefix={prefix} />;
AppRegistry.registerComponent('App', () => MainApp);
export default App;

Is there something obvious that I am missing here?

Cowlick

Answer 1

The main part of the url your are providing (hdsmobileapp://main/account/) is not specified in your navigation declaration.

You should add it to the uriPrefix prop or avoid it passing it when trying to reach the /account location.

adb shell am start -W -a android.intent.action.VIEW -d "hdsmobileapp://account/" com.digithurst.hdsapp

Kaciekacy

Answer 2

You haven't added the path prop to the parent navigators. The docs specifically mention that you must provide path prop when you have nested navigators.

If we have nested navigators, we need to provide each parent screen with a path. All the paths will be concatenated and can also be an empty string.

Just pass '' null strings whenever you don't want to add the navigator to path.

Change your router configuration like this for your path hdsmobileapp://main/account/ to work,

const AppContainer = createAppContainer(
    {
        Splash: {
            screen: SplashScreen,
            navigationOptions: {
                header: null,

            },
        },
        Login: {
           screen: createStackNavigator(
               {
                   Login: {
                       screen: LoginScreen,
                       navigationOptions: {
                           header: null,
                       },
                   },                                     
               },
           )
        },
        MainDrawer: {
            screen: createDrawerNavigator(
                {
                    MainStack: {
                        screen:  createStackNavigator(
                            {

                                Main: {
                                    screen: MainScreen,
                                    navigationOptions: NavigationOptions.getSearchFilterHeader("title.main"),
                                },

                                MyAccount: { screen: MyAccountScreen, path: 'account',},

                            },
                        ),
                        path:'main'
                    },
                }, {
                    drawerWidth: 300,
                    initialRouteName: "Main",
                    contentComponent: SideMenu,

                },
            ),
           path: '',
        },
    },
);

Also consider renaming your parent navigators since it'll cause bugs when you add more screens and navigation.

Latest deep-linking documentation here

Rothenberg