React navigation deep linking

In this blog. I will explain how we can use deep linking in react-native. Nowadays we can use deep linking in many regular applications like Flipkart, Amazon, etc.

First, we will discuss what is actually deep linking? Deep-link is a technique in which a given URL or resource is used to open a specific page in the application.

For example, suppose you have a profile page and you give the link on the web or any other application for your profile page when the user clicks on the link there is not only open the application this link also navigate the screen to the profile page. 

Image refers to the https://medium.com/react-native-training/deep-linking-your-react-native-app-d87c39a1ad5e

Linking will provide us with an API that will allow us to listen for an incoming linked URL, and then we can navigate to the page with the help of this URL.

Let see how we configure deep linking in a react-native application?

  • To start, first, we create a react-native project.

  • Once the project is created navigate to the project directory and then install all dependency of the react-navigation.

  • For  the ios device, we have to run some commands:

  • Now we have to create a router and two view page.

i. Router.js

ii. Home.js

iii. Profile.js

  • Now, import the Router.js file in the app.js

  • Now we have to create the router.js

  • We will go ahead and create the Home.js

  • Now to create the JSON file for data.

  • Now we go on the Profile.js

Ok, our basic code setup is completed. Now we have to configure the native things in Xcode for iOS and in Android studio for android. Ok, let’s see the configuration.

iOS Configuration

Step 1: Add URL type to info.plist

i. Open info.plist and create the new property called URL types.

ii. Choose URL schemes.

iii. Give item 0 the name you would like your app to be linkable as. In our case, I choose peopleapp as the name.

Step 2: Add the following lines in AppDelegate.m

i. Add this line at the end of imports

ii. Add this code below @implementation AppDelegate

Ok, nice we have to do all the things for ios now for testing we have to pass the below line the URL in chrome and safari:-

And the app should redirect to the profile screen and the person’s info.

Android Configuration

First, we have to open the AndroidManifest.xml file and the following intent filter below the last intent filter within the <activity> tag:

After doing all these things, we have to open the android studio and do some configuration.

Now we have to run this app and we achieve Deep Linking in our application.    

Leave a Reply