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.
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.
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.
Finally, it’s time to create an actual deep link. There are 3 simple steps involved. They are:
AndroidManifest.xml
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.
We have to add intent-filter
inside AndroidManifest.xml
to tell the incoming links to launch this particular app.
<activityandroid: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.
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.
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 insideintent-filter
to specify our app.
If your app opened successfully, then our deep linking is working as expected. Yay!
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.
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
anddeeplinkdemo.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.