00:00:02 In this lesson, I'll teach you how to implement the tab navigation, something that every single mobile application needs to have.

00:00:10 But not only will I teach you how to implement it for this React Native application, you'll also learn how to implement it within any of your future React

00:00:19 Native apps.

00:00:20 So, let's dive right in.

00:00:21 There are different types of navigation, one of which is tabs.

00:00:26 Expo makes using this tab navigation even easier.

00:00:30 Tabs are the most common way to navigate between different sections of an app.

00:00:34 Expo Router provides a tabs layout to help you create a tab bar at the bottom of your app.

00:00:39 And the fastest way to get started is to use a template.

00:00:43 So, check it out.

00:00:44 You can get started by creating a file-based routing system.

00:00:48 We have already done that.

00:00:49 And then after that, you can define different screens like this.

00:00:53 And then through tabs, you can switch between those different screens.

00:00:58 But let's stop looking at the docs and let me show you how you can implement it.

00:01:03 head over within App, Tabs, Layout.tsx so we can implement the tab navigation as per our design.

00:01:11 First things first, instead of returning the slot, I'll actually be returning the Tabs component coming from Expo Router.

00:01:19 It'll look something like this, and we can more nicely structure it like this if you want to.

00:01:23 Within Tabs, we'll also have different screens.

00:01:27 So we can immediately create a Tabs.Screen to which you have to give specific properties.

00:01:34 For example, you can give it a name of index, this is going to be for our homepage, with some additional options.

00:01:42 Options like, well, you just saw what popped up on the screen.

00:01:46 There are many different options you can pass in, one of which will be a title, So we can say home, and now if you save it,

00:01:54 you'll immediately see that we get all of these different tabs automatically created for us even though I only specified one.

00:02:04 Why can we immediately see cart, search, profile, and why do all of these immediately work?

00:02:11 Well, that's because Expo, like Next.js, uses a file-based routing system.

00:02:17 So, as you can see here, it automatically recognized all of these different routes within the tab's layout.

00:02:23 But now is the time to actually make it look good.

00:02:27 So alongside the title, I also can provide a tab bar icon, which can recognize between two different states, focused or unfocused.

00:02:37 And for each one, we want to automatically return some kind of a tab bar icon.

00:02:43 For now, I'll leave it as a self-closing component.

00:02:46 And I will now create this new component right here at the top so we can reuse it for all of the different icons.

00:02:52 const tabBarIcon is equal to a callback function that accepts a couple of props such as the focus state, the icon, and the title.

00:03:04 These are of a type tabBarIconProps and we can automatically return a view.

00:03:12 What do we mean by automatically return?

00:03:14 It means that I'm wrapping this in regular parentheses and not a curly brace because that would open up a function block.

00:03:21 If you did it that way, which you can do, you would then have to explicitly specify a return.

00:03:27 But if you just do automatic return, then you can just immediately type in what you want to have here.

00:03:34 In this case, it's going to be a view with a class name of tab icon.

00:03:40 Within it, let's render an image.

00:03:42 This image will have a source equal to icon that we pass through as props, with a class name of size of 7, with a resize mode of contain,

00:03:55 as well as a tint color, which is going to be different depending on whether it's focused or not.

00:04:00 So if it's focused, the tint color will be hash fe8 c00 else it'll be hash 5d 5f 6d.

00:04:14 I found those two colors to work well.

00:04:17 Below the image we can also render a piece of text and this text will simply render the title that we're passing their props.

00:04:26 So why can't we see anything for the home page yet?

00:04:28 Well, that's because we have to pass those additional props to this component that we created.

00:04:34 So I'll pass the focused state equal to focused.

00:04:38 I'll also pass at the start the title equal to home, and I'll also pass the icon equal to images, which we need to import from constants,

00:04:50 dot home.

00:04:51 So now if you save it, you can see that we have a special home icon appearing right here.

00:04:57 We can further style the text right here by giving it a class name, equal to.

00:05:03 I'll make it dynamic by using a CN property, and then it'll always have a text SM and font bold, but only if it's focused,

00:05:13 then it'll be text primary, else it'll be text gray 200. Perfect.

00:05:22 But hey, why is it saying home two times right here?

00:05:24 This isn't really looking the best.

00:05:26 Well, right within the tabs, we can pass so many different props that alter how the tab layout looks like.

00:05:34 For example, we can pass the screen options, which is an object, where we can say header shown and set it to false.

00:05:43 We can also do something like tab bar show label.

00:05:47 Set it to false as well.

00:05:49 And if you save it, now it's much easier to look at this home.

00:05:53 And we can also pass this tab bar style.

00:05:56 And within here, you can pass many different styles.

00:05:59 For example, a border top left radius of 50. Yeah, see how now we have made it a bit more round.

00:06:09 We can repeat this a couple more times for the top right radius and also for the bottom left radius as well as the bottom right radius.

00:06:26 So this will now make it much more rounded and much more natural, making you want to order some food, I guess.

00:06:33 We can also set the margin horizontal to about 20. We can set the height of the tabs to 80. We can also set its position to be absolute,

00:06:45 so it appears like it's floating.

00:06:48 We can also set it to be 40 pixels from the bottom to move it a bit up.

00:06:54 We can give it a background color of white.

00:06:57 We can also give it a shadow color of something like hash 1A, 1A, 1A.

00:07:04 We can also give it a shadow offset, and this will be an object with width 0, so 0 offset on the width side, but the height offset will be set to 2. Let's

00:07:16 also give it a shadow opacity to about 0.2, or 0.1 I think should be enough.

00:07:22 Yeah, now it's floating.

00:07:24 We can give it a shadow radius of something like 4, and we can give it the elevation of something like 5. And now it really appears like a real floating

00:07:35 tab bar right here.

00:07:37 Looking pretty cool, right?

00:07:38 I'll collapse those screen options for now, but you get the idea.

00:07:41 Within the tabs, we can pass all of these different props that style how our tab bar looks like.

00:07:48 But now we have to duplicate this tab screen for all of the different pages so we get custom ones and not these default carrots.

00:07:57 So I'll just duplicate this one, two, three more times for the other three of our screens.

00:08:04 I'll change the second one to let's do search with a title of search.

00:08:11 And here you also have to change the title of the icon as well as the image.

00:08:18 So that'll be images.search.

00:08:21 The next one on the list will be set to name of cart.

00:08:26 Oh, and we can start the name here with a lowercase s.

00:08:28 The cart will have a title of cart, you can guess it.

00:08:32 It'll say icons.bag or images.bag with a title of, let's do cart.

00:08:39 And for the last one, we can do profile.

00:08:43 which is going to be our profile page with a title of profile name profile here as well and pointing to images person indicating a profile So now we can

00:08:56 see four different icons with four different pieces of text, and this is actually looking great.

00:09:02 Not only that, but using this focus state that Expo handles for us, you can immediately see that as you move through different screens,

00:09:10 and it is moving even though nothing is showing, that's because we haven't yet implemented those screens, you'll also change the active page that we're

00:09:17 currently on.

00:09:18 So if we're in the home page, we can see everything else, and it feels like a tab bar is actually floating in space, or on the screen,

00:09:26 should I say.

00:09:26 Perfect.

00:09:27 So now you've implemented not only the file-based routing, but also you'll learn how to implement the most popular navigation in mobile applications,

00:09:35 which is the tab navigation.

00:09:37 That's definitely worth a commit, so I'll commit it right here by saying git add dot, git commit –m implement full auth,

00:09:48 that's because I forgot to commit before, as well as the tab navigation.

00:09:54 And git push.

00:09:56 Perfect.

00:09:57 You just got one step closer to our final application.