Deep linking

In this guide we will set up our app to handle external URIs. Let's suppose that we want a URI like example://chat/Eric to open our app and link straight into a chat screen for some user named "Eric".

Configuration

Previously, we had defined a navigator like this:

const SimpleApp = createAppContainer(
  createStackNavigator({
    Home: { screen: HomeScreen },
    Chat: { screen: ChatScreen },
  })
);

We want paths like chat/Eric to link to a "Chat" screen with the user passed as a param. Let's re-configure our chat screen with a path that tells the router what relative path to match against, and what params to extract. This path spec would be chat/:user.

const SimpleApp = createAppContainer(
  createStackNavigator({
    Home: { screen: HomeScreen },
    Chat: {
      screen: ChatScreen,
      path: 'chat/:user',
    },
  })
);

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. This path spec would be friends/chat/:user.

const AuthSwitch = createAppContainer(
  createStackNavigator({
    AuthLoading: { screen: AuthLoadingScreen },
    App: {
      screen: AppStack,
      path: '',
    },
    Auth: { screen: AuthStack },
  })
);

const AppStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Friends: {
    screen: FriendsScreen,
    path: 'friends',
  },
});

const FriendsScreen = createStackNavigator({
  Overview: { screen: OverviewScreen },
  Chat: {
    screen: ChatScreen,
    path: 'chat/:user',