Deep linking is when a link sends users directly into a specific point in the app experience, rather than an external website or app homepage.
Whats is Deeplink
- A deep link is a link that takes you to content.
- Deep linking is when a link sends users directly into a specific point in the app experience, rather than an external website or app homepage.
- Most web links are deep links.
Types of Deep Linking
- Custom URI Schemes
- iOS Universal Links
- Android App Links
URI Schemes
- Custom URI schemes were the original form of deep linking for mobile apps.
- They are like creating a “private internet” for your app, with links that look like
demo://path/to/content
. - The advantage of custom URI schemes is they are easy to set up.
- The disadvantage is a user’s device only knows about this “private internet” if the corresponding app is already installed, and there is no graceful fallback option by default.
Universal Links
- Apple introduced Universal Links in iOS 9 as a solution to the lack of graceful fallback functionality in custom URI scheme deep links.
- Universal Links are standard web links (
https://ankitkumar.dev
) that point to both a web page and a piece of content inside an app. - When a Universal Link is opened, iOS checks to see if any installed app on the device is registered for that domain.
- If so, the app is launched immediately without ever loading the web page.
- If not, the web URL (which can be a simple redirect to the App Store) is loaded in Safari.
Android App Links
- Google built App Links as the Android equivalent to iOS Universal Links.
- They operate in a very similar way:
- a standard web link that points to both a web page and a piece of content inside an app.
- This results in a smoother user experience.
- Since custom URI schemes are still fully supported by every version of Android, App Links have seen very low adoption.
What are we building?
I am declaring deep link URLs for our application, which will open our app from anywhere in the os on Android and iOS devices.
-
demo://app/home/:id
- This deep link will open the home screen of the app and will passid
as param/props to the home screen -
demo://app/profile/:id
- This deep link will open the profile screen of the app and will passid
as param/props to the profile screen -
demo://app/notifications
- This deep link will open the notifications screen of the app -
demo://app/settings
- This deep link will open the notifications screen of the app
After the implementation of the deep-link, the app will behave as shown here at (0:55) in the video.
Let's do some code now!
Setting up the project
I am assuming that you already have a project in which deep links need to be integrated.
If you don't have any project, I have created a small app with four screens and explained here at (0:05) in the video.
Setting up custom uri scheme for iOS in Xcode
- Open your
react-native
(deeplinkreactnavigation
) project and go to theios
folder. - Open the file with extension
.xcworkspace
by double-clicking on it. In this projectdeeplinkreactnavigation.xcworkspace
is the file. - After opening in Xcode, follow the steps from the screenshot below and add
demo
toURL Schemes
andtarget name
(deeplinkreactnavigation
) to the Identifier.
Setting up custom URI scheme for Android in Android Studio
- Open your
react-native
(deeplinkreactnavigation
) project and go to theandroid
folder. - Open file
build.gradle
withAndroid Studio
. - After opening in
Android Studio
, openAndroidmanifest.xml
and addintent-filter
as shown below.
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="app"
android:scheme="demo" />
</intent-filter>
Handling deep link in react native
- Create a new file
linking.js
- Add
prefixes
as an array ofdemo://app
and alldeep link
URLs as described above to the file as shown below
const config = {
screens: {
Home: {
path: "home/:id",
parse: {
id: (id) => `${id}`,
},
},
Profile: {
path: "profile/:id",
parse: {
id: (id) => `${id}`,
},
},
Notifications: "notifications",
Settings: "settings",
},
};
const linking = {
prefixes: ["demo://app"],
config,
};
export default linking;
Using linking.js
in App.js
- import
linking
inApp.js
- Add it to
NavigationContainer
as shown below
<NavigationContainer linking={linking}>
<MyStack />
</NavigationContainer>
We are done with the coding part
It was easy, wasn't it?
Testing deep link
Its always easy and better to test deep link on physical devices, so
- Install the app on devices(
Android
oriOS
orboth
) - Have the deep link URL in any other app
- Tap on deep link URL as a normal URL
- Its should take you our app's respective screen
If you want to test deep link on virtual devices, then
- Install the app on virtual devices(
Android
oriOS
orboth
) - Type command
npx uri-scheme open demo://app/notifications --android
forandroid
to deeplink tonotifications
screen - Type command
npx uri-scheme open demo://app/notifications --ios
forios
to deeplink tonotifications
screen - And see the magic
Testing Video at (9:34) in the video.
Originally posted on ankitkumar.dev
Also, to be notified about my new articles and stories:
Subscribe to my YouTube Channel
Follow me on Medium, Github, and Twitter.
You can find me on LinkedIn as well.
I am quite active on Dev Community as well and write small topics over there.
Cheers!!
Top comments (4)
I follow your method to configure the deep link successfully. However, my application android backbutton will exit directly. No matter which page I go to, pressing the backbutton will exit the application. If I revoke the deep link, everything works fine.
details: github.com/react-navigation/react-...
code: dev-to-uploads.s3.amazonaws.com/up...
code: dev-to-uploads.s3.amazonaws.com/up...
Hi,thank you for this .. I followed your tutorial.. but the deep links does not open when acceded from a browser .. I’m out of my depth trying to debug
How to do it in expo?
I followed this tutorial and steps seem pretty straight forward but I don't know why the NavigationContainer falls into the fallback props and doesn't work for me, any help?