React Native Tab Bar Routing with Expo Router

let's take a quick look at how we need to structure our files in a react native application if we want to build a tab bar using the new Expo router hey everyone what's up this is Simon from galaxies.dev back with a quick tutorial on the new export router so we're going to use file based routing in this tutorial and I've already started a new application so I'll use npx create Expo app latest I call this tabs app and I made this with router so you can also manually integrate this but it's actually faster if we do it like this I also attached the TS config and ran npx Expo to start the live reload for my device and also in the browser and now we're gonna do something cool because we're going to build a tab bar and I'm going to show you how you need to structure the files correctly if you want to have both the tab bar navigation inside the temp bar and also navigation outside of the Tapper because that was a question I got last time we did a video about this so let's create a new folder uh calling this app and within app you usually create an index.tsx which represents the first element you're going to see on the screen so here we go here is my first element now the important part comes and starts right here because we're going to create a root layout so underscore layout.tsx and what we're going to do is we will not have our Tap bar here at the root level but instead we gonna create a stack navigation because then the Tap bar will basically just be one screen in that stack and we can have different screens which are pushed above the Tap bar so it is a bit different to think about it even from the Expo team helped me to understand this better so thanks again for the clarification so let's do this we're going to create a stack layout in here um so there we go and then we will simply return um stack and we go from Expo router and then I'm gonna Define my first screen it's not going to be the home screen but instead I want to make the first screen our tab bar and we could make a new folder tabs and then have like the home page inside the problem is if we do that uh this would result in our tab bar showing as slash tabs slash home and maybe you don't want to have the tabs in there so if you don't want something to appear in the URL you can simply put the rounded brackets around this and then we this folder won't show up and now I can create whatever kind of file in here so I'm going to start with the layout.tsx in this folder again and additionally we might have something like a list in here so list dot TSX and right native functional export and then also let's add a home.tsx regnative functional export Okay cool so we got those files let's create our tab bar the tab bar is done quite easily in here um we can do an export default so I'm trying use different ways to create this to show you it doesn't matter how you do it actually uh so return tabs from Expo router and within the tabs I need to Define my Tab screen so I got the home screen we actually don't need to add a component so copilot is wrong on this one we just need home and we just need list because they are available um as the path so that's the beauty of the file based routing but we haven't finished our setup here in our stack layout at the root level so when we defined our first stack screen this is now not home then instead this is simply tabs uh we don't need to assign any component that should be fine so let's see if we go back to the empty route we still see our index because inside the index we have this default setup and the problem is if we have this index file we need that index file at the root level this is simply how the react native file based routing but Expo currently works so if you want to show your tabs immediately we can simply place a redirect in here so let's replace everything that we have in the index with a simple redirect to slash home and now things look completely different if we go to the blank path we're immediately redirected to slash home and if we check out our routing we know that layout home okay this is part of tabs so at the bottom we're gonna see our tab bar and the same is true now for our application I got list and I got home this is pretty nice now if I want to have a page outside of this let's see how we can accomplish this for this we're going to go to our list page I'm going to replace the list page with something that has a few links so if I go here we got news123 now right now the Links of course do not exist and if you want to debug your links I highly recommend you open underscore sitemap so then you can always see how the structure of your application looks like so let's say we want to have these detail pages of the links of the list but those should not open within the actual tab bar they should open outside so to accomplish this we need to go back and we need to create a folder up here and I'm going to call this list and I can play something in here I will actually make this a dynamic route so we can use those brackets I think they're called square brackets right and then we will be able to catch on this page the ID using the search params that's actually quite easy but it's more interesting what happens now because now we go to news1 and we can't go there yet oh that is good I probably need to reload my application once and there we go we we are on the detailed screen for one actually why is this looking so horrible um I probably need oh I don't even have the default export here export default stack layout ah that completely changed the trajectory of our application so if I go to list we're going to talk about that in a second I open this and voila I'm here and I can go back to tabs actually that's not too cool I could probably [Music] um I could probably change the name of the button yeah but we don't need to but you can definitely do this as well however what you're going to notice now is that we have this ugly thing going on where we have tabs up there so we definitely want to make sure that we don't see this so let's go back to our layout here and four tips we will simply say options um header shown oh nope header shown false and there we go that removes the stack header for that page it should still show on this page exactly that works just fine and again I can go to News 2 and use three and that just works perfectly now what if I also want to navigate inside of the tab bar let's do this let's do this for example for the home page now instead of just using the home TSX I'm going to create a new folder call this one home and now if I move the home file in it it basically uh it works the same I can just replace this and call this index TSX and if I hit refresh it complains because there's no home yet in the layout here okay that makes a sense so instead of saying this is the home page um I think actually um actually I think it should work just fine let's see uh we got home slash Index this is actually nice and part of it um what are you mad about list and home index in fact the web seems to be happy the web doesn't have to uh seems to have a problem with this I'm not sure why you're having a problem with this no home index no Road name home exists in nested do you have to tell this one to actually go into home now usually we don't have to uh we shouldn't have to but let's see if I think if I do it like this I have to place another layout.tsx in here and otherwise it will be met so let's do another layout here and if we want to push another page inside of the home we need to come up once again with a new stack layout so let's Place another stack layout in our file and the first screen will be our index file and there we go and I can also set my header title but once again we see ah we got two headers so how do we disable this uh well we probably need to touch the layout here of the tips screen so going into options header shown um false that should remove that header yes there we go so we got list and we got the home screen if you want to you can also give them better different tab bar labels or different things also if there's something in the folders that's showing up Suddenly in the tab bar you can Define that a specific screen should have an href of null in the options and then it won't be displayed in the tab bar that can also be sometimes helpful now back to creating the actual home screen or navigating to a Details page we go to our index now so what was previously just the home TSX is now the index file of this folder and we add a simple link to home settings so how do we get there well in this case it's simple we just create a new settings.tsx making this erect functional export and then we push it and that page is not found perfect I think because we still need to reload the app at least once yes so there we go and now you see we still have the tab bar at the bottom and we can easily have our own stack in here so those are the two different cases you can either push a page above the tab bar or you can push inside of a tab and keep the information both ways are possible and I hope this quick example with a setup here helps you to Define your tip barf with uh the new export router so if you enjoyed the video please also hit subscribe and like for this video so more people can see it and of course check out galaxies.dev where I try to help you with all the topics around web development cross-platform development native apps many courses check them out galaxies.dev and I will hopefully catch you in the next video so until then Happy coding Simon [Music]

Channel: Simon Grimm

Views: 55,646

Keywords: react native, react native tab bar, react native tabs, expo router, expo tab bar, expo router tabs, expo file based routing, expo router 2, react native file based routing, react native layout, expo layout, react native tutorial

Id: 4-shpLyYBLc

Length: 11min 28sec (688 seconds)

Published: Sun Apr 30 2023