How to implement deep linking in React Native app with React Navigation v5
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
- 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
- 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 internetif the corresponding app is already installed, and there is no graceful fallback option by default.
- 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 pass id as param/props to the home screen
demo://app/profile/:id- This deep link will open the profile screen of the app and will pass id 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.
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.
Setting up custom uri scheme for iOS in Xcode
- Open your
deeplinkreactnavigation) project and go to the ios folder.
- Open the file with extension
.xcworkspaceby double-clicking on it. In this project
deeplinkreactnavigation.xcworkspaceis the file.
- After opening in Xcode, follow the steps from the screenshot below and add
URL Schemesand target name(
deeplinkreactnavigation) to the
Setting up custom URI scheme for Android in Android Studio
- Open your
deeplinkreactnavigation) project and go to the
- Open file
- After opening in
Android Studio, open
Androidmanifest.xmland add intent-filter as shown below.
Handling deep link in react native
- Create a new file
prefixesas an array of
demo://appand all deep link URLs as described above to the file as shown below
- Add it to
NavigationContaineras shown below
We are done with the coding part
It was easy, wasn’t it?
Its always easy and better to test deep link on physical devices, so
- Install the app on devices(
- 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(
- Type command
npx uri-scheme open demo://app/notifications --androidfor
androidto deeplink to
- Type command
npx uri-scheme open demo://app/notifications --iosfor
iosto deeplink to
- And see the magic
Also, to be notified about my new articles and stories:
Subscribe to my YouTube Channel
You can find me on LinkedIn as well.
I am quite active on Dev Community as well and write small topics over there.