Hi, everyone, and welcome back to this video.
Today, we're going to take care of how our tab labels are designed.
Here you might notice that compared to our
design, these tab labels look very different.
First of all, if we are being focused on a specific tab,
we do have this blue underline letting us know that we are focusing on tab two.
While in our design, we have no underline, however, the label for the item that's
being selected in our tabs is black and the other ones are gray.
We are going to make sure that that is reflected in our design.
Let's get started on that.
Now, if you want to create
a specific design for the tab labels, you would have to create a new component.
For that, we are going to go to our Component directory.
Here I have already created
profile tab title directory.
Inside here, I'm going
to create profile tab title.js file.
Of course, I'm going to create this style.js file as well.
Then what we want to do is make sure
that we set up this component that accepts a title prop so that we are free to use
this component and reuse it as many times as we want.
Here we're going to have to create a component that accepts a prop
title so that we're able to reuse this component with different titles.
Let's set this up and say that we're
importing React
and we're also going to need a text component definitely from React Native.
As I said, we are going to be using props,
so we are going to need the prop types here.
Let's create a new constant,
call it profile tab title, and it's going to accept some props.
For now, it's going to return null, and let's make sure that this is exportable.
Great.
Of course, since we're using the props,
we're going to have to set the prop types up here.
Let's say that profile tab title is going to be expecting some props
and their types are going to be, let's call our prop title,
and it's going to be a string and it's going to be required.
Great.
Let's make sure that we use this title right here.
Let's create a text component inside, which we're going to use props.title.
Let's save this.
Now let's see how we can use this component with our tab Navigator.
The tab Navigator actually comes with a property called options,
inside which you can set up many different things.
It's used for various tasks.
If you're interested in all of the items
that are available inside the options, you have a link to the documentation
inside the Resources folder, so make sure to check that out.
But I can also tell you that if we were
to create a specific component for our tab titles,
what we can use here is tab bar label, and it's going to use a callback function
to return a component that we just designed, profile tab title.
This property automatically got created
for me by my editor because it knows that the title is required.
Here I'm going to save photos as given on our design.
I'm going to return this and I'm going
to save this and you're going to see that photos appeared here right now.
Now I'm just going to copy these options
and just paste it for each of the components given here.
I'm going to save this and the options are going to be available for tab two as well.
But we don't want this to be called photos.
We actually want this to be called videos.
Let's replace the string here and now it's called videos.
Then we also want it for our tab three and here we're going to call it saved.
Let's save this and now you can see that our tabs have appropriate titles.
However, since we replaced our titles
with the components, all of them are now black.
What we want to do is find out whether the tab is being focused on or not to make
sure that we can change the styling of profile tab title appropriately.
Tab bar label comes with different arguments inside the callback function,
and one of them that's available for us is called focused.
Let's grab this focused
boolean and make sure that we pass it to our profile tab title.
I'm just going to press on Enter right
here so that this is easily visible for you.
Here I'm going to set up a new property and I'm going to call it isFocused.
I'm going to press this Focused boolean right here.
This is going to be true if we're being focused on the tab.
It's going to be false if we're not.
Let's just copy this and paste it inside the other tabs that we set up as well.
Let's make sure that this focused state is available here and here.
Let's save this.
Now we have to make sure that our component actually uses this property.
Here we can set up a new property that we're expecting and it's going to be
of type bool and it's going to be required.
Let's save this.
Now let's set up different styles according to our focus state.
First of all, let's create a style here
and let's say that we're going to use style.title
for styling this title.
Now we got to go to style.js file,
import style sheet right here,
create a constant called style, and use this style and use this stylesheet
to create a new style sheet inside which we're going to define title.
Let's just make sure that this is exportable.
Now let's go here and import this.
So import style from style.
Let's save this.
I'm just going to go back to our profile page right here.
Inside this title, I'm going to start setting up some of the items.
Let me move this a little bit to the right side.
I'm just going to click on this,
and I'm just going to start creating the styles inside the title object.
First of all, I'm going to grab this color
and I'm going to set this up here and paste it here.
Then we want to get the font family
and it's going to use get font family function.
Let's say that this is font inter and we
need font weight of 500 and I'm going to pass the string 500 right here.
Let's say that font size is also scale font size 16.
These are imported for me, so make sure that they are imported for you as well.
Now we also have to make sure that we have a title that's not focused because this is
the focused state and if we press on here, this will be the one that's not focused.
Let's go here and say title not focused.
Now let's create a new object right here
and say that we need a different color and it's going to be right this one.
Then we're also going to need to set up
the font family so that we can set different font weight.
Let's use get font family and say
that this is going to be inter and it's going to need string 400.
Great. Now let's go back to our profile tab title
and make sure that we use the title not focused as needed as well.
Here we're just going to create an array
so we're able to put in a couple of styles.
Let's say that if props is focused is true, then we want to use style.titleNotFocused.
I'm going to save this.
Now if we go back to our simulator,
you're going to see that this is grayed out and the other ones are not.
Actually, it should be in reverse.
If we want to do that,
we should just make sure that we say that this should not be focused.
Sorry about that. Now we see it as we're supposed to see it.
If it is focused, then our text is
turning a little bit more black and these other ones are grayed out.
Now we also want to make sure that we have the space available as given right here
and that will be achieved using the padding.
Let's just go to style the title here and let's give this some padding.
How much do we want this to be?
Let's say, padding and let's use horizontal scale and maybe 10.
I think this looks way better.
We can even increase it a little bit, maybe to 15.
I think this might look even better right now.
This looks amazing, exactly as we want it to look.
Now, what we want to do is replace the content inside the tabs and make sure
that we don't have this underline present here anymore.
For that, actually,
we're going to need to go to the main navigation and add some more options.
The options are going to be for the whole
navigator so that it affects each screen given here.
This is going to be called Screen Options.
Let's set this up
and let's create an object inside here and we're going to say that
the tab bar indicator style is going to be
with background color transparent.
This is going to make sure that we don't see this item anymore.
But if you notice we have this gray line
still present here right about our tabs and I want to get rid of it.
Let's do tab bar style as well.
Let's make sure that we set Z index to zero.
Now we don't have that line here anymore.
I can just comment this out and maybe you will notice it right now.
Now that line is present and if I uncomment this back, it's not right here.
Sometimes for Android, you might need to set up elevation and say that it's zero.
Let's do that here. Perfect.
Now these are working as they are supposed to.
If we click on videos,
it's going to be in focus state and we're going to see that this is tab two.
Now what we have left is actually making sure that different content appears here.
However, I don't want this video to get
too long and we can do this in the next video.
Just come back whenever you're ready.
Thank you so much for watching.
I hope you enjoyed this lesson.