How to implement deep linking in React Native with React Navigation v5 in 2021

[Music] hey guys welcome to tech talk it's ankit kumar as you can see on my screen i have created one stack navigator using direct navigation stack and react navigation native i have created four screens as you can see here home screen notification screen profile screen settings screen i have built this application onto my android and ios virtual devices if i navigate to my application it will show you four screens as you can see here if i click on go to notification it will go to notification if i click on go to setting it will go to setting if i click on go back it will go back then again go back go back back to home same on android go to profile then click go to notification click go to settings click go back go back go to notification go back go back go back to home what we are building today let me just show you i am typing command here npx uri scheme open demo app profile 234 on ios you can see this command here its npx uri scheme open demo app profile 234 on ios if i run this command it opens profile screen onto my ios device with deep link id 234 because i have passed id here 234 if i pass something else for example thousand it should show a thousand right it is showing thousand now let me run same command for android deep link is working on both the platform android and ios if i go to another screen say notifications android has moved to notification screen if i run this command for ios it should navigate to notification screen yes it has done i can go to settings screen as well so it's going to settings if i run again profile for ios with id 102 it should go back to profile with id102 uri scheme commands for testing your deep link i have provided into description box so you can find all these commands into description box let's not waste time start coding before jumping into code let's understand basic objective link what is deep link a deep link is a link that takes you to a content deep linking is when a link sends user directly into a specific point in the app experience rather than an external website or home page most web links are usually deep links deep link basics there are three kind of deep links android app links ios universal links and uri schemes let's understand a bit of all of them let's start with url scheme uri scheme were the original form of deep link for mobile apps they are like creating private internet for your app with the links that looks like demo and path to content advantage of custom uri scheme is they are easy to set up this advantage is a user's device only knows about this private internet if corresponding app is already installed there is no graceful fallback option by default means if application is already installed on your phone then only this custom uri deep link will work and open the target application if application is not installed there is no fallback by default links apple introduced universal links in ios 9 as the solution to the lack of graceful fallback functionality in custom uri schemes universal links are standard web links for example http google.com http mydomain.com http that points to both a webpage and a piece of content inside an app when a universal link is open ius check to see if any app installed on your device is registered for the domain if so app is launched immediately without ever loading the web page if not web url will be loaded in safari what is android app links google built app links for android and it's equivalent to ios universal links a standard web link that points to both webpage and a piece of content in app this results in smoother user experience on android also since custom uri schemes are still fully supported by every version of android app links have not been so much popular it has very low adaption let's now jump to the code let's now start coding for deep link i'm starting my project from scratch in my code i don't have any deep link right now it will not open anything here and i'll start it from scratch now we will first set up deep link configuration on native part of ios so open your project folder inside your project folder go to ios folder and open the link x workspace file once you open your xcode project click on project then choose target go to info on the bottom you will see url types you need to add url scheme as demo since our deep link scheme is demo add demo an identifier is project name you can see here or project name here or target name it has been added save it go to appdelegates.m file and on the top of this file add and import react rtc linking manager dot edge and at the end of file you need to add one function that will open urls from deep link type open url options add this line return rtc linking manager application application open url url options options this will allow to open react native applications to open this url which has been received from deep link and close your xcode go to android project traverse to android manifest.xml file we need to add new intent filter here add new intent filter which has action as view category as default and browseable add data host as app and scheme as demo so we have covered android and ios native changes for tabling after completing native changes on android and ios if we run deep link url now it will open our app but it will not traverse to profile screen let's try this so it has opened our app and it is on home it is not traversing to profile page as you can see i have given profile deep link url we need to add some react native code so that it can directly land to the profile page let's make some changes inside src folder let's create one file called linking.js let's create config here for our tablink it will have screens cost linking prefixes demo colon slash less app will be our prefix now our react native app will listen for this url and pass all the config for screens to the linking export linking so that we can use it now let's add screens so we have home screen path for home screen will be home we have profile screen path for profile will be profile slash id we will show some id passed by url deep link on the profile screen parse id from id as id we have notifications screen path for notification is naughty and settings screen add setting as path for settings now we have created linking config let's use it inside app.js so import linking from linking and pass it inside your navigation container as linking so linking is equal to linking imported from linking save it and let's now try to run our application [Music] our application is running now successfully let's test whether diplink is working or not npx uri scheme as you can see npx uri scheme open demo app notifications for ios this command should open notification screen on my ios emulator i am just typing here and it should open notification screens yes it has open notification screen if i pass profile with 1 0 2 0 value it should open profile screen and it should print 1 0 2 0 as table link id and yes it's working fine let me test it for android let's run android application as well deep link application is now running on android let's try same command onto android i am opening profile page from deep link with id 1 0 2 3 so it should display 1 0 2 3 as deep link id on profile screen and it's yet it's working if now i open notification screen it should open notification screen onto my android application and yes it's opening that's pretty much for today's video and we have learned how to use deep link with react navigation native and react navigation stack if you have any question or any suggestion please type your feedback or suggestion into comment below please find the link from description if you find this video useful for you please like it share with your friends and subscribe thank you

Channel: Tech Talks With AK

Views: 21,979

Keywords: react navigation custom URI scheme deep linking, react navigation deep link, reactnative deeplink, react navigation v5 deeplink, Android app links react navigation, react native deep link implementation, react native deep linking, deep linking in react native app, Android app links react native, ios universal link react navigation, Deep linking react native, iOS universal link react native, Custom URI scheme deep link in react native, Deep linking, react navigation, react native

Id: s8YaclRknYw

Length: 11min 53sec (713 seconds)

Published: Thu Nov 26 2020

Reddit Comments

[u/stacktraceyo]

Is there deep link?

[u/justlasse]

So deep linking....?