Scaler
Academy
Data Science
Neovarsity
New
Skill Test
CoursesFree Masterclass
Search for Articles, Topics
React Native Linking

React Native Linking

By Aman Dwivedi
7 mins read
Last updated: 6 Jul 2023
149 views
Learn via video courses
Topics Covered

Overview

React native linking is an interface for incoming and outgoing app links, which aids in communication between the app connections. There is a URL scheme for each link, and websites are prefixed with either https:// or http://. The URL system is referred to as http. Aside from HTTPS, we are also quite familiar with the mailto method. When you click on a mailto scheme link, the pre-installed mail program is launched. There are additional techniques that allow us to make phone calls, send text messages, and so on.

Introduction to Linking in React Native

React native linking provides a unified interface for interacting with incoming and outgoing app connections.

Every link (URL) has a URL Scheme; for example, some websites are prefixed with https:// or http://, with the http indicating the URL Scheme. For short, let's call it a scheme.

You're probably familiar with the mailto scheme in addition to https. When you use the mailto scheme to access a link, your operating system will launch an installed mail program. There are other schemes for making phone calls and sending SMS. Read on to learn more about built-in URL schemes.

Custom url schemes, like the mailto scheme, can be used to link to other apps. When you receive a Magic Link email from Slack, for example, the link that launches the Slack button is an anchor tag with a href that looks like this: slack://secret/magic-login/other-secret. You may inform the operating system, much like Slack, that you want to manage a custom scheme. When you start the Slack app, it receives the URL you used to open it. This is commonly known as deep connecting. Learn more about incorporating the deep link into your app.

The use of a custom URL strategy isn't the only approach to get your program to open on mobile. You do not wish to use an individual URL scheme in email links since the links will break on the desktop. Instead, use ordinary https URLs like https://www.myapp.io/records/1234546, and on mobile, that link should access your app on mobile. Deep Links are what Android calls them (Universal Links are what iOS calls them).

Methods of React Native Linking

  • addEventListener():
    Include a handler in Listening to the url event type and giving the handler modifies the React native linking.

  • canOpenURL():
    Check to see if an installed application can handle a specific URL.

    A Promise object is returned by the method. The promise gets resolved and the first argument is if it can be opened when it is decided whether or not the provided URL can be handled. If it was difficult to determine whether the URL could be opened or when targeting Android 11 (SDK 30), the Promise will fail if the appropriate intent queries were not included in the AndroidManifest.xml file. Similar to Android, if you don't include the particular scheme to the LSApplicationQueriesSchemes key within Info.plist (see below), the promise will fail on iOS.

  • getInitialURL():
    It will provide the link url if the app launch was initiated by an app link; else, it will provide null.

  • openSettings():
    If the app has any custom settings, you may view them by opening the Settings app.

  • openURL():
    Try using one of the installed applications to open the specified website. Other URLs that can be opened with the installed applications can be used, such as contacts, locations and others. A Promise object is returned by the method. The promise is fulfilled if the user opens the dialogue or if the website loads automatically. The promise is turned down if the user closes the active dialogue window or if no apps have been registered for the specified url.

  • sendIntent():
    launch an extras-equipped Android intent.

What are Built-in URL Schemes?

As was indicated in the beginning, every platform has a set of URL schemes for basic features. The list that follows is not complete, but it does include the most popular schemes.

Schemes:

  • mailto: Open mail app, eg: mailto: support@abc.io.
  • tel: Open phone app, eg: tel:+98765431.
  • sms: Open SMS app, eg: sms:+98765431.
  • https / http: Open web browser app, eg: https://abc.io.

How to Enable Deep Links?

Please read the following instructions if you want to turn on deep links in your app:

You may specify the launchMode of MainActivity to singleTask in AndroidManifest.xml if you want to receive the intent in an already running MainActivity instance. For further details, consult the activity > documentation.

How to Handle Deep Links?

You may handle URLs that open your app in one of two ways.

  1. A React native linking 'url' event is called and the app is foregrounded if it is already open. Use Linking.addEventListener('url', callback) to handle these events - it uses the connected URL to call callback("url").
  2. The app is opened and the url is provided as the initialURL if it isn't already open. These events may be handled using LinkinggetInitialURL() - If there is a URL, it produces a Promise which resolves to it.

Examples of React Native Linking

Sending Intents in Android

Let us take a look at the example:

Let us take a look at the example:

Opening Custom Settings

Let us take a look at the example:

Let us take a look at the example:

FAQs

Why is Deep Linking Necessary and what does it Entail?

In a word, deep linking is a technique for directing people from a website inside the app to display a particular screen with the needed material. It might be a login screen, a product, an article, secure material behind a paywall, etc. One of the most well-known instances is the Slack link they provide to your email, which opens the program automatically and grants you access to use it in your account without requiring a password.

Explain Deep Linking in Android

Android deep linking works slightly differently in comparison to iOS. This configuration operates on top of Android Intents, an abstraction of an operation to be performed. Most of the configuration is stored under AndroidManifest.xml and works by actually pointing to which Intent will be opened when the deep link is executed.

How are Deep Linkages Tested?

After going through all setups and implementations, double-check that everything is configured properly and that deep links function on all the platforms you've chosen. Ensure all JSON files are uploaded, accessible, and current for every domain before testing universal links or Android app-verified links. You could even want to update your Content Delivery Network (CDN) cache, depending on your web infrastructure. A deep link that directs you to your application and displays the required screen with the provided content is considered to have passed the deep linking test.

Conclusion

  • Linking provides a unified interface for interacting with incoming and outgoing app connections.
  • Methods of React Native Linking are addEventListener, canOpenURL, getInitialURL, and sendIntent etc.
  • In a word, deep linking is a technique for directing people from a website inside the app to display a particular screen with the needed material.
  • Most popular Built-in URL Schemes are mailto, tel, sms, and https/http.