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 internet” if 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
idas param/props to the home screen
demo://app/profile/:id- This deep link will open the profile screen of the app and will pass
idas param/props to 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 deep links, 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 a Custom uri scheme for iOS in Xcode
- Open your `react-native`(`deeplinkreactnavigation`) project and go to the `ios` folder.
- Open the file with extension `.xcworkspace` by double-clicking on it. In this project `deeplinkreactnavigation.xcworkspace` is the file.
- After opening in Xcode, follow the steps from the screenshot below and add `demo` to `URL Schemes` and `target name`(`deeplinkreactnavigation`) to the Identifier.
Setting up Custom URI scheme for Android in Android Studio
- Open your `react-native`(`deeplinkreactnavigation`) project and go to the `android` folder.
- Open file `build.gradle` with Android Studio.
- After opening in Xcode, open `Androidmanifest.xml` and add `intent-filter` as shown below.
Handling deep link in react native
- Create a new file `linking.js`
- Add `prefixes` as an array of `demo://app` and all `deep link` URLs as described above to the file as shown below
Using `linking.js` in `App.js`
- import `linking` in `App.js`
- Add it to `NavigationContainer` as shown below
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` or `iOS` or `both`)
- 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` or `iOS` or `both`)
- Type command `npx uri-scheme open demo://app/notifications — android` for `android` to deeplink to `notifications` screen
- Type command `npx uri-scheme open demo://app/notifications — ios` for `ios` to deeplink to `notifications` screen
- And see the magic
Originally posted on ankitkumar.dev
If you like this article, do give it a thumbs up, please don’t forget to click 👏👏👏 , comment on it, and share it with your friends.
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.