React Native Deep Linking Simplified (3 Part Series)
Before we go through the HOW part of this blog where we will be adding Deep Linking in our React Native app, Let's first go through the WHAT and WHY to better grasp the concept. Let's start.
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 want to share it with a friend. So a Deep Link will 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 What part above but there can be many use cases where a Deep Link can come very 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 with a dedicated link. Just as deep links made the web more usable, mobile deep links do the same for mobile apps.
Finally, how to create one. There are just 3 simple steps involved. Which are:
- Create a Project
- Edit AndroidManifest.xml
- Build Project
Create a React Native project by running this command:
react-native init deeplinkdemo
Now that we have a project to finally tweak, let's move on to step 2.
We have to add
AndroidManifest.xml to specify the incoming links to launch this particular app.
<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize" android:windowSoftInputMode="adjustResize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category 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.category.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.
intent filteris an expression in an app's manifest file that specifies the type of intents that the component would like to receive.
Get a closer look on
<data> tag inside
<intent-filter>. There are two properties that we have to care about.
scheme as a type of incoming link and
host as the URL.
Our Deep Link will look something like this:
Read Google Docs for more info:
Go to your root directory and run this command:
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 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 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-filterto specify our app.
We used the
app scheme earlier and now we are going to use
<data> tag inside
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
Cheers if your app appears right in front of you.
You can use multiple
<data> tags inside
intent-filter so something like this is totally okay.
<data android:scheme="app" android:host="deeplink" /> <data android:scheme="https" android:host="www.deeplinkdemo.com" />
The URIs app://deeplink and “https://www.deeplinkdemo.com” both resolve to this activity.
You can also create a 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 device. Click the link and this will hopefully launch your app.
This was the first part of the series React Native Deep Linking Simplified and in Part 2 we will learn How to handle incoming links upon app launch and redirect user.
Do share this article if you find it helpful.