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.
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.
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
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.
example: Previously our URL was like this: <brandName>://<moduleName>/<identifier> then we changed it to “http://ourserver.com/redirect?path="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”.
Learn how to implement structural design patterns for reusability and maintainability in modern development. In this blog, we code examples of Facade and Decorator patterns to optimize your software design.
Learn about securing desktop applications through penetration and security testing. Explore our five-step process for identifying and mitigating potential threats, and adopt recommended best practices to enhance your application's security.
This blog outlines the process of creating a custom database migration system using Node.js, & any database ORM. Furthermore, it explains creating migration files, writing migration code, and applying Electron-specific changes in order for the migration system to operate effectively in a production environment.