React Native deep linking simplified

Before we go through the How part of this shot where we will be adding Deep Linking in our React Native app, let’s first go through the What and the Why to get a better grasp of the concept.

What is deep linking?

A deep link is simply an intent filter system that allows the user to access a certain activity in an Android app with a URL.

Let us suppose that we saw a certain product (for example a shoe) on an e-commerce website (example: Amazon) and we wanted to share it with a friend. A deep link would allow us to share a URL that will enable the receiver to open that exact shoe product page in just one click.

Now, this definition will be clearer:

Deep linking consists of using a uniform resource identifier (URI) that links to a specific location within a mobile app rather than simply launching the app. Deferred deep linking allows users to deep link to content even if the app is not already installed.

Why deep linking?

Well, we already went through one example in the What part above, but there can be many use cases where a deep link can come in handy. Think of marketing strategies, referral links, sharing a certain product, etc.

The greatest benefit of mobile deep linking is the ability for marketers and app developers to bring users directly into the specific location within their app using a dedicated link. Just as deep links make the web more usable, mobile deep links do the same for mobile apps.

How to add deep linking?

Finally, it’s time to create an actual deep link. There are 3 simple steps involved. They are:

Steps involved:

  1. Create a project
  2. Edit AndroidManifest.xml
  3. Build Project

1. Create a project

Create a React Native project by running this command:

react-native init deeplinkdemo

Now that we finally have a project to tweak, let’s move on to step 2.

2. Edit AndroidManifest.xml

We have to add intent-filter inside AndroidManifest.xml to tell the incoming links to launch this particular app.

<activity
android:name=".MainActivty"
android:label-"@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.Main" />
<catgory android:name="android.intent.category.LAUNCHER" />
</intent-filter>
<!--Copy & Paste code from here-->
<intent-filter android:label="@string/app_name">
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.catergory.BROWSABLE" />
<data android:scheme="app"
android:host="deeplink" />
</intent-filter>
<!--To here-->
</activity>

I hope the comments are clearly specifying what to do. Let’s understand the intent-filter a little better.

An intent-filter is an expression in an app’s manifest file that specifies the types of intents that the component would like to receive.

Get a closer look on the <data> tag inside <intent-filter>. There are two properties that we have to care about: scheme and host. Consider scheme as a type of incoming link and host as the URL.

Our deep link will look something like this: app://deeplink

Read the Google Docs for more info.

3. Build project

Go to your root directory and run this command:

react-native run-android

Wait for the project to build and then we will test if our Deep Link is working correctly or not.

Test it out

Make sure your app is in the background and run this command:

adb shell am start -W -a android.intent.action.VIEW -d app://deeplink com.deeplinkdemo

If your package has a different name, then edit the command as follows:

adb shell am start -W -a android.intent.action.VIEW -d <URI> <PACKAGE>

Note: Take a closer look at app://deeplink. This is our link added inside intent-filter to specify our app.

If your app opened successfully, then our deep linking is working as expected. Yay!

How to open with URL

We used the app schema earlier and now we are going to use the https schema. Edit <data> tag inside the intent-filter attribute as follows:

<data android:scheme="https" android:host="www.deeplinkdemo.com" />

Run this command:

adb shell am start -W -a android.intent.action.VIEW -d https://www.deeplinkdemo.com com.deeplinkdemo

Cheer if your app appears right in front of you.

Note

You can use multiple <data> tags inside intent-filter, so something like this is totally ok.

<data android:scheme="app" android:host="deeplink" />
<data android:scheme="https" android:host="www.deeplinkdemo.com" />

The URIs app://deeplink and deeplinkdemo.com both resolve to this activity.

You can also create an HTML file with these two links like this and test:

<html>
<a href="app://deeplink">DeepLink with app scheme</a>
<a href="https://www.deeplinkdemo.com">DeepLink with https scheme</a>
</html>

Access the file via localhost or place it on the device. Click the link and this will hopefully launch your app.

Do share this article if you found it helpful.

Copyright ©2024 Educative, Inc. All rights reserved