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

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 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 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.

deep-link demo

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

  1. Open your `react-native`(`deeplinkreactnavigation`) project and go to the `ios` folder.
  2. Open the file with extension `.xcworkspace` by double-clicking on it. In this project `deeplinkreactnavigation.xcworkspace` is the file.
  3. 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

  1. Open your `react-native`(`deeplinkreactnavigation`) project and go to the `android` folder.
  2. Open file `build.gradle` with Android Studio.
  3. After opening in Xcode, open `Androidmanifest.xml` and add `intent-filter` as shown below.

Handling deep link in react native

  1. Create a new file `linking.js`
  2. 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`

  1. import `linking` in `App.js`
  2. 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

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!!

Polyglot Fullstack Developer