Deep Linking in React Native Apps: All you need to Know!

Deep linking has become an essential component in today’s interconnected world. The term “deep linking” may sound new to many; but, most of you must have used the concept of deep linking in some form or the other.

Do you remember an instance wherein you’ve clicked on a link and it directly opened up a specific screen in an app installed on your device; without you having to navigate manually through the app? Or, for instance, you wanted your friend to read an article and shared the URL of that article. Your friend clicked on the link and got directed to the desired content in one go instead of having to launch the home page first and then search for the article.

Have you ever wondered how this happens?

Well, this is what deep linking does. Users click on a link and get redirected to a particular location in a mobile app or a website without having to waste time navigating via the main screen. Other examples include sharing the link for a YouTube video or Amazon product with a friend, opening a promotional link from a brand to go to a specific product page, and so on. In such scenarios, deep linking is essential as regular web links do not work effectively with native mobile applications.

This post is all about understanding how the concept of deep linking works and learning about its benefits. We will also discuss the key steps on how to implement deep linking in React Native mobile apps for the Android & iOS operating systems. We’ve picked the React Native framework as it is one of the most popular preferences for mobile app development these days.

What is Deep Linking?

Deep linking is a technique that enables one to link a particular content or screen inside a mobile application from an external source like another application or a website. Deep links are clickable links that send users straightaway to a particular location within a mobile app rather than an online store or a web link. This in-app location can be anything like a piece of secure content behind a paywall, an article, a product, or a login screen. Users can reach the desired in-app location by just clicking on an URL or resource without the need of searching for the page themselves.

How does the concept of Deep Linking work?

Deep linking specifies a customized URL scheme like universal links (for iOS devices) and an intent URL (for Android devices). When a user clicks on a deep link, the OS intercepts the link and opens up the relevant application if it’s installed on the user’s device. The information present in the deep link is then used by the application for navigating to the desired content or screen.

Deferred Deep links?

What if users get deep-linked into an application, but the application is not installed on their device? Here, deferred deep links come into the picture. If a user clicks on a link and the app to which the link belongs is not downloaded; the user gets directed to the App Store instead. Here, the users are directed to the exact location of the App Store where they can install the intended app with just a single click. And, once the app gets installed the specific screen opens up at once.

What are the Benefits of Deep linking?

Deep linking saves the users’ time and enhances the user experience significantly.

Deep links are great tools for business brands to boost user retention as well as conversion rate. Brands can tie promotional campaigns and incentives to deep links; redirecting users to their product page with just a single click. This way, brands can easily convince users to try out new products or services. For instance, a music app owner would like to promote a new music album. So, the owner invests in advertising and ties up with a famous website. The music album cover with a deep link gets displayed on that website as an ad campaign. When the website users click on the deep link, they are redirected to the specific page in the music app and can listen to the album.

Furthermore, you can track deep linking campaigns and check how your campaigns perform. Deep linking also improves your SEO rankings and minimizes the churn of your application.

How can you implement Deep Linking in React Native apps?

The react-navigation library provides the Linking module for deep-linking React Native apps. This proves handy for React Native developers .

You need to define a deep link schema in the application that will map specific URLs to the relevant app screens. react-navigation provides components like the Linking module and the NavigationContainer to define the schema. After defining the schema, it can be used for handling the incoming deep links. You need to register a callback function with the help of the addEventListner method provided by the Linking module for handling the incoming deep links. When the app gets launched via a deep link, the callback function is called. This callback function can be used for navigating the desired screen in the application.

Configuring Deep Linking in iOS and Android

You need to configure a mobile app with an URL scheme (a unique URL). This URL scheme is responsible for locating and launching the app installed on the user’s smartphone device. To make the app navigate to a screen, you have to set up prefixes that match the URL scheme on which the app got configured. Then the screens need to be mapped within the app with their respective paths. When the path gets attached to the URL, the app is able to directly navigate to specific screens.

Configuring deep links is a bit different for the iOS and Android operating systems. Let’s take a look at how professional React Native developers implement deep linking for Android and iOS!

Configuring deep links in React Native Android Apps

Step#1 Defining Deep Links

Open the Manifest file and define the deep links that you plan to use in your app so that users can directly navigate to a specific page within the app. Here, you need to define a deep link for that specific page.

Here’s how you can define a deep link in your AndroidManifest.xml file:

<activity

android:name=".ProductActivity"

android:label="Product">

<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="example.com"

android:pathPrefix="/products"

android:scheme="http" />

<data

android:host="example.com"

android:pathPrefix="/products"

android:scheme="https" />

</intent-filter>

</activity>

Step#2 Configuring the intent filter

Go to android/app/src/main and from there open the file named AndroidManifest.xml. Now, you need to configure the intent filter for every deep link. The intent filter specifies the amount of data and the actions that your application is capable of handling.

Step#3 Intent Handling

You need to handle the intent in your application’s activity. This intent will launch your application from a deep link. For intent handling, you need to extract data from the intent and determine that particular location or specific screen inside your app that you want the users to be directed to.

Thereafter, your project needs to be rebuilt in the Android emulator.

Configuring deep links in React Native iOS Apps

Set up your URL scheme under URL types in Xcode. Modify the ‘AppDelegate’ file and rebuild the project in the iOS emulator. Now the iOS project is opened in Xcode.

Step#1 Defining the URL scheme

Define a customized URL scheme for your application. This URL scheme is a unique way for your app to get identified. Other websites or apps will use this unique identifier to launch your application.

Open the file info.plist. Add a new URL type on the top of this file. The URL scheme can be input in the identifier and URL schemes field. Then expand item 0 (zero), select the URL Schemes, and name item 0. This name is the one that your application will be linkable as. For instance, the name of your app is “OurApp.” The URL scheme will look like this “ourapp://” or “ourapp://detail?id=123”.

Step#2 Handling Code implementation

Now, you need to implement the code that will handle the deep link. Go to the ‘AppDelegate’ file and add a method for handling the scheme. When your app will get launched through the URL scheme; this method will get called. The URL will be received by this method. The necessary information will be extracted from the URL and the right screen will get displayed in your app.

Step#3 Testing

Now, the deep link needs to be tested. For this, you can use the tool Safari or any other third-party applications that support the deep linking concept. For example, you are using Safari. Open the URL that had the defined URL scheme in Safari. Thereafter, your app launches with the correct screen.

Step#4 Universal Link Handling

Besides adding custom URL schemes, your app can also be configured to support universal links – standard HTTPS links used by other apps or websites – to launch your app. This is how you need to handle universal links. Configure the entitlements of your application. Then, create the relevant code for universal link handling and implement the code in the delegate of your app.

Now, you can rebuild your project in the iOS simulator.

Final Thoughts:

I hope you are now well-versed in the concept of delinking as well as its execution process. Deep linking has become a necessity for today’s applications. However, it’s important to carry out the deep linking implementation process with the utmost professional expertise. If you lack the technical expertise or the necessary resources, an experienced React Native App Development Company can help you sail through the deep linking creation and execution process effortlessly.