WEBVTT 00:00:00.280 --> 00:00:02.020 Hi, everyone, and welcome back. 00:00:02.040 --> 00:00:04.440 In today's video, we're going to cover a very important 00:00:04.470 --> 00:00:08.820 navigation component called the top tab bar navigation. 00:00:08.850 --> 00:00:10.900 What exactly is it? 00:00:10.920 --> 00:00:11.960 Here you can see a demonstration 00:00:11.990 --> 00:00:15.880 of the tab Navigator, and it's a type of navigation component 00:00:15.910 --> 00:00:19.340 that allows you to organize your application screen in a horizontal 00:00:19.370 --> 00:00:24.780 swipable tab layout adhering to the material design specifications. 00:00:24.810 --> 00:00:26.580 Now, why is it useful? 00:00:26.600 --> 00:00:28.720 Tab navigation is incredibly handy when 00:00:28.740 --> 00:00:32.680 you want to provide easy access to different functionalities or sections 00:00:32.710 --> 00:00:36.580 of your application without the need to navigate to a new screen. 00:00:36.610 --> 00:00:38.520 This not only makes navigation faster, 00:00:38.550 --> 00:00:41.860 but also provides a more seamless experience for the user. 00:00:41.880 --> 00:00:43.600 In this video, we're going to be using 00:00:43.630 --> 00:00:48.880 the top tab bar navigation in a profile page, and we're going to make sure that we 00:00:48.910 --> 00:00:53.740 can create three different tabs that are given on our design. 00:00:53.760 --> 00:00:56.240 By the end of this video, you are going to have a solid 00:00:56.270 --> 00:01:00.060 understanding of how to use the top tab bar navigation. 00:01:00.080 --> 00:01:02.800 And because of the knowledge that you're going to gain in this video, 00:01:02.830 --> 00:01:07.960 you will also be able to make the use of bottom tab Navigator whenever you want 00:01:07.990 --> 00:01:10.480 to because they're very similar in the setup. 00:01:10.510 --> 00:01:15.180 So once you learn one, the other one becomes super simple. 00:01:15.210 --> 00:01:17.050 Let's just get started with this. 00:01:17.080 --> 00:01:20.340 I have my React navigation documentation open. 00:01:20.370 --> 00:01:22.680 The link for this documentation is also 00:01:22.710 --> 00:01:26.480 inside the Resources folder, so you can always feel free to just click 00:01:26.510 --> 00:01:30.620 on that resource and get the same link that I have opened here. 00:01:30.640 --> 00:01:31.040 Great. 00:01:31.040 --> 00:01:33.520 Now let's follow the installation guidelines for this. 00:01:33.550 --> 00:01:37.850 I'm going to make sure that all of my terminals are terminated. 00:01:37.880 --> 00:01:40.280 I'm going to open a completely new one 00:01:40.310 --> 00:01:44.930 and I'm going to go to the social media application. 00:01:44.960 --> 00:01:50.200 I'm going to copy this command and paste it here and let it run. 00:01:50.800 --> 00:01:55.080 Once that gets done, we're not going to use any expo instructions. 00:01:55.110 --> 00:01:56.640 We are not using expo. 00:01:56.670 --> 00:01:59.920 We're going to go with Bear react native project set up. 00:01:59.950 --> 00:02:01.425 What we're going to do is 00:02:01.625 --> 00:02:02.900 install this page review. 00:02:02.930 --> 00:02:06.820 Just copy this and paste it in your terminal and let it run. 00:02:06.850 --> 00:02:11.060 Wait, once you're done, if you're running on macOS, make sure to install the pod. 00:02:11.090 --> 00:02:14.450 You can just copy this command, paste it here, and let it run. 00:02:14.480 --> 00:02:17.600 If you're on Windows, please don't run pod installation. 00:02:17.630 --> 00:02:20.080 Since everything has been set up for us 00:02:20.110 --> 00:02:23.480 and new pods have been installed, I just want to quit my terminal. 00:02:23.510 --> 00:02:27.660 You should do so as well, especially if you're running on Windows machine. 00:02:27.690 --> 00:02:29.960 Reopen your command line prompt or 00:02:29.990 --> 00:02:35.700 the terminal and make sure to navigate to social media app. 00:02:35.730 --> 00:02:41.200 Then I'm just going to clear my terminal and here I'm going to run it on iOS. 00:02:41.230 --> 00:02:44.820 If you're on Windows, just run it on Android. 00:02:44.850 --> 00:02:49.100 Let's wait for this to complete and come back to the video once you're done. 00:02:49.120 --> 00:02:51.560 Great. The application ran successfully. 00:02:51.590 --> 00:02:54.280 Right now you see the profile page displayed here. 00:02:54.280 --> 00:02:55.120 If you want to navigate, 00:02:55.150 --> 00:02:58.580 don't forget that you always have this drawer Navigator right here. 00:02:58.600 --> 00:03:00.880 You can just click on profile to come to this page. 00:03:00.910 --> 00:03:05.340 Right now we're going to start creating the profile tabs together. 00:03:05.370 --> 00:03:09.840 Here's the profile page that I've opened up and what we want to do is create a new 00:03:09.870 --> 00:03:15.100 type of Navigator and make sure that we place it right after this content. 00:03:15.120 --> 00:03:16.520 For that, we're going to have to go 00:03:16.550 --> 00:03:20.540 to navigation and let's go to mainnavigation.js file. 00:03:20.570 --> 00:03:24.580 Here, let's create a new tab navigation. 00:03:24.610 --> 00:03:27.600 For this, we're going to need to create 00:03:27.630 --> 00:03:32.780 a new variable and let's call it profile tabs. 00:03:32.810 --> 00:03:38.220 Then we want to create material top tab Navigator. 00:03:38.250 --> 00:03:40.680 Let's save this. Great. 00:03:40.710 --> 00:03:45.180 Now we can use this variable to set up our tabs. 00:03:45.210 --> 00:03:48.100 First of all, we're going to create 00:03:48.130 --> 00:03:56.880 a new exportable constant and we're going to call it profile tabs navigation. 00:03:57.000 --> 00:04:00.240 Then we want to return a component here 00:04:00.270 --> 00:04:04.700 that is going to be using the profile tabs that we set up here. 00:04:04.730 --> 00:04:07.040 We're going to need Navigator here as well. 00:04:07.070 --> 00:04:10.780 Inside here, we're going to place three tabs. 00:04:10.800 --> 00:04:20.300 Let's do this. Let's place ProfileTabs.Screen here and let's call this just tab one for now. 00:04:20.330 --> 00:04:24.560 Let's say that it's going to contain a component that we're going to design. 00:04:24.590 --> 00:04:28.340 So far, let's put a null here and let's save this. 00:04:28.360 --> 00:04:33.700 What we want to do is make sure that we create a component for this. 00:04:33.720 --> 00:04:36.420 Let's just create a very simple component. 00:04:36.450 --> 00:04:41.380 I'm just going to call it tab one and it's going to be defined right here 00:04:41.410 --> 00:04:44.960 and we're going to replace it with the actual tabs in the next lesson. 00:04:44.980 --> 00:04:48.380 I just want to demonstrate to you right now how this works. 00:04:48.410 --> 00:04:51.560 Let's just return a new view component. 00:04:51.590 --> 00:04:55.140 I'm just going to import this here. 00:04:55.160 --> 00:04:59.700 Then let's say that we want to place a text here. 00:04:59.720 --> 00:05:04.860 I'm just going to import it right here. 00:05:04.890 --> 00:05:13.300 Then what we want to do is place a text here that says this is tab one. 00:05:13.330 --> 00:05:15.860 Now we want to make sure that this is centered. 00:05:15.890 --> 00:05:20.780 Let's create a style here and use flex one 00:05:20.800 --> 00:05:25.940 and justify content center and align items center. 00:05:25.960 --> 00:05:26.280 Great. 00:05:26.300 --> 00:05:31.400 Let's just copy this and paste it two more times. 00:05:32.520 --> 00:05:35.500 Let's make sure that we rename this to tab 00:05:35.530 --> 00:05:40.300 two and tab three, and let's rename the text inside of here as well. 00:05:40.330 --> 00:05:45.680 Now let's use these components right here inside the profile tabs Navigator. 00:05:45.710 --> 00:05:49.700 Let's say that our component that we use here is going to be tab one. 00:05:49.730 --> 00:05:55.620 Let's copy this, paste it here, and call this tab two and use tab two component. 00:05:55.650 --> 00:05:59.760 Let's do this for tab three as well. Great. 00:05:59.790 --> 00:06:01.960 Now we have saved this and all that's left 00:06:01.980 --> 00:06:06.140 to do really is import this inside the profile.js file. 00:06:06.170 --> 00:06:10.980 Right below all of the content, let's create a new 00:06:11.010 --> 00:06:16.820 view container inside which we're going to place profile tabs navigation. 00:06:16.850 --> 00:06:21.100 It's going to be imported for me, so make sure that it's imported for you as well. 00:06:21.130 --> 00:06:25.440 Let's save this. Here you're going to see tab one, tab two, 00:06:25.470 --> 00:06:29.180 and tab three appear, but we don't see this content right here. 00:06:29.210 --> 00:06:32.360 I do doubt that it might be because of the flex. 00:06:32.390 --> 00:06:38.460 Let's make sure that we use a global style here and we use the flex. 00:06:38.480 --> 00:06:41.920 Now you should be able to see that this is tab one. 00:06:41.950 --> 00:06:45.380 If you start swiping from right to left, 00:06:45.410 --> 00:06:49.340 you're actually going to start switching from the first tab to the second tab. 00:06:49.360 --> 00:06:51.480 You can see this animation right here 00:06:51.510 --> 00:06:55.380 and it says here this is tab two and this is tab three. 00:06:55.410 --> 00:06:59.900 This is how easy it is to set up top tab navigation. 00:06:59.920 --> 00:07:04.240 In the next lesson, what we're going to be doing is making sure that these tabs look 00:07:04.270 --> 00:07:07.500 exactly as we want it to according to our design. 00:07:07.520 --> 00:07:10.400 Thank you so much for watching and I'll see you in the next video.