Deep Linking Your React Native App

In this post, I’ll quickly walk through how to add deep linking to a React Native app for both iOS and Android using React Navigation.

The final code for this tutorial is located here.

There are many cases where providing a url to transition a user to a specific point in your app on load makes a lot of sense.

For example, say you have a person’s profile, and you want to provide a link somewhere on the web or in another app, so that when the user clicks on a link, we not only open the app but also navigate to the exact point in the app that we want to go.

This is what deep linking is, and this is what we will be walking through in this post.

Linking will provide for us an API that will allow us to listen for an incoming linked url, and then we can handle the url like

componentDidMount() {
  Linking.addEventListener('url', this.handleOpenURL);
}
componentWillUnmount() {
  Linking.removeEventListener('url', this.handleOpenURL);
}
handleOpenURL(event) {
  console.log(event.url);
  const route = e.url.replace(/.*?:\/\//g, '');
  // do something with the url, in our case navigate(route)
}

When a user in an external app or website clicks on one of our links, we will open in our new app and…