Creating Bottom Navigation

[00:00:00]
>> Okay, so the first thing you would do with any project is we create a new folder for the source. So let's call create a source directory. And next let's move our app TSX into the source directory. So let's start by deleting everything in update after TSX and let's start from scratch.

[00:00:24]
So let's import react from react and let's export const app, so we'll use the Patriot typing so we'll do react.fc. And we'll make this into an arrow function and let's return a view, one nice thing with Typescript is if you use TypeScript and VS code. Which has amazing TypeScript support, you will get auto imports so you don't have to add a lot of imports yourself.

[00:01:03]
Cool, and I'm going to do a const styles at the bottom, let's do, Style sheet.create, a style sheet got imported from react native automatically. And let's just have a container and I'm going to make it full width so flex one, And I'm gonna give it a background color of teal.

[00:01:36]
And let's do on the view, let's do style equals styles.container. Right, the last thing we need to do is update the import for app. So if you go to index JS, you might have not noticed but previously in a template. After TSX has a default export, but we've changed it to a named export.

[00:02:02]
So here's where we import up, we just need to destructure it from the export. So when we say that you should have a full screen, teal background. If you previously did my intro to React Native course, you'll notice that the way we're structuring the app file is little bit different.

[00:02:23]
So we're using named exports instead of default exports. And this is kind of a convenience thing, because you're guaranteed to know what your export is going to be called. Because if it's a default export, you could technically call it anything you could have typos, it's hard to refactor them.

[00:02:39]
So the current modern convention is to have named exports and that's what we're going to be doing throughout this course. All right, so in our source directory let's create a new folder and let's call it screens. This is where we're going to put all of our screens in and let's create a new file and let's call it home dot screen dot TSX.

[00:03:01]
So the dot screenpad is just a convention I like to use just to tell myself that this file is a screen without having to go into it. And here let's import react from react and expo const home, react FC, and we'll make it an arrow function. And let's just return a view with some text.

[00:03:29]
And let's call it home. Let's import text from React Native. All right and let's do the same for our history tab, so in the screen directory we'll do new file and history dot screen dot TSX. And I'm going to copy the contents of the home file and just rename home to history.

[00:03:55]
All right, so now we need a navigator. So let's add another file and call it bottom tabs, Dot navigator dot TSX and here all the const bottom tabs equals create bottom tab navigator. And so this is auto imported from react navigation bottom tabs. And we're going to do const, we're going to export the components and we're going to the export const button tabs react FC.

[00:04:41]
So don't forget to import react. From react and we'll make this into an arrow function as well. And we're going to return then we're going to use this bottom tabs that we just created. So, let's do bottom tabs dot, so we have a navigator so there's a full button tab is always a one top level navigator.

[00:05:10]
And then as children, we will do bottom tabs dot screen and this is where we pass in our screen. So the screen has a name this is what we call it who wants to navigate to it just to home and a component. And for us it is our Home tab, yeah we'll call this bottom tabs navigator as the export.

[00:05:38]
Cool, so now we have the navigator and we have the home screen let's also add our history screen, so, Add the history screen to the import and then copy this bottom tabs screen and call it history. Excellent and lastly we need to use this bottom tab navigator in our entry point so in our app dot TSX.

[00:06:10]
So in our app dot TSX let's remove the view that we had and let's instead return a navigation container. So this is an import from react navigation, so this will be wrapped at the very top of your app. So this is like all the navigation is inside this navigation container.

[00:06:29]
And in here, we'll do a bottom tabs Navigator, which is the import from screens that we just created.
>> Just a quick question of why you prefer exporting const instead of exporting default in your modules?
>> Firstly, make sure your factoring easier and also it makes it so, you have a consistent name style, so, okay.

[00:07:02]
So, for example, if I exported this as default, so if I did export, default, something, then if I import this something in here. I could do import anything, so I could name this anything so it's not guaranteed to be consistent. Whereas if we export it as a const as a named export, I don't have a choice but to use this I mean obviously I could alias it to something else.

[00:07:35]
But usually if you wanted to for example rename something in your code base it becomes easier to find, so it's just a convention. Cool, obviously if you prefer default exports go for it, we can all have opinions in JavaScript that's for sure. All right, so now that we've saved this let's just remove the code we don't need any more.

[00:08:04]
We have a bottom toner gators so we have a home tab and we have a history tab and they work and, And the same thing is working on Android, so we have our history tab, and our home tab. And this is basically how you make a bottom navigator, so if you've used stack navigators before.

[00:08:35]
You can always nest them so for example if in your home tab there are several screens. Then this component, which at the moment is just a one JavaScript file, one JavaScript screens could be a stack navigator instead, or another bottom navigator. So basically that's how the nesting works within react navigation.

[00:09:01]
All right, next up, let's add a third tab for analytics. So to do that in screens, let's create a new file the same way as we did with home and history and call it analytics dot screen dot TSX. And I'm going to again copy the content of our home, and paste it here and just rename this to analytics.

[00:09:28]
And in our bottom tab navigator, we want to import our analytics screen, And also add another bottom tab screen to it, so we need to name analytics and component analytics.
>> Is there a limit to how many navigation items you can have?
>> No there isn't, it's just kind of a tree view, it's there a limit to how many depths you can have in HTML.

[00:10:00]
It's kind of like you can have as many as you want. Presumably if you had 1000s, there will be some performance implications but there isn't a limit
>> How about the tab bar is there a limit, on that bottom tab bar, how many?
>> That's a good question, let's have a look.

[00:10:22]
So, really what needs to be unique is the name, so if I create a bunch of them, I think there's a visual limit. So they will just be spaced evenly, obviously so now I've added a bunch of them and it's just not going to look sensible. So I think realistically you wouldn't really have any more than four or five I think.

[00:10:45]
So if I add I guess if I add five that's just about works, but usually most apps have between three and four.
>> How about stacked navigation like two bottom bars could that be a potential?
>> Yeah, you can nest them, so I could, well, I can't recursively make this.

[00:11:09]
Okay, so if I did another bottom tabs navigator, so let's do two, I think to work. Okay, so I added in analytics three so I would expect it to be yeah so there's like a double navbar. So if you nest them you'll just get like navigation inside, so it's literally just a tree view.

[00:11:30]
So it's basically saying, so each of these components you can treat as your Abdo TSX. The kind of well no kind of each of these components are their own, playground, and then anything you add in here will just be rendered inside. So that's why for example if you need to have full screen modals in your app.

[00:11:52]
They need to be rendered outside of this bottom tabs navigator, otherwise they get rendered like above your nav bar.