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

Deep Linking in React Native Apps: All you need to Know!
deep linking in React Native
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:





<action android:name=”android.intent.action.VIEW” />

<category android:name=”android.intent.category.DEFAULT” />

<category android:name=”android.intent.category.BROWSABLE” />




android:scheme=”http” />




android:scheme=”https” />



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.

Where are we with React Native in Web, Windows, and macOS?

Where are we with React Native in Web, Windows, and macOS?
React Native for Web
Application development is a result of the emergence of disruptive technologies. It is now eyed as a primary marketing aspect for every product and service company. App development initially targeted hand-held devices. With time, the service providers realized they need to get hold of the web as well as the mobile to get the highest level of penetration into demographics. Now, the point of discussion has shifted from, “should we own an application?” to “which platforms should we target with the application?” And here comes one of the toughest questions in application development. The app developers need to cover different operating systems. At the same time, they cannot ignore the far-fetched reach of a responsive web app. It would be a great idea to be able to pursue every aspect, but that churns out huge development and maintenance costs. So the difficult question here is, “What is the best solution for developing a cost-effective cross-platform application?” Choosing an application development framework that supports all of these goals can be an effective answer. React Native development is gaining prominence on these grounds.

What is React Native?

React native is a JavaScript-based application development framework that is used to develop mobile applications. It was started as an open-source project by Facebook in 2015. The rich feature set compelled many companies to get into React Native application development. Many leading companies including Facebook and Instagram have used React Native for application development.


Facebook used HTML5 to develop a mobile web page for every device. This effort struggled in terms of UI and performance. The solution did not turn out to perform in long term. In 2013, Jordan Walke, a Facebook developer used JavaScript to develop UI elements. This concept was groundbreaking. A Hackathon was organized to further test the potential of developing a mobile application using JavaScript. This gave birth to React Native. At first, it was launched for iOS. Gradually, Facebook brought in Android support and finally launched it in 2015. React Native emerged as the second biggest project on GitHub just after three years of its launch.

Why is React Native So Popular?

One of the primary reasons for the immense popularity of React Native is its use of the JavaScript library. JavaScript library was also popular when React Native was launched. So, it automatically gained popularity amongst developers. The second reason is that the React Native Framework brought in many great features for UI development which are loved by the front-end developers. The third reason can be the framework and its features. React Native developers need to write the code only once. They can use it on both – Android and iOS. This has saved considerable time and effort for the developers as well as the organizations. React Native is a great cross-platform application development framework that offers:
    • Wider audience
    • Consistent performance across different platforms
    • Quicker development
    • Cost-efficiency
These are some of the features that make React Native applications immensely popular.

Where Do We Stand?

React Native is open source and the release is also open source for everyone to access. There is a release train in the react-native-releases repository in GitHub. The React Native 0.70 was released in September 2022 which is the latest version. The year 2022 started with the release of React Native 0.67 whichcame with many improvements. Then in release 0.68, we saw some breaking changes including:
    • React Native updated to Node 16, compelling the React developers to use the Node 14 and higher versions
    • Addition of Android Gradle Plugin
    • Removal of fallbackResource from the iOS API named RCTBundleURLProvider
A new architecture with TurboModule system and Fabric Renderer was added. The React Native 0.69 came with many improvements to support this new architecture. Bundles Hermes and React 18 support have been the two major additions to this version. There were many other changes including c++17 support and the addition of the hotkeysEnabled option. In the latest 0.70 version, the focus was on Hermes which added a lot of value to React Native. It has been developed to benefit resource-constrained devices. The Hermes engine can compile the source code of JavaScript to bytecode ahead of time, unlike other engines. Hermes has been released as the default engine in the 0.70 version. In December 2022, an experimental cross-platform pointer API was introduced. Moving ahead, the focus will be on improving the framework’s performance for desktop, VR, and the web.

React Native for Web

It is time to get rid of the common misconception that React Native is only for mobile application development. React Native web is a reality. It can be used for existing as well as new apps. Users can also use it to develop multi-platform apps along with web apps. The React DOM is used to render the compatible JavaScript code in the web browser, allowing the developers to inculcate powerful abstractions in the web. React Native web applications are built using modern React APIs. The developers can find all the React Native core components for web development. The components for the web come with browser-compatible implementations. For instance, the developers will get to use the DOM-based version of the component of React Native that can be used to render to a ReactJS development framework has emerged as one solution for every kind of application development. The developers can use HTML tags to translate the required React Native primitives to DOM language, boosting the adoption of React Native for Web application development.

Benefits of using React Native for web

We can bet on two main reasons behind the growing popularity of React Native web.
    • When you create a web app with React Native, you get access to high-quality web interfaces that help you develop adaptive web UI using JavaScript. The native-like support, multiple input modes, RTL layout support, and integration with React Dev lead to seamless UI development.
    • The React developers need to write once and render anywhere they want allowing them to write new components for native and web apps without re-writing.

Major bug fixes and planned changes

In the 0.18 release for React Native web, many bug fixes have been made. Fixes are done for
    • Shortform and long-form duplication
    • Focus ring display on different elements including Switch and CheckBox
    • Href navigation for Touchables and Pressables
    • Linking.OpenURL support for the target value

Many new features have been added

    • Nesting of localized LTR/RTL layouts by setting the land or dir prop for a component
    • Dynamically switching of localized LTR/RTLlayouts in runtime
    • Addition of useLocaleContext as the new export API
    • Support for rendering for shadow boots and multiple windows
    • Extraction of static CSS

React Native for Windows + macOS

Before heading any further, let us take a look at the history of React Native for Windows and iOS. The React Native windows + macOS wasdeveloped in 2015. Since then, there have been continuous releases with bug fixes and improvements. React developers can now use React Native for Windows desktop app development. The idea behind React Native windows is to use the tools, architecture, languages, and every other component of React Native for windows application development. Very similar to Windows, React Native for macOS starts development on the actual React Native project with the desktop environment of mac into consideration. React Native for windows + macOS framework enables the developers to build cross-platform apps. Many top applications such as Xbox and MS Office have successfully used React Native for Windows and macOS for application development.macOS for iOS also gets robust support with every new release.

Benefits of using React Native for Windows + macOS

There are many benefits of using React Native for mobile apps and Windows desktop app development.
    • The React developers can use the native modules to invoke standard React Native controls and components. The developers can use features like ‘live reload’ to test their implementations just as they do in web applications.
    • A single codebase can be used to run on both operating systems – macOS and Windows. Even with two React Native projects for two different application developments, the shared UI components exist in the top layer. This considerably reduces the development and maintenance time for both applications.
    • The large developer community for support cannot be ignored. The React and React Native communities constantly offer support for React Native Windows and macOS development

Bug Fixes and Planned Features

Version 0.70 is about new features. There are quite a few fixes which are:
    • Fix for catalyst
    • Enabling the new React JSX Transform
    • Removal of reactnativeutilsjni
Besides the changes, many dependencies have been upgraded. The major highlights of the release are:
Version 0.70 is about new features. There are quite a few fixes which are:
    • Using Hermes as the default engine
    • New unified configuration for Codegen
    • Auto-linking for new architecture libraries in Android
    • Full CMake support to configure android builds


React Native is a great choice for developing cross-platform web and mobile applications for different platforms. React Native allows the developers to share the codebase and business logic on web and native applications, bringing in great visual consistency. Development options like ‘fast refresh’ allow the developers to instantly see their changes in the application. This ultimately results in higher productivity and better user experience. React Native is a very progressive language where new releases keep coming up with new features and bug fixes. The Contributor Summit 2022 has opened new channels of knowledge sharing and collaboration to bring up something new and innovative in React Native.
The upcoming developments are expected to be on the ‘many platforms vision’ which aims to build beyond mobile. An increase in investments in Desktop, Web, and VR only guarantees new releases with better support for platforms with hardware differences. Looking at the ascending graph of developments, one can conclude that using React Native for application development would prove to be a worthy choice. There have been many exciting changes in 2022 and the new releases in the coming years are worth a wait.