WEBVTT

1
00:00:00.400 --> 00:00:02.380
Hi and welcome back to our tutorial.

2
00:00:02.410 --> 00:00:05.380
Today we're going to be
working on the badges.

3
00:00:05.410 --> 00:00:10.140
Badges are very similar with the setup
to the tabs that we created.

4
00:00:10.170 --> 00:00:15.220
So what I'm going to do is actually copy
this directory into the components

5
00:00:15.250 --> 00:00:22.660
with the name of Badge
and then I'm going to rename this to Badge

6
00:00:22.690 --> 00:00:25.300
and I'm going to rename
the constants as well.

7
00:00:25.330 --> 00:00:30.740
So if we go inside here, my content is
going to be renamed from Tab to Badge.

8
00:00:30.760 --> 00:00:35.660
So if your editor doesn't automatically
do that, please do that yourself.

9
00:00:35.680 --> 00:00:37.880
And notice that here we're not going

10
00:00:37.910 --> 00:00:42.700
to need isInactive state and we're not
going to need an onpress event either.

11
00:00:42.730 --> 00:00:49.700
So let's get rid of these
and only leave the title here.

12
00:00:49.730 --> 00:00:54.420
Let's get rid of these props as well
because we're not going to need any kind

13
00:00:54.450 --> 00:01:02.160
of specific styling according
to the inactive state.

14
00:01:03.360 --> 00:01:04.620
Great.

15
00:01:04.650 --> 00:01:10.000
And then what we do want to do is use
the references to calculate the width

16
00:01:10.030 --> 00:01:13.740
of this and the paddings
here are actually smaller.

17
00:01:13.770 --> 00:01:18.290
So instead of 33, we are going
to be using something different.

18
00:01:18.320 --> 00:01:19.930
Let's see what that is.

19
00:01:19.960 --> 00:01:21.460
That is ten.

20
00:01:21.490 --> 00:01:26.020
So let's change this value to ten.

21
00:01:26.050 --> 00:01:30.490
And then we have a different background
color and text stylings here as well.

22
00:01:30.520 --> 00:01:32.540
So let's get into that.

23
00:01:32.570 --> 00:01:34.930
So the background color is going to be

24
00:01:34.960 --> 00:01:38.020
copied from here and let's
go to Styles here.

25
00:01:38.050 --> 00:01:40.900
We don't need inactive
tab or inactive title.

26
00:01:40.930 --> 00:01:44.140
Let's get rid of these and let's rename

27
00:01:44.170 --> 00:01:50.380
this to Badge actually
because this is going to be a badge.

28
00:01:50.410 --> 00:01:53.260
And then let's change the background color

29
00:01:53.290 --> 00:02:00.930
from blue to green and its height
is also different which is 22.

30
00:02:00.960 --> 00:02:03.260
And we can leave the border radius to 50

31
00:02:03.290 --> 00:02:06.180
because they actually have
100 which is too much.

32
00:02:06.210 --> 00:02:08.220
It just means that it needs a circular

33
00:02:08.250 --> 00:02:12.100
borders so 50 is more
than enough for that.

34
00:02:12.130 --> 00:02:16.100
And then let's change
the font styling as well.

35
00:02:16.130 --> 00:02:18.170
So here they have font size of ten

36
00:02:18.200 --> 00:02:22.450
and line height of twelve
and font weight is 600.

37
00:02:22.480 --> 00:02:28.610
So we have ten here,
twelve here and 600 here.

38
00:02:28.640 --> 00:02:31.260
The color is still white so
we're all good with that.

39
00:02:31.280 --> 00:02:32.730
And it does need to be centered.

40
00:02:32.760 --> 00:02:37.260
So these are all the stylings
that we needed to do.

41
00:02:37.290 --> 00:02:39.580
And now we should make sure that we don't

42
00:02:39.610 --> 00:02:43.020
use any components that we
don't need such as pressable.

43
00:02:43.050 --> 00:02:48.380
This badge is not going to be pressable
so what we need is View instead.

44
00:02:48.410 --> 00:02:50.780
We don't need this onpress event.

45
00:02:50.810 --> 00:02:53.460
I forgot to delete this with the props

46
00:02:53.490 --> 00:02:56.660
and instead of pressable we're
going to be using views.

47
00:02:56.690 --> 00:02:58.500
So let's save this.

48
00:02:58.530 --> 00:03:01.340
This is looking good I think.

49
00:03:01.370 --> 00:03:06.900
Let's go to home and then check out
how our badge component is looking.

50
00:03:06.930 --> 00:03:09.540
So I have the import for the badge here.

51
00:03:09.570 --> 00:03:11.580
Make sure that you import it as well.

52
00:03:11.610 --> 00:03:16.820
And I'm going to say environment here,
I'm going to save it.

53
00:03:16.850 --> 00:03:21.180
And if you ask me, they look
very similar to each other.

54
00:03:21.210 --> 00:03:23.500
So we are good with badges.

55
00:03:23.530 --> 00:03:24.780
They look great.

56
00:03:24.800 --> 00:03:27.200
Thanks so much for watching
and I'll see you in the next video.