React Native Deep Linking with Nested Navigators

Ivan Zotov
Aug 15, 2017 · 2 min read

Before reading the article I assume that you’ve already set up deep linking with the docs https://reactnavigation.org/docs/guides/linking#iOS

Deep Linking

I spent some time on making deep linking work properly using react-navigation in my project where there are nested navigators and additional screens that I have to display before opening the desired screen, like a preloader and authorization. So I’ll tell you here how to do that, hope it saves your time.

Let’s say we have a preloader stack component in index.js file:

export default function app() {
return (<PreloaderStack />)
}

And preloader stack looks like this:

const PreloaderStack = StackNavigator({
Preloader: { screen: Preloader },
Auth: { screen: Auth },
Drawer: {
screen: () => (<Drawer uriPrefix={‘myapp://’} />),
navigationOptions: { header: null },
},
})

As you can see we added uriPrefix to our Drawer component because it is where we want deep linking to start working. So every time the app is opened with deep links, it’s loading normally with Preloader screen that navigates to Auth stack, which in its turn navigates to Drawer. Once the Drawer has uriPrefix property, it determines which screen it has to open, here is how Drawer stack looks like:

const Drawer = DrawerNavigator({
MainStack: { screen: MainStack },
ContactsStack: { screen: ContactsStack, path: ‘contacts’ },
SettingsStack: { screen: SettingsStack, path: ‘settings’ },
})

If you set up deep linking correctly, opening an URL like myapp://settings will open your app and then the settings screen within Drawer stack after preloading and authorization has completed.

And the last thing we are going to do is adding nested navigator:

const SettingsStack = StackNavigator({
Settings: { screen: Settings },
Language: { screen: Language, path: 'language' },
})

To open a language screen just open an URL myapp://settings/language, as you can see first screens in our StackNavigator like Settings and MainStack have no path property. So after opening the URL our navigation stack will be Main > Settings > Language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade