You’re doing React Native Routing wrong - Expo File-Based Routing 😱

let's talk about the Expo router and the new file based routing for react native applications everything we talk about still a bit experimental I will go through all the new cool things that we can use with the export router for our react native applications however things might change in a few weeks or in a few months so keep that in mind if something is not working yet we're just going to get started with a new Expo app so npx create Expo app latest I'm going to just call this Galactic app and we're going to start the example with router so probably that's going to change in the future once we're in that project I will also touch the TS config because I actually want to use my application with typescript and then simply follow this up by running npx Expo because this will ask you for it looks like you're trying to use typescript you want to install this and then just hit yes and then your react native application is good and ready to work with typescript so I'm going to open the iOS simulator we're probably also going to take a look at this on the web that might make sense because then we can actually see easily the path of our application yeah that totally makes sense uh so let me put this to the side and then we can dive into this uh so I'm going to press W and also open our Galactic app right here we're going to switch between that and the simulator a bit so however welcome to Expo start by creating a file in the app directory which we actually don't have so let's get started and create a new app directory and this is where all the magic is gonna happen we now just Define files in that app directory and they will become a pair of our application so as you know every application usually begins with an index file and within that index file I'm going to say react native functional export component and I'm going to call this the login page so after hitting save we immediately see let add index we are now serving this page in here as well it's covering the whole page now you might say oh this looks horrible yeah it does because we don't really have any kind of styling yet but we're going to get to that when we talk about layouts for now let's just quickly make our text centered on this screen and then uh we can add more routes to our application so usually we also have something like a register so let's add the register TSX react native functional export register page and actually actually I made a typo here actually we can now already go to this if we check out the web preview so on the web I should be able exactly to go to my regista page um and I'm always been it's a bit harder but of course I could do this somehow as well but anyway let's try and do this navigation from our login page now so on the login page I can now add a link so I can add a link using the explorator package and in that link I can set the href to something like register and kind of close this and there we go I can open register so let's see I can click this and I'm On the Radio Star page same for the web I can click this I'm on the register page now if you want to have something like a pressable or a button inside of that link which you usually want to have because or it looks pretty boring or you would have to style this you could use something like a pressable and then use a text element and say create account now if we do that what we want to do as well um here we hit save um how do I actually get back now here this might be a problem let's hit reload um if we want to use this correctly now it's not working anymore so what we need to do in the case we have a component in the link if we just add s child in here and then it will use the pressable and apply the link to that principle and we see we can finally navigate again and here we actually got a hover effect for that create account button now of course this is not everything um where can we go next uh we're probably on our register page we can make sure that this looks a bit better so let me just quickly change this to a simple layout so we also see this in the middle now what you usually see in Native applications is a navigation bar and we don't have a navigation bar yet for those cases you can add layouts so underscore layout.tsx and within that layout we now Define our layout and what we usually use for these situations is the react navigation package so we do it pretty much exactly like that Rec native functional export I'm just going to call this the stack layout um so here we go we got the stick layout and you know that usually for a stick layout you return something like a stack and do we have to I think we actually don't have to supply anything let's try this here we go uh index now has a header and we can go to register and we automatically got the back and same for Native application we just created the layout which wrapped our whole application in this stack layout and of course you can change how you want to uh have your stack appear so if you bring in some screen options you might now have something like a darkish color uh whatever you want header tint would be white and the font style here would be bold so this is something you can do however um maybe I also don't want to show my index page here which actually looks pretty horrible and also I will actually like to have this show as like lock in and not index which is not really user friendly in all those cases you can directly affect your stack layout here in the layout so if I want to say for my index page I would use the name index and set the options to you had a title login header shown actually fault so if I change this to true you would see the login up here and this would now route back to your login or actually that it routes the same but it would show up at this login now I'm hiding this because usually on the login page you don't really have a header but here we do have it and we have the back button as login now let's do something else which is using a modal because that's actually pretty easy as well let's just create a new file I'm going to call this modal.tsx and within the model I'm just going to drop the usual code now on the web we could actually already once again navigate to that page because every file in here simply becomes a route and by the way you can check out all your routes by just going to slash underscore sitemap oh no no removed it great Simon here we go sitemap and it shows up all the available routes we got the index we got the modal and we got the register and this is pretty nice to test out all the stuff of your application however I want to navigate to my model as an actual model and therefore what I'm going to do is I'm going to Define another stack screen in here so there we go stack.screen on our register page I want to include a button so on the register page yeah I can say something like create account for the header that's totally cool um so that shows up as create account however what I want to add is a button so I'm using header right and then I'm going to add a button so button uh oops not from react native types there we go button we kind of close that immediately I think um and then we go title come on title open and on press we're gonna do something so on press we're going to use the router to push our new model page and for that we can simply in every page or layout inject the router using the hook so use router from Expo router and then on press we can use it directly just like this router push model not navigate it's actually a push so if you don't use push it won't work now let's see um I can now push my modal page however that's not really what I wanted I wanted to have a modal page so how do I get this to display as a modal well we're gonna just add another stack in here so everything by default already becomes a route but if you add more information for a specific path then you can affect that so in my case what I want to do is for my modal uh I want to have as the options here I want to have the presentation set to and now cool thing happens we got nice code completion here so you can try out all of these uh card is pretty cool they have all different use cases like having something transparent in the background or opening but what we want to see is a modal so let's go back create account I'm going to probably just hit reload once just to make sure everything works uh no route named home exists in that is very true because the name is modal the name is modal there we go and voila and we have a nice modal page so once again just by setting the presentation mode we now got the model here but it is part of our navigation if we check this out now still the same navigation in here and of course inside of the model we can now inject once again a button to the header so we can actually close it so let's prickly quickly do that um we can use the header right yeah but probably I want to have header left actually so let's say header left of course you could use something like an icon in there and then for back action we don't really need any path so oops there we go already oh that was already the action so here we go close open works and with that you have already the basic outside area of an application now something uh you might want to have as well is navigation in the case of an unmatched route so for that you can actually create a new file which already uses a syntax we're going to see later which is basically catching everything else the syntax here is unmatched uh dot TSX and in the unmatched you can actually use the unmatched from Expo router so now if you hit something it will show up like this unmet route page could not be found go back and I will go back to your default index route and of course you can have a different kind of unmatched or four or four route in case you build your Rec native application for the web as well now this is cool for the general navigation of an outside area as you've seen the register the model stuff now what happens if we want to go into an inside area and have a tab bar in there this makes things a bit more interesting a bit more complicated but let's go through it what we're going to do is usually you would now create a new folder uh like app and then with an app you could have a new file index.tsx and I'm going to call this a react native functional I'm just going to call this um the I don't want to call this actually um yeah probably let's call it tabs and then on our index page I'm going to add another button so we can navigate to the inside area so that means we need another link here uh that we just want to make this a boring link yeah I think we're gonna do um probably gonna also handle this from code just because do you want to handle this from code or uh yeah probably let's do this would be a good example so usually you want to have something like handle press or handle login and then once again you can use the router use router things please add the import no that was not the shortcut for adding the import that's it and then we're going to have a function to handle the Press event on our login what we're going to do in the function is we're going to call the router dot do we get code completion today um usually we should get I don't know if co-pilot is killing my co-pilot killing my code completion router dot okay it should normally show up what we got in here but there's actually a replace in here and I'm going to replace my current route and what I want to do is I want to go to home in fact I want to go to underscore home home there we go so now I log in I'm unmatched route uh page could not be found home let's see oh yeah I called this app glorious idea let's go back and hit reload and there we go boom We are on app slash index however on the web this means if I go to login I would always have app here and for all kinds of routing now we will have app slash home or something if you don't want this so if you don't want to have a component path component appear in the path what we can do is we can switch this out and add brackets around this now what this will do is it will first of all mess up our routing because if we go to the site map what will the site map say um yes we got this page it kinda exists but we actually can't really navigate there as it's pretty much the same index file so we will need some way to handle this uh let's see how we can fix this first of all I want to add more files so let's add two files I'm going to call this one home.tsx because we actually don't really have the tabs um and this one will be the home page we can Center the text again but nothing fancy and then we want to pretty much make a copy of this or I'm going to edit a new page I'm going to call this profile.tsx so those will be the two tips um of our page and again on this page I'm gonna just add another link so we can then go back to our initial page of course you could handle this if you want to like delete the tokens and stuff but for Simplicity we will now just use it like that so now I I can actually go to app slash home and I can go to profile and as you can see no more app appears in the header because this is now a group and you can actually get really fancy um I don't know if this is going to really stay until the final version but you can have like app um test and then you can reach those files under different um uh different path so it can get really strange uh you can check out the react the Expo router documentation on those uh like real where is it like root layout or nesting Navigators it should be somewhere on their groups I can't find it right now um go check that out again so for now we just want to make our tap navigation work so that means from here clicking login should take us to the tabs layout which we don't have so what we're going to do we're gonna first of all rename this I'm going to rename this to tips because app is kind of confusing so I'm going to call this tips that also means in the index I need to make sure that I actually go to tabs I think otherwise it's probably won't work no in fact what we want to do is we need to navigate to home since we don't really have to go to tabs right yeah we should go to home I think that should work let's see yeah that brings us to the home page so now we're on this home page and in that new folder of that new group we can again Define a new layout so let's do this not a new folder just a new layout layout dot TSX and in the new layout.tsx we're gonna Define tabs so let me bring in some code for this here we go this would Define our tabs actually uh it doesn't really matter if we have a dashboard default or a different case so we do have the general tabs from export router pretty much the same setup like we used before with the sticker layout and then we Define the different screens we have a home screen and we have a profile screen and we can also again use the options to set the Tap bar label or to header title and also the icon really nothing fancy nothing really special to this routing however if we now check this out I'm gonna probably use this one here now if I now go to login we see we do have list we do have a count and we do have another generic index page so this is now a problem because um that index page I think we can actually get rid of that let's see if I get rid of that we only have two tabs however we have the usual problem if you Nest stack navigations you're going to get into trouble so we want to disable the header for tabs group and we can do this in our layout now this is the path where I struggled when I gave this a try I went into this here and tried to disable it and it's a bit confusing in which layout you need to work so sometimes you just need to play around with this a bit but in this case this the tabs is part of our stack layout here so we're going to our stack layout like the outside layout and I'm just going to add another stack dot screen and now I'm targeting the tabs and I'm targeting the tabs group directly so I can really have the exact name just like this in here and then I'm going to set the options and Set uh the options to header uh shown in false now if I bring this up here I should probably close this and voila there we go we have our nice inside area and I can even go back log in and log in and we see no more header and this is already sorry the general setup that like this covers pretty much 70 of applications you have an outside area you have a registration you probably have a model and then you have an inside area and from here on you can just get going and add your different files in here different groups in here it doesn't really matter it can be grouped or it could be something else because if we check out the web we see that this now so here we go slash is log in and then we have home and then we have profile you could have that Under tabs so if I remove the brackets here it would be under slash tabs profile if that makes your life easier it's just important to understand how this new concept of the react native Expo router works and under a sitemap again we can now nicely see our inside Pages here and we still see all the outside Pages now let's dive a bit deeper into creating a nested layout so as we can see we are now in this steps group but what if I also want to have another uh stack layout in here so therefore let's create a new folder and I'll hold this list so this will actually become a new part of our tips layout you need to be careful with that so I create a new index.tsx in here react native functional export and I'm going to call this the list page this will immediately show up right here as a new page of our tab bar so we're gonna have to find later ways to change this for now what we're going to do is we're going to change our list page to include a few links um two sub elements so from that list page I want to go to news one or News 2 or news 3 which means we do have both a nested layout and dynamic routes because I don't want to specify it for these pages I will just create a file id.tsx with those brackets and in here I'm now able to catch the information from the page so I'm going to call this the news Details page and what I'm going to do is I'm going to extract the ID from use search params it was pretty much exactly like it did before and I could now easily display my text in here just like this my news ID let's see I go to list I go to news one oh I still have an unmatched route so now it becomes a bit more challenging to figure out what we did wrong also if you check out the routing you would see that this new index page shows up as a fourth tab so this means we need to be careful and how do we change this we need to create another layout in here so every time that shows up a page and it looks kind of strange to you usually that means you should have another layout so in our list folder I'm now adding another layout I'm going to call this the news layout and what I do is I will just add a simple stack again which defines for the index page the header it doesn't actually matter what I really do in here the most important part is having that layout and saying that this is here the index page because now that page the list index page is not part of the parent tabs layout anymore and I should actually I'm still not 100 able to do it um but we probably get to that so let's add another entry for our list page list ID did I make any other mistake I hope I didn't um but we definitely need to include our new list page is a regular tab so let's add another tab in here tabs.screen so this will be the list so it will look into the list folder for an index.tsx or TS or JS and then I'm going to give it the tab label news and show a different kind of button so then it matches our tab bar and what we created before so we can see this actually why is there a size difference at the top I'm 100 sure about that difference that looks kind of strange and it still looks like a regular header let's try this first of all okay we still have the unmatched route which means I either haven't saved my files or I made a mistake in a different place so let's check this out uh can we check our site map So within the site map we should be able to go to slash list slash ID are we doing this from our index page we go to list we go to ID um we usually cool and we can directly access it I probably just need to reload my application let's log out and reload it and let's try again login news ah there we go any node finally shows up the ID up here and actually if you go to the ID page here oops I didn't want to do that if you go to the ID page and you want to affect something like the header here what you can do is you can just throw into your view again a definition for that screen so even at that point you can also use effect or use layout effect to grab the data that was passed to that page and that it would show up nicely so News 2 shows as News 2 and u3 shows the ID3 in the top and with that we have another layout inside of the news page which is a stack layout and displays all our information now why is this cool first of all we now have a dynamic route that we can navigate to so if somebody on the web shares this page because there's a cool news article on that page we can now directly share this link and it would open up like this on the web and you can make your call to the API and retrieve your data or whatnot but what's cool about this as well is that we now got deeper linking basically out of the box so there's um documentation section here about deep linking and on that section what I found is that I just closed my uh previous window that was in a great idea um so I'm gonna go back and open my hello please give me my file back uh localhost there we go so here we go we want to now directly open this page as a deep link because this is like the end game uh opening a deeper link inside your react native application and it is so unbelievable easy so what we can do is we can use a package called Yuri scheme which is mentioned I think in the documentation for deep linking um check it out so I think somewhere at the bottom Expo linking yeah we don't need to go through any of that testing With npx Yuri scheme so NPA Theory scheme open your deepling and then iOS or Android and that's exactly what we want to try out now so in my case I want to say npx Yuri scheme open and I want to open expo at what is my I hope this is still the one I used before [Music] um so Expo oh double thing here so your IP follows after Expo of course um and then we usually have that Port so we check it out here I have that Port I want to go to a list and some ID you need to pass and I think two um dashes here and then I'm gonna give it the platform so what I want to open is this I'm just going to make sure that I'm locked out and then I'm going to try this uh okay then it's probably just one dash so let's see uh cannot get tips list okay great example but apparently we're having the right um did I call this did I use the same setup um probably in my case tabs does not even exist anymore because I now use a group so it just becomes list slash nine thousand and voila it's still not working great always works probably now with a double slit oh that looks yes here we go we're on news page 9000 and that means I have directly opened this with a deep link now this is of course just trying this out but you can imagine you could have some kind of push notification and we just open your application so let's try this one more time because it's just so cool it opens my Expo application oh that is gonna be hard for it but it still works it still works because the we have the file based routing now definition which makes enabling deep links a lot a ton easier so we don't only have the benefit of General file based routing which I think is really interesting with react native but we also do get the benefit of using uh deep links a lot easier and I've seen even talk about this on Twitter before that they're working on a few other things to make that even better including better typescript support for this new kind of setup so definitely check it out take everything that we've said here with a grain of salt because it might change still uh in a few cases there's actually a comment here that things will definitely change uh probably related to groups as well I'm not exactly sure in which case it was but it is pretty cool and you can already get started like this so we had the login page we had the modal page and the simple stack navigation the inside tab which is in a group and then another subfolder which has a dynamic route to capture the ID um and with the unmatched we've seen how we can catch everything else that is not matching anything so if you use the three dots in a folder it would catch all the other routes that were not caught with any of the other files and again if something looks strange if you have a fourth tab or a child tab that shouldn't be displayed make sure you add another layout file to the group or to the folder which usually solves the problem so if you enjoyed this video you can also find the source code link below the video on galaxies.dev my online platform for everyone interested in the latest Cutting Edge web development Technologies go check it out and definitely also hit the like button and say subscribe for more react native videos and other cross-platform technology videos coming over the next time so hope you enjoyed this let me know what you think about the new react native file based routing I will hopefully catch you in the next video so until then Happy coding Simon foreign

Channel: Simon Grimm

Views: 33,778

Keywords: react native, expo, react native router, react native routing, expo router, expo file based routing, react native file based routing, react native tutorial, react native typescript, react native routing expo

Id: RglRiycD0oQ

Length: 30min 22sec (1822 seconds)

Published: Tue Apr 18 2023