How to implement deep linking in React Native with React Navigation v5 in 2021
HTML-код
- Опубликовано: 7 авг 2024
- How to implement deep linking in React Native with React Navigation v5.
A deep link is a link that takes you to content.
Deep linking is when a link sends users directly into a specific point in the app experience, rather than an external website or app homepage.
Github Repo for Code
github.com/AnkitDroidGit/Reac...
Article Blog on the topic - ankitkumar.dev/react-native-d...
Commands For testing
- npx uri-scheme open demo://app/notifications --platform [android/ios]
- npx uri-scheme open demo://app/profile/1001 --platform [android/ios]
React Hooks Playlist
• React Hooks for Beginners
Fundamentals of GraphQL in Hindi
ttps:// • Fundamentals of GraphQL
Please share your suggestions and feedback with me in the comments below or on Twitter.
Twitter - / kumarrankitt
Linkedin - / kumarankitkumar
Facebook - Tech.Talks.With.AK
Telegram: t.me/TechTalksWithAK
Demo App description :(0:00)
Demoing deep link :(0:55)
Basics of deep link :(2:31)
Configuring deep link for iOS (Native Part) :(5:13)
Configuring deep link for Android (Native Part) :(6:50)
Deep link based navigation(React Native) :(7:22)
Testing deep link on iOS :(9:33)
Testing deep link on Android :(10:43)
Wrapping up :(11:26)
#reactnative #deeplinking #reactnavigation 
Наука
I am planning to do live practice sessions on interviews so that new engineers can be benefited from it and it helps them find jobs in their career.
If you are preparing for the new job interview, it can help you practice for the interview.
Write me at admin@ankitkumar.dev for scheduling a session.
Thanks !!!
Subscribe channel to get notified about interesting technical videos - ruclips.net/user/TechTalksWithAK
Awesome video mate. thank you so much
good job you saved my ass. I was going crazy about deep linking and your video saved me.
thank you, buddy!! great video :))
thank you, very practical and useful
Very good and documented tutorial, thank you!
Thank you much more for the wonderful content.
nice video and excellent didactic. you only forgot of show how get the id in react native profile component but the github repo helps with that. thanks for the tutorial. stills works 2022
Great brother. Love it.
Thanks, any ideas on deferred deep linking for new app users?
Thanks, you are great.
Superb ✌️✌️
Hi thanks for the video, please I have a problem, how do implement that for a file with a custom extension I mean my application generates a .kw extension I wish to open my application on a certain page using deep linking when the users click on the extension can you help me? thanks, in a advance
Thanks Bro with your help I was able to solve me issues
Glad to know it helped you 😊
Amazing talk! Thanks man
Glad to know about that you liked it. Thanks man ❤️
Thanks for sharing pro. But I have a problem is when I kill it not work can you give me some idea? Thanks
Hi, Nice video and helps a lot. I have one question though, in one of my projects I have both stack navigation and bottom navigation, This explanation is only passing the linking doc once. I want to pass both for stack navigation and bottom navigation.
It'd be great if you reply with a solution.
Thanks.
How to navigate on touch of notifications in kill state to specify screen ?
what if we dont have app installed and we have link then it should go to app store or play store.
hey can you guide me how to share deep link url in social networks and redirect to our app..??
What if app is not installed will it redirect to content after installing the app?
react navigation 5 deep linking work well when app open but when i killed or exit my app it show that screen but it does not redirect back like i am inside tab navigation home screen and navigate to detail screen that is outside the tab navigation. if i open detail screen via deep link it does not go back to home screen. please help me
hi bro ...
when I do this I can open deep link with nix in terminal
But if I try in safari and write my deep link it just open my app and does not go to specific page that I want
is it possible to help me pls
How can I set up navigation with a deep link within the app when I click on the notification. demo: // ap I've created a similar link. Clicking this link will direct you to open the application. But when I click on every notification I want, it will direct you to the relevant page. I am getting the url of incoming notifications. Can you help?
How do we handle nested deeplink?.. Hope you explain about nested route deeplink as well.
@@ArchitecttAK Yes. deep link with nested navigators by nested deep link. Cool.👍
Thanks, How to pass datas to nested navigations like Root stack then tab navigation and inside tab another stack navigation. Any guidance ??
i just have one question. how can paste that url to browser or click in url to open App? Please help me
Hi buddy, Actually pasting custom deeplink url in the browser doesn't open app. You can test your custom deeplink via "commands" or opening the url from another app, such as whatsapp or email.
Commands for Android and iOS are written in description box. Please check it.
thanks sir, great video. but how can we open application via browser. my app is getting opened though commands like you described in video but not getting opened through browser, can you please make video on that
I am also having the same issue. Did you find any solution?
Wow!! thanks for such great video bro, have been wondering to do this from long time....you saved my day😊
You are welcome bro 🙂
Great video, thanks for sharing bro.
I have an question, when I kill the application and run this command npx uri-scheme open demo://app/profile/1001, it is not show the profile screen.
Deep link only run when app is running?
@@ArchitecttAK Yeah, it's working now bro, thanks for this great video, if you dont mind bro, I have some request video for you about testing with jest. I hope you can create video about testing (mocking api call axios) with jest.
Thank your very much.
@@ArchitecttAK Bro, I have one question, what if my func for UI application is AppDelegate.m is not empty, because I already define google sign in right there,
- (BOOL)application:(UIApplication *)application openURL:(nonnull NSURL *)url options:(nonnull NSDictionary *)options {
return [RNGoogleSignin application:application openURL:url options:options];
}
And I want to put my deep linking
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary *)options
{
return [RCTLinkingManager application:application openURL:url options:options];
}
How I can do that?
What will happen if app is not install??
Does this work if app is closed?
How can I implement nested routing?
I got stack bar, tab bar, then only the page..
It's not working..
First Route:
Second Route:(Inside home)
I need to get to Live... how to do?
Hey buddy, let me look in this over the weekend.
How to pass multiple Params?
how to use this with react-native-navigation
did you eject your expo application to implementing deep linking?
Hey Wesley, I haven't used expo for this application. Infact I used expo only once during my career. I am RN CLI kinda developer rather than expo.
What code you wrote on the profile screen to get the query string?
All code is available on GitHub repo. Link is in description.
you have shown deep link but not universal links and applinks....plz make make video on ios-universal link and android--applinks..thanks..will be very greatful...
Thanks
You are welcome
Can you please make a video on React-Native specific VS code setup?
Sure, I was away since a while from RUclips, I will resume uploading content soon.
how can i use a qr code contaning the link to open a app?
You might need to code QR code reader in your app.
Or else use any other QR code reader that opens deepllink from WR code in browser, then browser will redirect to your app.
how to run this in real device
Hi Bro,
How to open a react native android app from external apps. Need to open an app from Whatsapp chat or Instagram chat. Eg: If i share this link to someone on whatsapp. They should open my app just by clicking. I have done this on iOS. Please reply..
It can be opened using deeplink. Please read more about it here reactnative.dev/docs/linking
@@ArchitecttAK I have tried that it is not working bro
@@ArchitecttAK There are two options one is with http or https and other one is with say for eg: clicking on this link androidapp://
from WhatsApp or any messaging app
should open my app in android devices
bro RTCLinkingManager.h give error file not found
You have to add $(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS to your "Header Search Paths" in the Build Config of your project.
You can find more information here reactnative.dev/docs/linking-libraries-ios
Can you continue making videos about React Native?😁
Hi Diko, Yes I can. But I would need list of topics for that. Could you please provide your topics here on via email to admin@ankitkumar.dev.
Thanks.
How to redirect link to app store Or play store if app is not installed?
You need to use iOS Universal Linking and Android App Linking. Custom Scheme doesn't support opening app store or play store.
@@ArchitecttAK can Firebase dynamic links useful to do this?
Yes, you can use firebase dynamic link as well to achieve this, if you don't have any issues displaying long url in browser for sometime.
@@ArchitecttAK Any videos for that?
Sorry, Haven't created any video on that topic. I have plans to create a video on firebase dynamic link with flutter.