{"id":6592,"date":"2021-02-09T13:40:51","date_gmt":"2021-02-09T08:10:51","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6592"},"modified":"2023-01-20T18:55:08","modified_gmt":"2023-01-20T13:25:08","slug":"react-navigation-deep-linking","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/","title":{"rendered":"React navigation deep linking"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">In this blog. I will explain how we can use deep linking in react-native. Nowadays we can use deep linking in many regular applications like Flipkart, Amazon, etc.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">First, we will discuss what is actually deep linking? Deep-link is a technique in which a given URL or resource is used to open a specific page in the application.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For example, suppose you have a profile page and you give the link on the web or any other application for your profile page when the user clicks on the link there is not only open the application this link also navigate the screen to the profile page.\u00a0<\/span><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-6594 size-full\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/image_1.gif\" alt=\"\" width=\"309\" height=\"561\" \/><\/p>\n<p><b>Image refers to the <\/b><a href=\"https:\/\/medium.com\/react-native-training\/deep-linking-your-react-native-app-d87c39a1ad5e\"><b>https:\/\/medium.com\/react-native-training\/deep-linking-your-react-native-app-d87c39a1ad5e<\/b><\/a><\/p>\n<p><a href=\"https:\/\/facebook.github.io\/react-native\/docs\/linking.html\"><span style=\"font-weight: 400;\">Linking<\/span><\/a><span style=\"font-weight: 400;\"> will provide us with an API that will allow us to listen for an incoming linked URL, and then we can navigate to the page with the help of this URL.<\/span><\/p>\n<p><b>Let see how we configure deep linking in a react-native application?<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">To start, first, we create a react-native project.<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">react-native init deepLinkingDemo\r\n\r\nCd deeplinkigDemo<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Once the project is created navigate to the project directory and then install all dependency of the react-navigation.<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">npm install @react-navigation\/native\r\n\r\nnpm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community\/masked-view<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">For\u00a0 the ios device, we have to run some commands:<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">cd ios\r\n\r\nPod install<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now we have to create a router and two view page.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">i. Router.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ii. Home.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">iii. Profile.js<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now, import the Router.js file in the app.js<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">import React,{useEffect} from 'react';\r\n\r\nimport { createAppContainer } from 'react-navigation';\r\n\r\nimport router from '.\/Router\u2019;\r\n\r\nconst AppContainer = createAppContainer(rootNavigator);\r\n\r\nconst App = (props) =&gt; {\u00a0\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;AppContainer\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0ref={navigatorRef =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0NavigationServices.setTopLevelNavigator(navigatorRef);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0);\r\n\r\n}\r\n\r\nexport default App;<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now we have to create the router.js<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">\/**\u00a0 router.js **\/\r\n\r\nimport React from 'react';\r\n\r\nimport {\r\n\r\n\u00a0AppRegistry,\r\n\r\n\u00a0Text,\r\n\r\n} from 'react-native';\r\n\r\nimport { StackNavigator } from 'react-navigation';\r\n\r\nimport Home from '.\/home';\r\n\r\nimport Profile from '.\/profile;\r\n\r\nconst Router = StackNavigator({\r\n\r\n\u00a0Home: { screen: Home },\r\n\r\n\u00a0Profile: { screen: Profile },\r\n\r\n});\r\n\r\nexport default Router;<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">We will go ahead and create the Home.js<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">\/** Home.js *\/\r\n\r\nimport React from 'react';\r\n\r\nImport {Plateform, Text, Linking} from \u2018react-native\u2019;\r\n\r\nclass Home extends React.Component {\r\n\r\n\u00a0static navigationOptions = {\r\n\r\n\u00a0\u00a0\u00a0title: 'Home',\r\n\r\n\u00a0};\r\n\r\ncomponentDidMount() {\r\n\r\n\u00a0if (Platform.OS === 'android') {\r\n\r\n\u00a0\u00a0\u00a0Linking.getInitialURL().then(url =&gt; {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0this.navigate(url);\r\n\r\n\u00a0\u00a0\u00a0});\r\n\r\n\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0Linking.addEventListener('url', this.handleOpenURL);\r\n\r\n\u00a0\u00a0\u00a0}\r\n\r\n\u00a0}\r\n\r\n\u00a0\u00a0componentWillUnmount() {\r\n\r\n\u00a0\u00a0\u00a0Linking.removeEventListener('url', this.handleOpenURL);\r\n\r\n\u00a0}\r\n\r\n\u00a0handleOpenURL = (event) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0this.navigate(event.url);\r\n\r\n\u00a0}\r\n\r\n\u00a0navigate = (url) =&gt; {\r\n\r\n\u00a0\u00a0\u00a0const { navigate } = this.props.navigation;\r\n\r\n\u00a0\u00a0\u00a0const route = url.replace(\/.*?:\\\/\\\/\/g, '');\r\n\r\n\u00a0\u00a0\u00a0const id = route.match(\/\\\/([^\\\/]+)\\\/?$\/)[1];\r\n\r\n\u00a0\u00a0\u00a0const routeName = route.split('\/')[0];\r\n\r\n\u00a0\u00a0\u00a0\u00a0if (routeName === 'Profile') {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0navigate('Profile', { id, name: 'Mohan' })\r\n\r\n\u00a0\u00a0\u00a0};\r\n\r\n\u00a0}\r\n\r\n\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0return &lt;Text&gt;Hello there&lt;\/Text&gt;;\r\n\r\n\u00a0}\r\n\r\n}\r\n\r\nexport default Home;<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now to create the JSON file for data.<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">export default\u00a0 people = {\r\n\r\n\u00a00: {\r\n\r\n\u00a0\u00a0\u00a0name: 'Leela',\r\n\r\n\u00a0\u00a0\u00a0image: 'http:\/\/vignette1.wikia.nocookie.net\/en.futurama\/images\/d\/d4\/Turanga_Leela.png\/revision\/latest?cb=20150218013044',\r\n\r\n\u00a0},\r\n\r\n\u00a01: {\r\n\r\n\u00a0\u00a0\u00a0name: 'Bender',\r\n\r\n\u00a0\u00a0\u00a0image: 'https:\/\/vignette2.wikia.nocookie.net\/en.futurama\/images\/4\/43\/Bender.png\/revision\/latest?cb=20150206072725',\r\n\r\n\u00a0},\r\n\r\n\u00a02: {\r\n\r\n\u00a0\u00a0\u00a0name: 'Amy',\r\n\r\n\u00a0\u00a0\u00a0image: 'https:\/\/i.ytimg.com\/vi\/4sCtTq7K3yI\/hqdefault.jpg',\r\n\r\n\u00a0},\r\n\r\n\u00a03: {\r\n\r\n\u00a0\u00a0\u00a0name: 'Fry',\r\n\r\n\u00a0\u00a0\u00a0image: 'http:\/\/www.supergrove.com\/wp-content\/uploads\/2017\/03\/fry-futurama-22-which-robot-from-quotfuturamaquot-are-you.jpg',\r\n\r\n\u00a0}\r\n\r\n}<\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now we go on the Profile.js<\/span><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true \">import React from 'react';\r\n\r\nimport { Text, Image, View, StyleSheet } from 'react-native';\r\n\r\nimport people from '.\/people';\r\n\r\nclass Profile extends React.Component {\r\n\r\n\u00a0static navigationOptions = {\r\n\r\n\u00a0\u00a0\u00a0title: 'People',\r\n\r\n\u00a0};\r\n\r\n\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0const { id } = this.props.navigation.state.params;\r\n\r\n\u00a0\u00a0\u00a0if (!people[id]) return &lt;Text&gt;no user found&lt;\/Text&gt;\r\n\r\nreturn ( \/\/ C\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;View&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Text style={styles.text}&gt;{people[id].name}&lt;\/Text&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;Image\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0resizeMode=\"contain\"\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0style={styles.image}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0source={{ uri: people[id].image }}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/View&gt;\r\n\r\n\u00a0\u00a0\u00a0)\r\n\r\n\u00a0}\r\n\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n\r\n\u00a0text: {\r\n\r\n\u00a0\u00a0\u00a0margin: 19,\r\n\r\n\u00a0\u00a0\u00a0fontSize: 22,\r\n\r\n\u00a0},\r\n\r\n\u00a0image: {\r\n\r\n\u00a0\u00a0\u00a0width: 400,\r\n\r\n\u00a0\u00a0\u00a0height: 400,\r\n\r\n\u00a0},\r\n\r\n});\r\n\r\nexport default Profile;<\/pre>\n<p><span style=\"font-weight: 400;\">Ok, our basic code setup is completed. Now we have to configure the native things in Xcode for iOS and in Android studio for android. Ok, let&#8217;s see the configuration.<\/span><\/p>\n<h3><b>iOS Configuration<\/b><\/h3>\n<p><b>Step 1: Add URL type to <\/b><span style=\"font-weight: 400;\">info.plist<\/span><\/p>\n<p><span style=\"font-weight: 400;\">i. Open info.plist and create the new property called URL types.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ii. Choose URL schemes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">iii. Give item 0 the name you would like your app to be linkable as. In our case, I choose peopleapp as the name.<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6595 size-full\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/1-2.png\" alt=\"\" width=\"664\" height=\"425\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/1-2.png 664w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/1-2-300x192.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/1-2-624x399.png 624w\" sizes=\"(max-width: 664px) 100vw, 664px\" \/><\/p>\n<p><b>Step 2: Add the following lines in <\/b><span style=\"font-weight: 400;\">AppDelegate.m<\/span><\/p>\n<p><span style=\"font-weight: 400;\">i. Add this line at the end of imports<\/span><\/p>\n<pre class=\"lang:default decode:true \">#import &lt;React\/RCTLinkingManager.h&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">ii. Add this code below @implementation AppDelegate<\/span><\/p>\n<pre class=\"lang:default decode:true \">- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url\r\n\r\n\u00a0sourceApplication:(NSString *)sourceApplication annotation:(id)annotation\r\n\r\n{\r\n\r\n\u00a0return [RCTLinkingManager application:application openURL:url\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0sourceApplication:sourceApplication annotation:annotation];\r\n\r\n}\r\n\r\n- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity\r\n\r\nrestorationHandler:(void (^)(NSArray * _Nullable))restorationHandler\r\n\r\n{\r\n\r\nreturn [RCTLinkingManager application:application\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0continueUserActivity:userActivity\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0restorationHandler:restorationHandler];\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Ok, nice we have to do all the things for ios now for testing we have to pass the below line the URL in chrome and safari:-<\/span><\/p>\n<pre class=\"lang:default decode:true \">peopleapp:\/\/people\/0<\/pre>\n<p><span style=\"font-weight: 400;\">And the app should redirect to the profile screen and the person\u2019s info.<\/span><\/p>\n<h3><b>Android Configuration<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">First, we have to open the AndroidManifest.xml file and the following intent filter below the last intent filter within the &lt;activity&gt; tag:<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;intent-filter android:label=\"filter_react_native\"&gt;\r\n\r\n\u00a0&lt;action android:name=\"android.intent.action.VIEW\" \/&gt;\r\n\r\n\u00a0&lt;category android:name=\"android.intent.category.DEFAULT\" \/&gt;\r\n\r\n\u00a0&lt;category android:name=\"android.intent.category.BROWSABLE\" \/&gt;\r\n\r\n\u00a0&lt;data android:scheme=\"peopleapp\" android:host=\"people\" \/&gt; \/\/ A\r\n\r\n&lt;\/intent-filter&gt;<\/pre>\n<p><span style=\"font-weight: 400;\">After doing all these things, we have to open the android studio and do some configuration.<\/span><\/p>\n<pre class=\"lang:default decode:true \">Open Android Studio -&gt; Run -&gt; Edit Configurations and change the launch options to URL, passing in the following URL: peopleapp:\/\/people\/1<\/pre>\n<p><img decoding=\"async\" class=\"alignnone wp-image-6596 size-full\" src=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/2-1.png\" alt=\"\" width=\"1000\" height=\"707\" srcset=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/2-1.png 1000w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/2-1-300x212.png 300w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/2-1-768x543.png 768w, https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/2-1-624x441.png 624w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Now we have to run this app and we achieve Deep Linking in our application.<\/span><span style=\"font-weight: 400;\">\u00a0 \u00a0\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog. I will explain how we can use deep linking in react-native. Nowadays we can use deep linking in many regular applications like Flipkart, Amazon, etc. First, we will discuss what is actually deep linking? Deep-link is a technique in which a given URL or resource is used to open a specific page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6593,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[412],"tags":[14,577],"class_list":["post-6592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-innovationm","tag-react-navigation-deep-linking"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React navigation deep linking - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React navigation deep linking - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"In this blog. I will explain how we can use deep linking in react-native. Nowadays we can use deep linking in many regular applications like Flipkart, Amazon, etc. First, we will discuss what is actually deep linking? Deep-link is a technique in which a given URL or resource is used to open a specific page [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-09T08:10:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"React navigation deep linking\",\"datePublished\":\"2021-02-09T08:10:51+00:00\",\"dateModified\":\"2023-01-20T13:25:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/\"},\"wordCount\":467,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/React-navigation-deep-linking.png\",\"keywords\":[\"InnovationM\",\"React navigation deep linking\"],\"articleSection\":[\"React Native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/\",\"name\":\"React navigation deep linking - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/React-navigation-deep-linking.png\",\"datePublished\":\"2021-02-09T08:10:51+00:00\",\"dateModified\":\"2023-01-20T13:25:08+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/React-navigation-deep-linking.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/React-navigation-deep-linking.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/react-navigation-deep-linking\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React navigation deep linking\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React navigation deep linking - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/","og_locale":"en_US","og_type":"article","og_title":"React navigation deep linking - InnovationM - Blog","og_description":"In this blog. I will explain how we can use deep linking in react-native. Nowadays we can use deep linking in many regular applications like Flipkart, Amazon, etc. First, we will discuss what is actually deep linking? Deep-link is a technique in which a given URL or resource is used to open a specific page [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-02-09T08:10:51+00:00","article_modified_time":"2023-01-20T13:25:08+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"React navigation deep linking","datePublished":"2021-02-09T08:10:51+00:00","dateModified":"2023-01-20T13:25:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/"},"wordCount":467,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png","keywords":["InnovationM","React navigation deep linking"],"articleSection":["React Native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/","url":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/","name":"React navigation deep linking - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png","datePublished":"2021-02-09T08:10:51+00:00","dateModified":"2023-01-20T13:25:08+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/02\/React-navigation-deep-linking.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/react-navigation-deep-linking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"React navigation deep linking"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6592"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6592\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6593"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}