Navbar Icons & Screen Title

[00:00:00]
>> When in doubt with these arrows refresh because hot reloading and native module stoned, always mix well. Cool, so we have got a home icon here, but obviously it is way too big and it's a weird color. So if you remember here from tab bar icon, we have access to what color we should use.

[00:00:19]
And what size, so we can actually pass these through so let's do color. And we should probably de structure the color and size and passing color and size. So now when we move between the tab, you'll actually notice that it has an active and inactive state. So this is what comes from the color.

[00:00:46]
So when I go to home is blue, and if I go away from home, it's great, which is pretty handy. Now let's do the same. So for the exercise, basically we're gonna do the same with the other two icons, history and analytics. So to do this, let's copy.

[00:01:06]
So this is the list, so this is where the history tab as communist SPG. And then go to our icons let's create a constant history tab and react FC. Same icon props because they're in the same file is actually quite handy to have the same props as well use for all of them.

[00:01:31]
So we know what to expect And let's return. This SVG. Cool, so we want the same default values as well. Right now we need to convert these so we already have SVG imported and we already have path imported. And then circle is a new one but it is a valid SVG element so all we need to do is imported from react native SVG.

[00:02:11]
And the last thing you wanna do is also pass in the size and a color. So we'll do on the SVG, we'll do with its size, height, size and color. Cool so quite history tab for some reason I'm in history icon. And let's export this as well and let's do the same for the analytics icon.

[00:02:50]
So, export const analytics I can't see icon props And we'll return this SVG so let's do the same people says before. We be covered capital with a path. And we'll also pass in the width, size and height, size and of course the color. Now go back to button tabs in our tab icon.

[00:03:46]
We can add the rest so if boots name is history. Let's return. Stevie icon. Some reason typescript isn't catching up, so let's import it manually. And if route.name is, analytics. Let's return the analytics icon. And because it's good to have a default here. So let's just do return now.

[00:04:46]
If none of these for example you added a new tab. Cool let me just reload this so in the history icon we need to use fill for the color rather than fill so if we change this to fill. And change this to fill that works excellent so now we have three tabs.

[00:05:16]
And all the work and they change color so these are the default colors and you get rid of back navigation. But obviously you can customize this and use your own colors. So let's go to screen options so I added some default colors for us to use. Yeah, so added two new colors to add to our theme.

[00:05:43]
So we got a blue and a gray so if we open our theme again, add these two colors here. And going back to bottom tabs to here just before screen options as part of this object. We'll do tab bar active color, active tint color. It's very memorable. Let's do theme.

[00:06:17]
I think this is blue, and then tab bar inactive tint color will be the other color we added. Just gray. Color gray. And this is handy because now this is set at the screen option level. So we don't need to worry about what color it is we know it comes gets passed into this function And the last thing we wanna do is we don't actually wanna show the names of these tabs because we have the icons.

[00:06:54]
And they are handy enough so we have a property I think it's called tab bar show label. And if we set this to false, then the label will disappear. And the last thing you wanna do is we so by default, these tab titles, they will be whatever the tab itself is called.

[00:07:14]
So we could update these titles to either display something that you pass into the screen as a property. Or like another hard coded value that's different from the actual name of the tab. And the way you do that is each of the screens also have an options property.

[00:07:31]
So we get options and this can either be a function. Then you get some metadata about the route and navigation, or in our case, we don't care about that. We just want an object and just call it title. Today's. Mood now you can see it holds up dates and it shows up here.

[00:08:01]
And we can do the same for history so let's do options. And title past moods. And for the analytics. Let's do options title, fancy graphs.