Welcome back to this tutorial.
Today we're going to be creating tabs.
So we have two kinds of tabs here.
One that is active and has a background
color similar to the button that we created.
And then we have an inactive tab that has
a gray background with a different color title as well.
Even though this is a little bit different than the button, we could still use what
we did for the and component to create the tabs.
So I'm actually going to copy this
directory and rename the directory name to tab and paste it inside the component.
And then I'm going to rename the file as well and I'm going to call it Tab.
And once I do that, my editor will ask me
if I want to rename the concept as well and I'm going to say yes.
So if your editor doesn't automatically do
this for you, please just rename your buttons to Tabs.
Here, here.
Instead of is Disabled State we are
going to have Is Inactive State and Is Inactive is going to be false
automatically and it is going to be a Boolean.
But if a tab is inactive, we're going to have to change
the background color and we're also going to have to change the title color.
So let's create two styles here.
Instead of isDisabled, we're going to call the style isInactive
and let's create isInactive Title here as well.
So let's say if Props is inactive then we want to have a style inactive Title.
And instead of naming this is Inactive.
Actually let's say Inactive tab and let's
rename this button as well and just call it a tab because it is going to be a tab.
So let's go to Styles and rename the button to Tab.
And we don't need the Disabled State.
We need inactive tab. Great, so Inactive Tab and we're going to have
a different styling here and we're also going to need Inactive Title.
Great.
So if a tab is inactive then its color is this here.
So let's say background color
and set it to this value.
And if the title is inactive, then
it has a text color of this.
So let's say color is going to be this.
And notice that since these are going to be
the last styles applied, after these styles the background color is
going to be overwritten if a tab is inactive.
And the color of the text title is also going to be rewritten with this.
So we're going to replace these values
because these are overwriting the previous values if the tab is inactive.
So we also have a different height for these tabs.
So let's make sure that we include this here.
It has a height of 50 and the font styles
are also different so let's make sure that we consider that.
So here the font weight is 500,
that is similar and then font size is 14 and not 16 and the line height is 17.
Great, let's save this.
And now let's go to our home JS file and just let's get rid of these buttons
for the moment and let's see how our tabs are looking.
So I'm going to use the tab component and then I'm going to import this here.
I'm going to place it here actually with all the rest of the components
and then it tells me that it needs a title prop.
So let's say the title is highlight
and one problem to notice here is that this takes the whole width while this
has a width according to the text and then it has some horizontal padding to it.
So how can we make this take as much width as it needs?
There are two ways to handle this situation.
One way, which I'm not a big fan of,
but I'm going to show it to you, is that we place it inside the view
component and then we style it and give it some kind of defined width.
Let's say horizontal scale 130 and then it's going to become smaller.
But if we go with this way,
it would mean that for every tab that we use we're going to have to define
the width ourselves and I think that is going to be annoying and inconsistent.
So we're going to use another way.
And that another way involves using refs.
So far in this project that we've been working on, we have not used refs.
But in the hooks section of this course we do go over how to use refs.
And the pressable usually takes the whole
block and it doesn't measure the width of what's inside of it.
So we're going to have to do this calculation ourselves using the refs.
So let's do that and it's going to be a good practice for you as well.
Let's import, use refs and usestate.
And we're going to usestate to define width that we're going to set this
pressable button to and then we're going to need the set width for that.
And our initial state is going to be zero.
Then we're going to use a text ref to find
out how much exactly the text inside of it has.
So let's create a constant and call it text ref.
And let's use ref and just set it to null.
And then we're going to use this text ref
to get a reference to the text component here.
Great.
And then when the component is rendered
on the layout of the text, what we're going to do is we're going
to get the event and we're going to set the width to event
native event lines zero, which is going to grab our title that's
inside the text and then we're going to get its width.
Great.
So now we're setting the width to the width of the text here.
And if we console log width
and go to our terminal, we're going to see that its width is 60.
But what we don't want to see happen is
that button exactly becomes the width of the text because then we're not going
to have any kind of horizontal padding that's given here.
So if we look at this we see
that horizontal padding is approximately 33 on each side.
So what we want to do is
define a constant here called padding horizontal and say that it is 33.
And then we want to pass one more style here.
Let's call it tab width and let's define it here.
So tab width is going to be equal
to an object that has width of horizontal
scale heading horizontal times two
because we need it on each side plus the width of the text.
Great, let's import the horizontal scale.
And now let's save this
and we have some error because we don't need the semicolon here.
And great.
Now this takes exactly the amount of width that it needs and we're not going to have
to make any kind of containers with custom width every time we want to use this tab.
So now let's go back to home and see how this tab would look if it was inactive.
Great.
This look pretty similar to what's given in our screens so we can use the tab
component later once we're going to start working on our screens.
Thanks so much for watching and I'll see you in the next video.