Bottom Tab Navigation

[00:00:00]
>> Kadi Kraman: Now we're gonna look at a couple of navigation methods. So first, let's look at bottom tabs. We wanna set up a bottom tab navigator with two tabs. As I mentioned, every file in the app folder is a screen of your app. And then the layout files describe how the app should be laid out.

[00:00:18]
So, to add a second screen, let's do a new file in our app folder, and let's call it profile.tsx.
>> Kadi Kraman: In this case, let's just copy this placeholder screen. So this will just render a view with some center align text.
>> Kadi Kraman: Now in our layout file, right now, we are rendering these screens in a stack.

[00:00:49]
So this profile screen, even though we haven't rendered it, it actually exists in our state, we could navigate to it, but we want to render this as bottom tabs. So let's do change this stack. So this was actually very difficult. This is something that would be very difficult to do if you were not using Expo Router.

[00:01:07]
But because we are, we just select all these stacks and change them to tabs.
>> Kadi Kraman: There we go.
>> Kadi Kraman: And,
>> Kadi Kraman: Let's create another screen here for the profile tab. So let's do profile and call it profile.
>> Kadi Kraman: I think I have three tabs here. I think this is a caching problem.

[00:01:43]
So let's,
>> Kadi Kraman: Close the bundler, and npx expo start, and do reset cache.
>> Kadi Kraman: And reload.
>> Kadi Kraman: Okay, yes, it was a caching problem. So you should have a two tab layout with a home and a profile screen, yes.
>> Audience 1: Are tabs registered without even having to put them into the layout?

[00:02:19]
>> Kadi Kraman: Yes, so that is because that is actually a really great thing to call out. So if you used React Navigation in the past, then you're thinking that the screens only exist if you configured them in this layout file. And that is incorrect. The screens exist as soon as you add them to the file system.

[00:02:41]
So there is exactly one layout file per folder, at most, one layout file, I guess I should say. If you have a layout file, if I actually just did just tabs and didn't define the screens at all, they would both be here. And if I add a third tab, they would both be here.

[00:02:58]
So this layout file tells you what the screens inside this folder are going to be rendered as. And then the reason that we're defining them is so that we could pass in additional options. So we can configure the title, we can configure how it renders, we can add some header buttons, etc.

[00:03:18]
And lastly, let's add some icons to the bottom tabs, that's a pretty common layout as well. So we're going to be using Expo vector icons for that. So Expo vector icons is built on top of React Native vector icons and it's just a very handy library for quickly getting vector icons into your app.

[00:03:41]
>> Kadi Kraman: There is also this webpage that lets you browse available icons. So if you want to do home, let's say, you can search here and it gives you the instructions on how to import the icon family and how to use it. Now let's install the vector icons library.

[00:04:07]
>> Kadi Kraman: And we start our bundler.
>> Kadi Kraman: But you can choose different icons. For me, I chose this little leaf. The leaf is not here. So I think it was this leaf. I'm trying to use the same exact icons as I did in the example. Yes, so I've got this leaf from Entypo so we can import,
>> Kadi Kraman: The icon family and render it in a component.

[00:04:49]
So this will be for our home tab bar. And in our options, the way that we render a custom tab bar is we use a tab bar icon property. And this will be a function. And you can render whatever here, you can render text, you can render a view.

[00:05:09]
In this case, let's render this leaf.
>> Kadi Kraman: Okay, and I'll do the other one as well. So I think I used user from Feather.
>> Kadi Kraman: There we go. I think I used this one, so we'll copy this as well,
>> Kadi Kraman: And for our profile page, we'll do tabBarIcon,
>> Kadi Kraman: And render this little icon.

[00:05:58]
>> Kadi Kraman: Okay, so you'll notice that the tab bar icons aren't changing color when we are navigating. And that's because we are not using the shared color that is configured. So we can actually de-structure it from this tab bar icon function. So we have size and color.
>> Kadi Kraman: And we can pass these into our icon component.

[00:06:25]
>> Kadi Kraman: And we'll do the same for the profile icon.
>> Kadi Kraman: Okay, and then lastly, we can configure this color.
>> Kadi Kraman: So,
>> Kadi Kraman: I've chosen this beautiful green color, so on the top level tabs, you can do screenOptions and tabBarActiveTintColor.
>> Kadi Kraman: And pass in the screen.
>> Kadi Kraman: I noticed that this will change the green for both of them as well as the text.

[00:07:19]
And in this case I don't think we need to text, so we can actually configure this as well. So we can do tabBarShowLabel to false.
>> Kadi Kraman: To both home and profile.
>> Kadi Kraman: And then we just have to tap our icons. And the last thing, this is just a tidy thing that I always do when I'm using built in styles is to create a top level theme file.

[00:07:47]
And then constant that we're gonna use across our application, just pull them into a theme file so we're not having to redefine the same hex code everywhere and also makes it easier to change. So let's do an export const theme and let's pull this green color and do colorGreen.

[00:08:11]
>> Kadi Kraman: And let's also do colorWhite.
>> Kadi Kraman: So this will be fff.
>> Kadi Kraman: And this is a convention, but I pretty much use it on all my projects if I'm using the built-in styles for React Native, and it's just really handy. Usually I actually do spacings here as well, so I would do spacing10.

[00:08:33]
Actually, I don't tend to use 10. Spacing12 would be 12, and then instead of using 12 as a value in my styles, I would use it from the theme and I do the same for the font family, etc. And it's just a nice overview, it makes your app more consistent, because if you have spacing 12 and 16 defined here, you're likely not going to do spacing 13.

[00:08:55]
In this case, we're just going to use it for the colors. And let's update our layout to now use theme.colorGreen.
>> Kadi Kraman: And I think we had a color in our index file as well. So this will be theme.colorWhite.
>> Kadi Kraman: And on profile, let's do theme.colorWhite.
>> Kadi Kraman: Lovely, so now we have a two tab layout without the tab bar label but with two green icons.

[00:09:33]
>> Audience 2: Can the label be conditionally shown when the tab is active?
>> Kadi Kraman: tabBarLabel,
>> Kadi Kraman: Yes, so there's a function here that I'm assuming will render tab bar label, so if I render some text.
>> Kadi Kraman: I was expecting this to, it's because of the label shown false.
>> Kadi Kraman: Okay, there we go.

[00:10:18]
This actually does exactly what you mentioned. So I've added it to Hello. And it's a tab bar label, and it only shows when I'm highlighting over it. So you can use this tabBarLabel function. I think it has props as well. So the props that it has is like, whether the tab bar is focused or whether you're currently hovering over it, and then the color.

[00:10:39]
That we're using it here.
>> Audience 2: And are you able to animate between tabs?
>> Kadi Kraman: Yes, but you would build your own, basically, so you can pass in. Yeah, I forget what the function is exactly, but you can pass in a custom tab bar and then you can do whatever you want with it.

[00:10:59]
You can make it floaty, you can make it animate. All the rules can go out the window.