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.

Deep Linking is a technique in which a given URL or resource is used to open a specific page or screen on mobile. So, instead of just launching the app on mobile, a deep link can lead a user to a specific page within the app, providing a better experience. This specific page or screen may reside under a series of hierarchical pages, hence the term “deep” in deep linking.

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

When a user in an external app or website clicks on one of our links, we will open in our new app and navigate to the intended url:

That will navigate to the people route, and then show a person based on the .

Let’s get started by creating a new React Native app and adding react-navigation

Once installed, cd into the new directory and install react-navigation using npm or yarn


Now that we have our app and some navigation, let’s create a router and two views: a home view and the people view.

Now, let’s go into / and import the router will will create next.

Now, we’ll go ahead and create the router. In

Then, we’ll create the Home component. In

A. We declare a title using for react-navigation to show a title when we are on this route.

B. If we are on , we immediately call the method passing in the . If we are on iOS, We add an event listener to call when an incoming link is detected.

C. We delete the Linking listener on

D. When handleOpenURL is called, we pass the event url to the method.

E. We first parse the url to get the id and route name. We then check to see if the route name is equal to , and if so we navigate to the People component, passing the id as a prop.

Now we can go to and create the component there that will be showing a person based on a route id. In

A. We create a hardcoded object with some information about a few people, including only their name and image with a corresponding id key.

B. We destructure the prop that we will be receiving. If no user exists for this id, we display a message.

C. We use the to reference the correct person, displaying their image and name.

Ok, now that we have all of our basic code set up, we now need to configure both iOS and Android to enable deep linking.

Configuring iOS

Step 1. Add URL type to

  1. Open and at the top of the file, create a new property called

2. Expand item (zero) and choose URL Schemes.

3. Give item the name you would like your app to be linkable as. In our case, I chose as the name.

will be what we use to identify the app. Once this identifier is set up, we will be able to reference it outside of the application in web browsers and other apps, like so:

Step 2. Add the following code to

Below last existing import add this import:

Directly below @implementation AppDelegate add this code:

Now your final should look something like this linked Github gist.

Now we should be able to open up safari or chrome and pass in the following url:

And the app should redirect on load to the correct route, showing the correct person’s info!

Configuring Android

First, we need to open our Manifest file and add the app name we will want to be referencing, in our case .

In , open and add the following intent filter below the last intent filter already listed, within the <activity> tag:

Here is an idea of how your should now look.

The <data> tag specifies the URL scheme which resolves to the activity in which the intent filter has been added. In this example the intent filter accepts URIs that begin with . To learn more about this configuration, check out this documentation.

That is all we need as far as configuration goes. To test this out, open Android Studio. Open Run -> Edit Configurations and change the launch options to URL, passing in the following url:

Now when we run the app, we should see Bender!

The final code for this example can be found here.

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store