Nested react-navigation deep-linking with expo react native

Question

We're trying to add deep-linking to our Expo react native app using Expo Linking that opens a specific path within the app using something like this: myapp://home/items/order-details. However, when trying to use that deeplink url we are only taken to the home screen.

But, when we use this url: myapp://profile, it does indeed open the profile screen instead of the home screen. It seems to be working for top-level routes but not the nested ones. Is there a way to get the deeplink url to go directly to the order-details screen using our navigation?

Our App.js looks like this:

import {createRootNavigator} from './router';

const RootNav = createRootNavigator();
const prefix = Expo.Linking.makeUrl('/');

export default class App extends React.Component {
    render() {
        return (
            <Root>
                <RootNav uriPrefix={prefix}/>
            </Root>
        )
    }

This is our router.js

export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
});

`const prefix = Expo.Linking.makeUrl('items/order-details', queryParams)` can you try this? — hong developer, Apr 18 '19 at 02:17
@hongdevelop Thank you so much!! Unfortunately, it is still not navigating to the order-details screen! — Maria Espinoza, Apr 18 '19 at 04:00
Expo.Linking.makeUrl('path/items/order-details', queryParams) — hong developer, Apr 18 '19 at 04:42
@hongdevelop Using `Expo.Linking.makeUrl('path/items/order-details', queryParams)` should I be trying to navigate like this: `myapp://home/items/order-details` or should it include path like this: `myapp://path/items/order-details` or is `path` standing for something else? When I try to navigate using either of these, sadly it is remaining on the home screen :( — Maria Espinoza, Apr 18 '19 at 05:16
I'm sorry. I was mistaken. `Expo.Linking.makeUrl('path/home/items/order-details', queryParams)` — hong developer, Apr 18 '19 at 07:50

score 1 · Accepted Answer · answered Apr 24 '19 at 00:02

Because the navigators are so nested, instead of adding the uriPrefix in the RootNav on the App.js, try adding it to the tabBarComponent. So, in your router.js you should add the uriPrefix = {prefix} to TabBar. Also, since order-details is nested within another stack, it might be necessary to add another stack just for the OrderDetails screen since it is already its own screen. router.js should look like this:

const prefix = Expo.Linking.makeUrl('/');
export const MenuNav = createStackNavigator ({
    Menu: {screen: Menu, path: 'menu'},
    OrderDetails: {screen: OrderDetails, path: 'order-details'}
    }
);

export const UserCreate = createStackNavigator ({
    Profile: {screen: Profile}
});

export const Tabs = createBottomTabNavigator({
   'Home': {
        screen: Home,
        path: 'home-tab'
    },
    'Items': {
        screen: MenuNav,
        path: 'items'
    }
}, 
    {tabBarComponent: (props) => {
        return (
          <TabBar
            {...props}
            uriPrefix={prefix}
          />
        );
      },
        tabBarPosition: 'bottom',
    },
);


export const createRootNavigator = () => {
  return createDrawerNavigator ({
    Home: {
        screen: Tabs,
        path: 'home'
    }, 
    Profiles: {
        screen: UserCreate,
        path: 'profile'
    },
    OrderDetails: {
        screen: OrderDetails,
        path: 'history/order/:orderId'
    }
});

Nested react-navigation deep-linking with expo react native

1 Answers1

Linked