WEBVTT 1 00:00:00.080 --> 00:00:01.620 Welcome back to this tutorial. 2 00:00:01.650 --> 00:00:05.060 Today we're going to be creating tabs. 3 00:00:05.090 --> 00:00:07.300 So we have two kinds of tabs here. 4 00:00:07.330 --> 00:00:09.380 One that is active and has a background 5 00:00:09.410 --> 00:00:12.580 color similar to the button that we created. 6 00:00:12.610 --> 00:00:15.380 And then we have an inactive tab that has 7 00:00:15.410 --> 00:00:19.740 a gray background with a different color title as well. 8 00:00:19.760 --> 00:00:24.140 Even though this is a little bit different than the button, we could still use what 9 00:00:24.170 --> 00:00:27.540 we did for the and component to create the tabs. 10 00:00:27.560 --> 00:00:29.020 So I'm actually going to copy this 11 00:00:29.050 --> 00:00:36.700 directory and rename the directory name to tab and paste it inside the component. 12 00:00:36.730 --> 00:00:42.620 And then I'm going to rename the file as well and I'm going to call it Tab. 13 00:00:42.650 --> 00:00:45.360 And once I do that, my editor will ask me 14 00:00:45.390 --> 00:00:48.620 if I want to rename the concept as well and I'm going to say yes. 15 00:00:48.650 --> 00:00:51.020 So if your editor doesn't automatically do 16 00:00:51.050 --> 00:00:54.380 this for you, please just rename your buttons to Tabs. 17 00:00:54.410 --> 00:00:56.100 Here, here. 18 00:00:56.130 --> 00:00:58.980 Instead of is Disabled State we are 19 00:00:59.010 --> 00:01:07.980 going to have Is Inactive State and Is Inactive is going to be false 20 00:01:08.010 --> 00:01:11.210 automatically and it is going to be a Boolean. 21 00:01:11.240 --> 00:01:15.260 But if a tab is inactive, we're going to have to change 22 00:01:15.290 --> 00:01:19.900 the background color and we're also going to have to change the title color. 23 00:01:19.930 --> 00:01:23.780 So let's create two styles here. 24 00:01:23.810 --> 00:01:29.020 Instead of isDisabled, we're going to call the style isInactive 25 00:01:29.050 --> 00:01:33.340 and let's create isInactive Title here as well. 26 00:01:33.370 --> 00:01:43.290 So let's say if Props is inactive then we want to have a style inactive Title. 27 00:01:43.320 --> 00:01:45.740 And instead of naming this is Inactive. 28 00:01:45.770 --> 00:01:49.420 Actually let's say Inactive tab and let's 29 00:01:49.450 --> 00:01:55.740 rename this button as well and just call it a tab because it is going to be a tab. 30 00:01:55.770 --> 00:01:59.140 So let's go to Styles and rename the button to Tab. 31 00:01:59.170 --> 00:02:01.290 And we don't need the Disabled State. 32 00:02:01.320 --> 00:02:07.920 We need inactive tab. Great, so Inactive Tab and we're going to have 33 00:02:07.950 --> 00:02:12.840 a different styling here and we're also going to need Inactive Title. 34 00:02:14.560 --> 00:02:15.020 Great. 35 00:02:15.050 --> 00:02:22.060 So if a tab is inactive then its color is this here. 36 00:02:22.090 --> 00:02:25.608 So let's say background color 37 00:02:25.808 --> 00:02:28.640 and set it to this value. 38 00:02:29.280 --> 00:02:32.691 And if the title is inactive, then 39 00:02:32.891 --> 00:02:35.500 it has a text color of this. 40 00:02:35.530 --> 00:02:40.120 So let's say color is going to be this. 41 00:02:41.240 --> 00:02:45.980 And notice that since these are going to be 42 00:02:46.010 --> 00:02:51.460 the last styles applied, after these styles the background color is 43 00:02:51.490 --> 00:02:54.260 going to be overwritten if a tab is inactive. 44 00:02:54.290 --> 00:02:59.900 And the color of the text title is also going to be rewritten with this. 45 00:02:59.930 --> 00:03:02.340 So we're going to replace these values 46 00:03:02.370 --> 00:03:10.540 because these are overwriting the previous values if the tab is inactive. 47 00:03:10.570 --> 00:03:16.460 So we also have a different height for these tabs. 48 00:03:16.490 --> 00:03:18.980 So let's make sure that we include this here. 49 00:03:19.010 --> 00:03:22.700 It has a height of 50 and the font styles 50 00:03:22.730 --> 00:03:27.940 are also different so let's make sure that we consider that. 51 00:03:27.970 --> 00:03:30.700 So here the font weight is 500, 52 00:03:30.730 --> 00:03:38.820 that is similar and then font size is 14 and not 16 and the line height is 17. 53 00:03:38.850 --> 00:03:40.780 Great, let's save this. 54 00:03:40.810 --> 00:03:47.420 And now let's go to our home JS file and just let's get rid of these buttons 55 00:03:47.450 --> 00:03:52.700 for the moment and let's see how our tabs are looking. 56 00:03:52.730 --> 00:04:00.380 So I'm going to use the tab component and then I'm going to import this here. 57 00:04:00.410 --> 00:04:04.900 I'm going to place it here actually with all the rest of the components 58 00:04:04.930 --> 00:04:09.460 and then it tells me that it needs a title prop. 59 00:04:09.490 --> 00:04:14.880 So let's say the title is highlight 60 00:04:15.240 --> 00:04:20.600 and one problem to notice here is that this takes the whole width while this 61 00:04:20.630 --> 00:04:27.220 has a width according to the text and then it has some horizontal padding to it. 62 00:04:27.250 --> 00:04:32.900 So how can we make this take as much width as it needs? 63 00:04:32.920 --> 00:04:35.860 There are two ways to handle this situation. 64 00:04:35.890 --> 00:04:38.540 One way, which I'm not a big fan of, 65 00:04:38.570 --> 00:04:42.540 but I'm going to show it to you, is that we place it inside the view 66 00:04:42.570 --> 00:04:49.100 component and then we style it and give it some kind of defined width. 67 00:04:49.130 --> 00:04:55.820 Let's say horizontal scale 130 and then it's going to become smaller. 68 00:04:55.840 --> 00:04:58.300 But if we go with this way, 69 00:04:58.330 --> 00:05:03.220 it would mean that for every tab that we use we're going to have to define 70 00:05:03.250 --> 00:05:09.940 the width ourselves and I think that is going to be annoying and inconsistent. 71 00:05:09.970 --> 00:05:12.500 So we're going to use another way. 72 00:05:12.530 --> 00:05:16.460 And that another way involves using refs. 73 00:05:16.480 --> 00:05:22.220 So far in this project that we've been working on, we have not used refs. 74 00:05:22.250 --> 00:05:28.700 But in the hooks section of this course we do go over how to use refs. 75 00:05:28.730 --> 00:05:31.980 And the pressable usually takes the whole 76 00:05:32.010 --> 00:05:36.740 block and it doesn't measure the width of what's inside of it. 77 00:05:36.770 --> 00:05:41.460 So we're going to have to do this calculation ourselves using the refs. 78 00:05:41.480 --> 00:05:46.340 So let's do that and it's going to be a good practice for you as well. 79 00:05:46.360 --> 00:05:50.660 Let's import, use refs and usestate. 80 00:05:50.690 --> 00:05:56.820 And we're going to usestate to define width that we're going to set this 81 00:05:56.850 --> 00:06:01.540 pressable button to and then we're going to need the set width for that. 82 00:06:01.570 --> 00:06:06.880 And our initial state is going to be zero. 83 00:06:07.000 --> 00:06:10.900 Then we're going to use a text ref to find 84 00:06:10.920 --> 00:06:15.780 out how much exactly the text inside of it has. 85 00:06:15.800 --> 00:06:22.780 So let's create a constant and call it text ref. 86 00:06:22.800 --> 00:06:27.260 And let's use ref and just set it to null. 87 00:06:27.290 --> 00:06:29.420 And then we're going to use this text ref 88 00:06:29.450 --> 00:06:34.860 to get a reference to the text component here. 89 00:06:34.890 --> 00:06:36.300 Great. 90 00:06:36.330 --> 00:06:40.300 And then when the component is rendered 91 00:06:40.330 --> 00:06:44.360 on the layout of the text, what we're going to do is we're going 92 00:06:44.390 --> 00:06:53.860 to get the event and we're going to set the width to event 93 00:06:53.890 --> 00:07:00.460 native event lines zero, which is going to grab our title that's 94 00:07:00.480 --> 00:07:05.600 inside the text and then we're going to get its width. 95 00:07:06.200 --> 00:07:06.820 Great. 96 00:07:06.850 --> 00:07:11.500 So now we're setting the width to the width of the text here. 97 00:07:11.530 --> 00:07:15.020 And if we console log width 98 00:07:15.040 --> 00:07:20.700 and go to our terminal, we're going to see that its width is 60. 99 00:07:20.730 --> 00:07:23.260 But what we don't want to see happen is 100 00:07:23.290 --> 00:07:27.620 that button exactly becomes the width of the text because then we're not going 101 00:07:27.650 --> 00:07:31.100 to have any kind of horizontal padding that's given here. 102 00:07:31.130 --> 00:07:32.840 So if we look at this we see 103 00:07:32.860 --> 00:07:36.980 that horizontal padding is approximately 33 on each side. 104 00:07:37.010 --> 00:07:39.700 So what we want to do is 105 00:07:39.730 --> 00:07:47.980 define a constant here called padding horizontal and say that it is 33. 106 00:07:48.010 --> 00:07:53.320 And then we want to pass one more style here. 107 00:07:53.400 --> 00:07:58.300 Let's call it tab width and let's define it here. 108 00:07:58.330 --> 00:08:00.860 So tab width is going to be equal 109 00:08:00.890 --> 00:08:06.420 to an object that has width of horizontal 110 00:08:06.450 --> 00:08:12.300 scale heading horizontal times two 111 00:08:12.330 --> 00:08:20.640 because we need it on each side plus the width of the text. 112 00:08:21.160 --> 00:08:26.260 Great, let's import the horizontal scale. 113 00:08:26.290 --> 00:08:28.500 And now let's save this 114 00:08:28.530 --> 00:08:32.180 and we have some error because we don't need the semicolon here. 115 00:08:32.200 --> 00:08:33.380 And great. 116 00:08:33.410 --> 00:08:39.240 Now this takes exactly the amount of width that it needs and we're not going to have 117 00:08:39.270 --> 00:08:44.420 to make any kind of containers with custom width every time we want to use this tab. 118 00:08:44.440 --> 00:08:52.920 So now let's go back to home and see how this tab would look if it was inactive. 119 00:08:55.240 --> 00:08:56.060 Great. 120 00:08:56.080 --> 00:09:02.140 This look pretty similar to what's given in our screens so we can use the tab 121 00:09:02.170 --> 00:09:06.700 component later once we're going to start working on our screens. 122 00:09:06.720 --> 00:09:09.240 Thanks so much for watching and I'll see you in the next video.