WEBVTT 00:00:01.120 --> 00:00:03.620 Hi, everyone, and welcome back to this video. 00:00:03.650 --> 00:00:09.010 Today, we're going to take care of how our tab labels are designed. 00:00:09.040 --> 00:00:11.960 Here you might notice that compared to our 00:00:11.990 --> 00:00:15.540 design, these tab labels look very different. 00:00:15.570 --> 00:00:19.180 First of all, if we are being focused on a specific tab, 00:00:19.210 --> 00:00:25.140 we do have this blue underline letting us know that we are focusing on tab two. 00:00:25.170 --> 00:00:32.220 While in our design, we have no underline, however, the label for the item that's 00:00:32.250 --> 00:00:37.620 being selected in our tabs is black and the other ones are gray. 00:00:37.640 --> 00:00:42.420 We are going to make sure that that is reflected in our design. 00:00:42.450 --> 00:00:44.740 Let's get started on that. 00:00:44.770 --> 00:00:47.380 Now, if you want to create 00:00:47.410 --> 00:00:53.180 a specific design for the tab labels, you would have to create a new component. 00:00:53.210 --> 00:00:57.800 For that, we are going to go to our Component directory. 00:00:57.830 --> 00:01:00.201 Here I have already created 00:01:00.401 --> 00:01:02.660 profile tab title directory. 00:01:02.680 --> 00:01:04.458 Inside here, I'm going 00:01:04.658 --> 00:01:08.180 to create profile tab title.js file. 00:01:08.210 --> 00:01:12.620 Of course, I'm going to create this style.js file as well. 00:01:12.650 --> 00:01:14.800 Then what we want to do is make sure 00:01:14.830 --> 00:01:20.800 that we set up this component that accepts a title prop so that we are free to use 00:01:20.830 --> 00:01:24.340 this component and reuse it as many times as we want. 00:01:24.370 --> 00:01:28.540 Here we're going to have to create a component that accepts a prop 00:01:28.570 --> 00:01:34.570 title so that we're able to reuse this component with different titles. 00:01:34.600 --> 00:01:37.205 Let's set this up and say that we're 00:01:37.405 --> 00:01:38.290 importing React 00:01:38.320 --> 00:01:43.660 and we're also going to need a text component definitely from React Native. 00:01:43.690 --> 00:01:46.820 As I said, we are going to be using props, 00:01:46.850 --> 00:01:49.900 so we are going to need the prop types here. 00:01:49.930 --> 00:01:51.780 Let's create a new constant, 00:01:51.810 --> 00:01:56.180 call it profile tab title, and it's going to accept some props. 00:01:56.210 --> 00:02:00.980 For now, it's going to return null, and let's make sure that this is exportable. 00:02:01.010 --> 00:02:02.210 Great. 00:02:02.240 --> 00:02:04.720 Of course, since we're using the props, 00:02:04.750 --> 00:02:07.490 we're going to have to set the prop types up here. 00:02:07.520 --> 00:02:13.420 Let's say that profile tab title is going to be expecting some props 00:02:13.450 --> 00:02:18.100 and their types are going to be, let's call our prop title, 00:02:18.130 --> 00:02:22.420 and it's going to be a string and it's going to be required. 00:02:22.440 --> 00:02:22.840 Great. 00:02:22.870 --> 00:02:25.640 Let's make sure that we use this title right here. 00:02:25.670 --> 00:02:31.560 Let's create a text component inside, which we're going to use props.title. 00:02:33.240 --> 00:02:34.220 Let's save this. 00:02:34.250 --> 00:02:39.780 Now let's see how we can use this component with our tab Navigator. 00:02:39.810 --> 00:02:44.880 The tab Navigator actually comes with a property called options, 00:02:44.910 --> 00:02:47.520 inside which you can set up many different things. 00:02:47.550 --> 00:02:49.820 It's used for various tasks. 00:02:49.840 --> 00:02:51.720 If you're interested in all of the items 00:02:51.750 --> 00:02:56.480 that are available inside the options, you have a link to the documentation 00:02:56.510 --> 00:02:59.760 inside the Resources folder, so make sure to check that out. 00:02:59.790 --> 00:03:02.040 But I can also tell you that if we were 00:03:02.070 --> 00:03:06.610 to create a specific component for our tab titles, 00:03:06.640 --> 00:03:13.080 what we can use here is tab bar label, and it's going to use a callback function 00:03:13.110 --> 00:03:17.780 to return a component that we just designed, profile tab title. 00:03:17.810 --> 00:03:20.740 This property automatically got created 00:03:20.770 --> 00:03:24.940 for me by my editor because it knows that the title is required. 00:03:24.970 --> 00:03:29.660 Here I'm going to save photos as given on our design. 00:03:29.680 --> 00:03:31.440 I'm going to return this and I'm going 00:03:31.470 --> 00:03:35.700 to save this and you're going to see that photos appeared here right now. 00:03:35.730 --> 00:03:38.400 Now I'm just going to copy these options 00:03:38.430 --> 00:03:42.300 and just paste it for each of the components given here. 00:03:42.330 --> 00:03:47.200 I'm going to save this and the options are going to be available for tab two as well. 00:03:47.200 --> 00:03:49.120 But we don't want this to be called photos. 00:03:49.150 --> 00:03:51.260 We actually want this to be called videos. 00:03:51.290 --> 00:03:55.420 Let's replace the string here and now it's called videos. 00:03:55.450 --> 00:04:03.140 Then we also want it for our tab three and here we're going to call it saved. 00:04:03.170 --> 00:04:09.580 Let's save this and now you can see that our tabs have appropriate titles. 00:04:09.610 --> 00:04:12.280 However, since we replaced our titles 00:04:12.310 --> 00:04:15.020 with the components, all of them are now black. 00:04:15.050 --> 00:04:22.100 What we want to do is find out whether the tab is being focused on or not to make 00:04:22.130 --> 00:04:27.860 sure that we can change the styling of profile tab title appropriately. 00:04:27.890 --> 00:04:32.760 Tab bar label comes with different arguments inside the callback function, 00:04:32.780 --> 00:04:36.860 and one of them that's available for us is called focused. 00:04:36.890 --> 00:04:39.980 Let's grab this focused 00:04:40.010 --> 00:04:44.780 boolean and make sure that we pass it to our profile tab title. 00:04:44.800 --> 00:04:46.860 I'm just going to press on Enter right 00:04:46.890 --> 00:04:50.100 here so that this is easily visible for you. 00:04:50.130 --> 00:04:55.260 Here I'm going to set up a new property and I'm going to call it isFocused. 00:04:55.280 --> 00:04:58.420 I'm going to press this Focused boolean right here. 00:04:58.450 --> 00:05:01.860 This is going to be true if we're being focused on the tab. 00:05:01.890 --> 00:05:04.740 It's going to be false if we're not. 00:05:04.770 --> 00:05:11.700 Let's just copy this and paste it inside the other tabs that we set up as well. 00:05:11.720 --> 00:05:18.580 Let's make sure that this focused state is available here and here. 00:05:18.600 --> 00:05:19.460 Let's save this. 00:05:19.480 --> 00:05:25.400 Now we have to make sure that our component actually uses this property. 00:05:25.420 --> 00:05:29.800 Here we can set up a new property that we're expecting and it's going to be 00:05:29.830 --> 00:05:33.420 of type bool and it's going to be required. 00:05:33.450 --> 00:05:34.260 Let's save this. 00:05:34.290 --> 00:05:41.540 Now let's set up different styles according to our focus state. 00:05:41.570 --> 00:05:44.460 First of all, let's create a style here 00:05:44.480 --> 00:05:48.940 and let's say that we're going to use style.title 00:05:48.970 --> 00:05:51.480 for styling this title. 00:05:51.510 --> 00:05:54.352 Now we got to go to style.js file, 00:05:54.552 --> 00:05:56.860 import style sheet right here, 00:05:56.880 --> 00:06:00.040 create a constant called style, and use this style and use this stylesheet 00:06:00.070 --> 00:06:05.100 to create a new style sheet inside which we're going to define title. 00:06:05.130 --> 00:06:08.540 Let's just make sure that this is exportable. 00:06:08.570 --> 00:06:11.580 Now let's go here and import this. 00:06:11.600 --> 00:06:14.700 So import style from style. 00:06:14.730 --> 00:06:16.140 Let's save this. 00:06:16.170 --> 00:06:19.500 I'm just going to go back to our profile page right here. 00:06:19.530 --> 00:06:23.600 Inside this title, I'm going to start setting up some of the items. 00:06:23.630 --> 00:06:26.780 Let me move this a little bit to the right side. 00:06:26.800 --> 00:06:28.980 I'm just going to click on this, 00:06:29.010 --> 00:06:34.460 and I'm just going to start creating the styles inside the title object. 00:06:34.480 --> 00:06:37.820 First of all, I'm going to grab this color 00:06:37.850 --> 00:06:42.140 and I'm going to set this up here and paste it here. 00:06:42.170 --> 00:06:44.320 Then we want to get the font family 00:06:44.350 --> 00:06:48.100 and it's going to use get font family function. 00:06:48.130 --> 00:06:50.400 Let's say that this is font inter and we 00:06:50.420 --> 00:06:56.980 need font weight of 500 and I'm going to pass the string 500 right here. 00:06:57.010 --> 00:07:03.300 Let's say that font size is also scale font size 16. 00:07:03.330 --> 00:07:08.100 These are imported for me, so make sure that they are imported for you as well. 00:07:08.130 --> 00:07:13.840 Now we also have to make sure that we have a title that's not focused because this is 00:07:13.860 --> 00:07:19.220 the focused state and if we press on here, this will be the one that's not focused. 00:07:19.250 --> 00:07:24.760 Let's go here and say title not focused. 00:07:24.840 --> 00:07:26.680 Now let's create a new object right here 00:07:26.710 --> 00:07:32.900 and say that we need a different color and it's going to be right this one. 00:07:32.920 --> 00:07:35.200 Then we're also going to need to set up 00:07:35.230 --> 00:07:40.180 the font family so that we can set different font weight. 00:07:40.210 --> 00:07:42.800 Let's use get font family and say 00:07:42.830 --> 00:07:48.900 that this is going to be inter and it's going to need string 400. 00:07:48.920 --> 00:07:52.600 Great. Now let's go back to our profile tab title 00:07:52.630 --> 00:07:57.780 and make sure that we use the title not focused as needed as well. 00:07:57.800 --> 00:07:59.800 Here we're just going to create an array 00:07:59.830 --> 00:08:04.060 so we're able to put in a couple of styles. 00:08:04.090 --> 00:08:15.860 Let's say that if props is focused is true, then we want to use style.titleNotFocused. 00:08:15.890 --> 00:08:18.280 I'm going to save this. 00:08:18.360 --> 00:08:22.520 Now if we go back to our simulator, 00:08:24.240 --> 00:08:29.020 you're going to see that this is grayed out and the other ones are not. 00:08:29.040 --> 00:08:31.220 Actually, it should be in reverse. 00:08:31.240 --> 00:08:32.240 If we want to do that, 00:08:32.270 --> 00:08:36.260 we should just make sure that we say that this should not be focused. 00:08:36.290 --> 00:08:39.760 Sorry about that. Now we see it as we're supposed to see it. 00:08:39.790 --> 00:08:42.340 If it is focused, then our text is 00:08:42.370 --> 00:08:47.620 turning a little bit more black and these other ones are grayed out. 00:08:47.650 --> 00:08:53.380 Now we also want to make sure that we have the space available as given right here 00:08:53.410 --> 00:08:56.580 and that will be achieved using the padding. 00:08:56.610 --> 00:09:01.800 Let's just go to style the title here and let's give this some padding. 00:09:01.820 --> 00:09:04.400 How much do we want this to be? 00:09:04.430 --> 00:09:13.140 Let's say, padding and let's use horizontal scale and maybe 10. 00:09:13.170 --> 00:09:15.860 I think this looks way better. 00:09:15.890 --> 00:09:19.860 We can even increase it a little bit, maybe to 15. 00:09:19.890 --> 00:09:22.820 I think this might look even better right now. 00:09:22.850 --> 00:09:27.500 This looks amazing, exactly as we want it to look. 00:09:27.530 --> 00:09:33.400 Now, what we want to do is replace the content inside the tabs and make sure 00:09:33.430 --> 00:09:37.980 that we don't have this underline present here anymore. 00:09:38.010 --> 00:09:39.880 For that, actually, 00:09:39.910 --> 00:09:46.220 we're going to need to go to the main navigation and add some more options. 00:09:46.250 --> 00:09:49.160 The options are going to be for the whole 00:09:49.190 --> 00:09:53.820 navigator so that it affects each screen given here. 00:09:53.850 --> 00:09:59.260 This is going to be called Screen Options. 00:09:59.290 --> 00:10:02.020 Let's set this up 00:10:02.050 --> 00:10:06.620 and let's create an object inside here and we're going to say that 00:10:06.650 --> 00:10:14.100 the tab bar indicator style is going to be 00:10:14.130 --> 00:10:20.260 with background color transparent. 00:10:20.290 --> 00:10:25.020 This is going to make sure that we don't see this item anymore. 00:10:25.050 --> 00:10:28.980 But if you notice we have this gray line 00:10:29.010 --> 00:10:35.060 still present here right about our tabs and I want to get rid of it. 00:10:35.080 --> 00:10:39.620 Let's do tab bar style as well. 00:10:39.650 --> 00:10:43.180 Let's make sure that we set Z index to zero. 00:10:43.200 --> 00:10:45.640 Now we don't have that line here anymore. 00:10:45.670 --> 00:10:49.660 I can just comment this out and maybe you will notice it right now. 00:10:49.690 --> 00:10:54.700 Now that line is present and if I uncomment this back, it's not right here. 00:10:54.730 --> 00:10:59.960 Sometimes for Android, you might need to set up elevation and say that it's zero. 00:10:59.990 --> 00:11:03.060 Let's do that here. Perfect. 00:11:03.080 --> 00:11:06.920 Now these are working as they are supposed to. 00:11:06.950 --> 00:11:08.160 If we click on videos, 00:11:08.190 --> 00:11:13.380 it's going to be in focus state and we're going to see that this is tab two. 00:11:13.410 --> 00:11:18.220 Now what we have left is actually making sure that different content appears here. 00:11:18.250 --> 00:11:20.220 However, I don't want this video to get 00:11:20.250 --> 00:11:24.060 too long and we can do this in the next video. 00:11:24.080 --> 00:11:26.380 Just come back whenever you're ready. 00:11:26.410 --> 00:11:28.080 Thank you so much for watching. 00:11:28.080 --> 00:11:29.360 I hope you enjoyed this lesson.