Hi and welcome back to our tutorial.
Today we're going to be working on the badges.
Badges are very similar with the setup to the tabs that we created.
So what I'm going to do is actually copy this directory into the components
with the name of Badge and then I'm going to rename this to Badge
and I'm going to rename the constants as well.
So if we go inside here, my content is going to be renamed from Tab to Badge.
So if your editor doesn't automatically do that, please do that yourself.
And notice that here we're not going
to need isInactive state and we're not going to need an onpress event either.
So let's get rid of these and only leave the title here.
Let's get rid of these props as well because we're not going to need any kind
of specific styling according to the inactive state.
Great.
And then what we do want to do is use the references to calculate the width
of this and the paddings here are actually smaller.
So instead of 33, we are going to be using something different.
Let's see what that is.
That is ten.
So let's change this value to ten.
And then we have a different background color and text stylings here as well.
So let's get into that.
So the background color is going to be
copied from here and let's go to Styles here.
We don't need inactive tab or inactive title.
Let's get rid of these and let's rename
this to Badge actually because this is going to be a badge.
And then let's change the background color
from blue to green and its height is also different which is 22.
And we can leave the border radius to 50
because they actually have 100 which is too much.
It just means that it needs a circular
borders so 50 is more than enough for that.
And then let's change the font styling as well.
So here they have font size of ten
and line height of twelve and font weight is 600.
So we have ten here, twelve here and 600 here.
The color is still white so we're all good with that.
And it does need to be centered.
So these are all the stylings that we needed to do.
And now we should make sure that we don't
use any components that we don't need such as pressable.
This badge is not going to be pressable so what we need is View instead.
We don't need this onpress event.
I forgot to delete this with the props
and instead of pressable we're going to be using views.
So let's save this.
This is looking good I think.
Let's go to home and then check out how our badge component is looking.
So I have the import for the badge here.
Make sure that you import it as well.
And I'm going to say environment here, I'm going to save it.
And if you ask me, they look very similar to each other.
So we are good with badges.
They look great.
Thanks so much for watching and I'll see you in the next video.