Deep Linking in React Native
Want to know how to add deep linking to a React Native app for both iOS and Android? In this blog, we talk about one of our use case with an automotive powerhouse.
Deep Linking in React Native
Recently, we worked with a regional automotive powerhouse that focussed on customer service long before it became the in-thing. Our brief was to design, develop and support a mobile-first application, aimed at significantly improving the NPS and engagement with the customers.
The client's marketing team and our product team brainstormed at length to detail all the features that were crucial to delivering the engagement goals that the marketing team had set for themselves. Social media and chat applications were identified as key drivers to drive adoption and engagement. One of the key requirements was to make it easy for users to discover, share, and enter seamlessly into the app.
From a technical standpoint, it meant supporting deep linking within the application. This way, the users can easily share and consume the application and its content. In this post, we are going to look at how to enable deep linking in the mobile app.
The Use Case
In our application, there were 3 important modules named blogs, deals, and news. The content of all three modules was managed and organized by the customers’ administrative department. It was important to be able to facilitate users with sharing this content on runtime, at their will, through social mediums. Once it is shared, if a mobile application is installed and logged in, the application should be able open the destined page directly and consume the content or react to it.
Before we talk about implementation let’s first understand what are Deep Links and External Links
- DeepLinks is the link or says URL scheme clicking on which opens the application from mobile where the scheme is pointed to let's say we have scheme “zomato” and our link is zomato://restaurants/14_dalal-street-fz-4745/details if any user clicks on this link will be navigated to Dalal streets fz restaurants’ details page (if the application is installed) or to the website (if set those rules)
- External linking is the way to reach your content from other websites in our case.
But why do we need an external link?
When we tried to share the link via Facebook or WhatsApp or any social platforms: the link was getting shared/read as text as any social media platform requires HTTP/HTTPS as a scheme to understand any URL or link and in our case scheme we were using for Deep Linking could be associated to the application name (like in above zomato example scheme name is “zomato:”)
Now you must think why don't we add the protocol to our Deep Link, well the reason is how a browser works: what we found out in our research was that if we use HTTP/HTTPS or any protocol in our linking then before the link even gets dispatched the browser will open that linked URL on OS’s request and our application won’t be opened or sent a request to.
Now let’s move to the implementation phase:
- We used react-native’s guide to setup the deep linking to our project: https://reactnavigation.org/docs/deep-linking
- External Link setup: There’s one thing required to set up an external link to work: basically if your scheme starts with <brandName> ,make sure it’s associated with HTTP/HTTPS protocol so that it can be read by social media platforms.
example: Previously our URL was like this: <brandName>://<moduleName>/<identifier> then we changed it to “http://ourserver.com/redirect?path="brandName://<moduleName>/<identifier>”
- When the link is opened by users on their mobile phones server will respond with "<brandName>://<moduleName>/<identifier>”
Sharing an example of how a basic NodeJS code would look like:
All above worked like charm, however, we faced one problem in Deep Linking with React Native: Targeted page may not open when the application is not running or in a background state, it will only navigate to the default navigation screen (it could be either landing page or login page) The problem is when we click on the link and get navigated from browser to the application if our application is not in running state - react-native navigation isn’t ready. So we need to give the callback function to onReady props provided by the navigation on successful implementation, we were able to get it working appropriately.
Please note: When you are testing this feature and if debug mode is “ON” then the getInitialURl() method will always return null so please turn off the debug mode to test.
I hope you find this blog insightful while working with React-Native and its integration with “Deep Linking” and “External Linking”.
