Razorpay Nikhil Khadilkar Mar 24, 2022

Deep Linking Implementation in React Native

Article Summary

Nikhil Khadilkar from Razorpay reveals why their team rejected React Navigation's built-in deep linking solution and built their own custom handler instead. The reason? Complex use cases that required more control than off-the-shelf solutions could provide.

Razorpay's engineering team needed to implement deep linking across their React Native payments app for marketing campaigns, user retention, and seamless web-to-mobile transitions. They evaluated third-party solutions (Appsflyer, Branch, Firebase) and ultimately chose a hybrid approach combining Appsflyer onelinks with native Universal Links and App Links.

Key Takeaways

Critical Insight

Razorpay successfully implemented scalable deep linking by building a custom handler that separates routing logic from presentation, supporting multiple link sources and complex navigation scenarios including logged-out user flows.

The article reveals a critical mistake teams make when testing Universal Links in staging environments and the surprising workaround that actually works.

About This Article

Problem

Razorpay's team found that deep links weren't working as expected. When users clicked them, they'd land on the home page instead of the specific in-app destination the link was supposed to take them to. They needed a way to route users to the right screens based on what was in the link.

Solution

Nikhil Khadilkar's team built a Deep Link Provider using React's Provider Pattern and Context API. They paired it with a custom Deep Link Handler that checks routes against a Routes Array and then executes the right action, whether that's navigating to a screen or opening a modal, based on the URL parameters.

Impact

The solution let Razorpay handle deep links from multiple sources: Appsflyer onelinks, Universal Links, and push notifications. It was built to scale, so adding new features like pop-ups or other actions beyond navigation would be straightforward.