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:
- Create a project
- Edit
AndroidManifest.xml - 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.
<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-filteris 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 insideintent-filterto 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://deeplinkanddeeplinkdemo.comboth 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.
RELATED TAGS
CONTRIBUTOR
Shad Mirza