The Why Before the How: Theoretical Understanding of Deep Linking in React Native

To put it upfront, deep linking in react native is one of the best ways to improve user experience. Through deep linking, you make navigation a breeze. A technological innovation, Deep linking bridges the gap, letting users seamlessless transit between mobile apps and web content.

Now, imagine a scenario where a user clicks on a promotional link. Instead of being directed to a generic web page, they are instantly transported to a specific product page within a mobile app. That's the magic of deep linking—a transformational technology that not only simplifies user journeys but also offers marketers and businesses a potent tool for user engagement and retention. So, if you are a marketer- looking to change your business game with deep linking, consuting with a professional React Native app developent company is the best you can do.

In this blog, let’s get a detailed theoretical understanding of deep linking and its role in transforming the mobile app landscape.

Interpreting Deep Linking in Context

Think of visiting a library with thousands of books from every possible genre. But can you locate the specific book you were looking for? There's no index, map, or friendly librarian to guide you. Just a grand entrance that leads to the first shelf of countless shelves. You create the same scenario for your mobile app users when you don’t integrate deep linking.

What is Deep Linking?

Deep linking, in terms of mobile apps, is an innovation that allows linking to a specific, generally searchable or indexed, location within the app. It goes much beyond simply launching the app's homepage. Consider it as a portal that instantly directs you to the exact section of the library, making the book location process much easier.

Deep linking is compatible with both Android and iOS mobile devices. The context of deep linking in react native lies in its smooth implementation- whether it’s an Android Device or an iOS device. Image 1 gives a visual representation of how deep linking works.

Image 1(Google.com)

Standards of Deep Linking in Android and iOS Devices

For iOS, it is Universal Links; for Android devices, it is App Links. While the technical specifics and implementations differ between App and Universal Links, their primary goal is the same, which is to provide users with a seamless transition between web content and app content.

Universal Links for iOS

Universal Links allow iOS apps to claim specific web URLs. When users click on the URL instead of Safari, it opens the respective app if installed. If the app is not installed, it falls back to the web URL in Safari. They are not the same as URL schemes, which are more brittle and lack satisfactory validation.

App Links for Android

It is similar to Universal Links. However, it is for Android apps. Another difference is the browser the user gets directed to if the corresponding app is not installed. It provides a verifiable and secure way for apps to claim website URLs.

How do Regular Web URLs differ from Deep Linking?

At the ground level, Deep links and regular web URLs perform the same function. Both these elements or addresses allow you to direct to a specific place. However, while web URLs direct you to definite pages on the WWW (web), deep links guide you directly inside an app to particular screens or content. It’s just the difference between giving directions to a house and being directed to a particular room inside it.

Why Do You Need Deep Linking for Mobile Apps?

It’s already mentioned that deep linking improves the user experience for mobile users, but let’s be specific about the ‘how’.

Users don't have to navigate through the app manually. Instead, they're taken directly to the content or feature they're interested in. Won’t it make their journey seamless? So, the next time you build a mobile app and add a different section, consider adding a deep linking feature.
Adding this feature is profitable if you run a brand and operate it through your mobile app. You can send personalized promotions or notifications that direct users straight to the related offer or content inside the app. Won’t the likelihood of users buying a product increase if they can easily land on the product cart they have been wishing to buy for a long time?
Deep linking in the React Native app and React Navigation can significantly enhance user experience, especially when combined with push notifications or web links. This integration can easily direct users straight into the relevant app.
They provide better data-capturing possibilities. You can track how many users open these deep links and their actions afterward. It’s another possibility to grow your business.

Remember that the digital era is about quick gratification. Users want content, and they want it now. Deep linking meets this demand by eliminating steps a user must take to reach their desired content- whether it's through a promotional email, an SMS, a social media post, or even a QR code.

What are the Components of Deep Linking?

If you are familiar with Deep Linking, you may be familiar with the below-listed components. If you are not, let’s get things clear.

URI Structure

Talking about the URI structure, consider its three sub-elements: host, path, and scheme.

Scheme

It represents the protocol used to open the app. Common schemes used are "http," "https," and custom schemes include "myapp." an instance of a custom URI scheme includes "myapp://".

Path

As the term ‘path’ indicates, this part identifies the content or action inside the app. It determines where the user is directed when they click the section wrapped with deep links.

Host

This part of URI defines the domain or server related to the deep link. This is commonly the domain name (such as "standard.com") for web URLs.

An example of the URI includes myapp://standard.com/products/3456

App-to-App Interaction

Deep linking enables app interaction, passing requests or information back and forth across multiple apps. However, to activate such a feature, build apps in a way such that they can respond to specific URI schemes. Only then does it allow apps to handle deep links from other apps.

Every app has its own unique URI scheme or unique address. For example, a travel app is given a unique URI scheme "travelapp://". Let’s say another app, maybe a hotel booking app, wants to establish communication with the travel app, it needs to consider a deep link or send a message to the travel app using the address "travelapp://".

Once the travel app receives the message or deep link, it understands that it has to respond to the message received from another app and act accordingly.

So, instead of acting (opening the offer page) on the user response, the hotel booking app sends deep links to another travel app and lets the travel app respond to the user's requests.

Intent Handling

Intent handling includes actions like opening a specific product page, displaying user profiles, or initiating any actions inside the defined app.

Once the deep link is triggered (for example, by clicking a link on a website or within another app), the OS of the mobile device recognizes it as a deep link (through its unique URI scheme). It then determines which app should handle this link and sends the information to the corresponding app.

Note: Sending link information to the right space is done by analyzing the URI scheme.

What the mobile app developers need to do is set up their app to recognize and handle these special ‘deep links’.

Fallback Mechanisms

Considering what happens when a deep link is clicked but the associated app is not installed on the user's device is essential. In such cases, implement fallback mechanisms.

Fallback mechanisms are like backup plans or plan B. They're strategies that app developers use to handle situations when a user clicks on a deep link, but the app linked to that link isn't installed on the user's device.

For example, you click on a link for a food recipe in a cooking app, but you don't have the app installed. There can be two possibilities of fallback mechanisms, mentioned below.

Option 1: You may be taken to the cooking app's website, where you can get the recipe.

Option 2: You can be redirected to the app store to download the cooking app.

Setting Deep Linking in React Native

Here’s the main question: Can you add the deep linking feature to a React Native app? If yes, then what is the way out?

Let’s get a clear picture of how to do it on an Android and iOS device separately.

Configuring Native Code

iOS: In Xcode, you'd typically update the Info.plist with a URL Scheme. It defines the custom URL scheme for your app.
Android: The intent filter system in the AndroidManifest.xml allows you to define URL schemes.

Handle the Deep Link in React Native

In React Native, handling deep linking involves capturing the URL that launched the app and then taking appropriate action based on that URL.

Use the Linking module from React Native. It provides several functions to manage deep links, like getInitialURL and addEventListener.

getInitialURL

The getInitialURL function gets the initial URL that launched the app. This is particularly useful when the app is fully closed, and the user opens it by clicking the deep link. If the app is available, the function returns a promise.

Here is a simple example:

import { Linking } from 'react-native';

async function handleInitialURL() {
  const initialURL = await Linking.getInitialURL();
  if (initialURL) {
    console.log('Initial URL:', initialURL);
    // Perform correct action based on initialURL
  }
}

// Call this function in the right lifecycle method, like componentDidMount
handleInitialURL();

addEventListener

The addEventListener method listens for incoming deep links when the app runs in the foreground or background.

In such a scenario, the getInitialURL won't capture the new incoming deep links because it only retrieves the URL that initially launched the app. However, you need to set up an event listener to handle new incoming deep links when the app is active in the background.

Here's how you can do it.

import { useEffect } from 'react';
import { Linking } from 'react-native';

useEffect(() => {
  // Listener for incoming links
  const handleOpenURL = (event) => {
    console.log('Incoming URL:', event.url);
    // Perform correct action based on event.url
  };

  // Subscribe to incoming links
  Linking.addEventListener('url', handleOpenURL);

  // Unsubscribe 
  return () => {
    Linking.removeEventListener('url', handleOpenURL);
  };
}, []);

The above-given snippet uses the useEffect to set up and tear down the event listener. However, you can do the same in class components using lifecycle methods like componentDidMount and componentWillUnmount.

React Navigation's Deep Linking Procedure

You can combine the React Navigation while adding the feature to your React Native app.

So, if you're using React Navigation, it has a built-in deep linking API. React Navigation's deep linking API allows you to register a link to a route configuration. This makes it easy to handle deep links without dealing with the native configurations on iOS or Android, especially when you're trying to route to specific screens within your navigation stack.

Let’s take an example:

You have a React Navigation stack with a home and profile screens. You can set up deep linking like:

const config = {
  screens: {
    Home: 'home',
    Profile: 'profile/:id',
  },
};


const linking = {
  prefixes: ['demoapp://app'],
  config: config,
};


const App = () => {
  return (
    <NavigationContainer linking={linking}>
      {/* Your stack navigators */}
    </NavigationContainer>
  );
};

With this setup, if a user clicks on a link like demoapp://app/profile/55, the app opens directly to the profile screen with the id set as 55.

Closing Notes

So, Deep Linking acts as the bridge that connects users with the vastness of the web content. React Native, a popular framework in the mobile app development landscape, has embraced this functionality. Without emphasizing much on the practical context, this article aimed to explain the theoretical scenario of deep linking in React Native in depth. With this concept clear, you can explore the possibilities of deep linking and make your React Native app more dynamic.

Tanushree Pal

A science graduate who has a keen interest to lean about new technologies and research area. With an experience in the field of data analytics and content writing, she aims to share her knowledge among passionate tech readers.