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”.
This comprehensive blog explores the significance of UI frameworks, theming in React applications, popular UI frameworks such as MaterialUI, Bootstrap, and Ant Design, along with their strengths and weaknesses. It delves into the importance of theming for consistent UI/UX, provides insights into various theming approaches in React, and offers a step-by-step guide on implementing theming in React applications.
Discover how Polars, a powerful Rust-based DataFrame library for Python, revolutionizes high-performance data analysis and manipulation. Explore its key features, from speed and efficiency to data manipulation capabilities and lazy evaluation.
In this blog, we cover a wide range of topics, including monitoring, optimization, design patterns, error handling, security measures, scalability, and cost optimization, providing valuable insights and guidance for data engineers and practitioners working with big data processing on cloud platforms like Amazon EMR.