Linking in React Native

Meaning

Linking in React Native gives us an Interface to interact with both incoming and outgoing app links

Every link (URL) has an url Schema like for example some websites are prefixed with https:// or http://, here http is the url schema. This work is done by our Operating system. Our OS links certain schema built-in-schema with certain applications.

Built-in URL Schemes

Below are some examples of built in schemas

Opening External Links

We can open certain links uisng the Linking.openURL() function

Example:

• Linking.openURL("https://google.com") opens the default browser.

• Linking.openURL("tel:+123456789") opens the phone app.

Deep Linking

Deep linking allows us to open our React Native app at a specific screen or content using a link.

There are two main ways of doing it:

1. Custom URL schemes: We can define a custom scheme for our app (e.g., myapp://) and configure our app to handle these links.

   For ex: slack://secret/magic-login/other-secret opens the Slack app to a specific login page.

2. Universal Links (iOS) and App Links (Android): These use standard https links but are configured to open our app on mobile devices. This provides a better user experience as the links still work on desktops (opening the website) and redirect to the app on mobile, if installed.

Handling Incoming links

There is two cases of handling:

1. If the app is already open, the Linking module emits a 'url' event with the deep link. we can use Linking.addEventListener('url', callback) to listen for and handle these events.

2. If the app is not open, the deep link is passed as the initial URL when the app launches. We can retrieve this using Linking.getInitialURL().

Summary

Linking in React Native allows our app to be part of other app or web ecosystem by enabling it to open other applicationsand respond to links that are designed to open our app, providing a more integrated and user-friendly experience.