How to Open an App from an Expo React Native App using App Linking and Passing Route Parameters

hi everyone today I'm going to show you how to link between two different apps so I'm going to create one app that's going to link to another and one app that going to be the app that is opened when you click on the link and that app is going to have multiple screens so you can go to different routs so I've just created my app and I'm now going to go ahead and open it in Visual Studio code I'm going to add a scheme inside the app that I'm linking to and that's going to be what I refer to when I am using the linking library and so yeah when I publish this app it's going to have this link to scheme that um other apps will refer to it by change directory into my link to app and then I'm going to go ahead and install Expo router and a few different um dependencies that I have so one's exper link as well this is just going to allow me to add the navigation to my app I'm using Expo router so I can just create a folder called app and then I can have an index.js in there which is going to be the one that opens when a user opens my app I'm just importing the different components I'm going to need from react native then I go ahead and export my um screen which is just my home screen for the screen I'm going to have it linked to the other page of my user settings page and by putting that username in square brackets is going to be passed as a um parameter and I can Define that parameter here you can see that that um the parameter name aligns with the um what is in the path name I'm also giving some text so when the user is looking at this page they're going to to see a view user um button effectively that they can then open that um that user settings page for miscoding just quickly setting up some styles for this page but it's going to be pretty basic just centering everything inside that page now I'm going to create the user settings page and for that I'm going to just use that square brackets username um so that aligns with that path name and so it will resolve correctly and um automatically link to this page this is um Expo router and it makes it like quite easy to add new routes without having to um go ahead and manually Define them somewhere which you would have had to previously do going to get that username and I'm going to get that from this use local search prams which I've imported from Expo rter and I'm just going to go ahead and display that on screen so that it's clear that I am actually able to get that value out and I'll give that style to the view and I'll go update my um index page as well going to go ahead now and start my app and I can sort of see that's failing to resolve that module um I think that What's Happening Here is when you're using expirat you need to Define um basically that you're not using um the normal um app entry so I need to go and specify that inside um my package Json so I need to specify that I'm using Expo router SL entry instead that should clear up that issue awesome I've got my view user and when I click it it goes to welcome Miss coding I just saved my file so it apply The Styling so now that I've got my basic application ready there for um my links to app I'm going to go ahead and create the build configuration I'm going to need the build configuration so I can test that it actually works with linking to it so that it's got its own sort of Standalone app I'm going to specify simulator um is true um and the reason I want to do that is um I want to be able to test on the simulator for iOS otherwise I'd have to um make sure I have like a development profile so I can install in my um um personal device now that build profiles configured I can go ahead and build that um development profile for iOS it's going to go ahead and ask me if I want to install Expo Dev client cuz that's what's required to actually run the Standalone app and so I've said yes to that and it's going to go ahead and do that and it's going to ask me a few questions and just go through some additional configuration I might need then it's going to go ahead and cue my build and start building when the queue when the que is ready for my build basically so now I'm opening another tab in my um terminal and I'm going to go ahead and create my um my linking app so I'm creating a new app and this is the one that's going to link to the app I just created I'm calling at linking app I'm going to then change directory into my linking app and I'm going to install some things I need which is going to be exper linking now I've opened both my app inside Visual Studio code and I'm just going to go and add some necessary information to my linking app when you're um linking to an app in an iOS app you're going to need to add to the info list this um key value um pair and so I go ahead and add that it's basically is the scheme so or the scheme the scheme that I defined in my other app. Json file I'm going to have a few um status variables here so I'm going to use State um which is basically a react hook that when the state date changes it will trigger rendering so I'm going to have can open home uh which is a state variable which when that changes will trigger the reender and set can open home which will be used to change the state variable and thus trigger the reender I'm also going to use this use effect react hook what this does is basically it will run only once the page initially load you can see that CU I've got no dependencies here um so it basically will run only once because it will run whenever anything in this empty array which was past the second parameter to use effect um changes next I'm importing star linking from Expo linking I'm just going to check whether I can open that URL I'm going to check the URL and if I can open it I'll set the relevant um State variable the other one I'm setting is set can user um and to do that I'm going to need to specify the user path so I've got my user path that I had and then also my username which I've specified as friend in this case so if you remember previously I had the um route user SL and square brackets username which meant that I could pass anything as a usern name and it would be um pass as a parameter I'm going to go ahead and display these on screen I'm also going to go ahead and add a button the button the button that I'm adding is going to be used to open those pages so I've got a title of open homepage and on press I'm going to um use that linking to open the URL and I'll just pass that URL there the linked to colon slash which aligns with the scheme on the other app so if you're wanting to use like some other app like um maybe Lyft or Uber you can probably look at their documentation to find what their scheme is and include them in the app. Json infop pist array um and also yeah use it within your app itself to link to it and that can create like a good immersive experience for your users like and integrate with other apps without you having to build out all that functionality so now I'm going to go and configure the build configuration for this um linking app and once again I'm going to go ahead and add that I want for iOS the simulator to be true which means I can install it on the simulator rather than installing it on a physical device which would require me to have an apple developer account this means it's really easy to test then I'm going to go ahead and build it for the um platform iOS and profile development it's going to go on ahead and prompt you to install the Expo Dev client and I've agreed to this once again and I'll ask for a couple of other configuration things before queueing your build over on Expo and I have downloaded my links to app going to go ahead and install that on my I simulator so I've dragged link to across and it's installed now I can go ahead and run Expo start with d-d clamp which will open it inside that Standalone linked to app see it's looking for me to open it in um link to and it will open it this is just my link to app so it's just the same thing where if I click view user will take me to miscoding um user because that's what I'd hardcoded in there for the homepage I reloaded that you can see it just takes me back to the homepage now if you didn't have an app that you were using to test the linking to your app you can actually run this command here which is going to test it for you so you can run this MPX X URI scheme open linked to and then pass the um URL you want to open and also the platform you can see that's prompting me to open link to and it opens to that page I can do the same again but pass in my user route and I'm just showing you that I'm putting in a different one and you can see see it opens my username I can also show you a bad path and it's going to not fail it's going to fail because it doesn't have that path there you go I hope that's a useful tool for you to know about so that you can test without creating a linking app if you want to enable people to link into your app now that I've shown you that I'm going to go ahead and show you my linking app and show you how that works looks like it's still building so we'll wait for that and download it now also you can build them locally if you don't want to cue them um but it's just a little bit more effort just in terms of what you need to set up I just dragged my linking app across onto my iOS simulator you can see it's installed there then I'm going to go ahead and run npx Expo start d-d client for my linking app it says that link 2 is already running on Port 8081 so it's running my linking app on a different port this is good cuz I want both apps running so that I can click on through to my links to app just going to go ahead and build that bundle and I've got those buttons I'm just going to fix up the um display issue that I'm having with the um can open user I just need to convert that to a string you can see that's true so I'm going to go ahead and click on open user page and it says welcome friend and I can go back to my app and I can also open the homepage if I click on view user there it takes you to welcome Miss coding because that's what I had coded whereas inside my linking app I'd hardcoded um friend is the username route so that's why it was linking to um welcoming the friend user I hope you've enjoyed this tutorial today if you have please like And subscribe for more content all my code will be available on GitHub and I look to forward to doing a new video soon

Channel: MissCoding

Views: 1,798

Keywords: misscoding, tech tutorials, learn to code, mobile development, tech career, software engineer, woman in tech, deep linking, expo react native app linking, expo react native app scheme, expo react native tutorial, react native tutorial

Id: odenjd0kGGg

Length: 19min 46sec (1186 seconds)

Published: Mon Mar 18 2024