WEBVTT 00:00:00.120 --> 00:00:01.860 Hello, everyone, and welcome back. 00:00:01.880 --> 00:00:03.520 Today, we're going to delve into a very 00:00:03.550 --> 00:00:07.180 important component of React native, the drawer Navigator. 00:00:07.210 --> 00:00:10.620 First things first, what is exactly drawer Navigator? 00:00:10.640 --> 00:00:12.560 Well, it's a type of navigation component 00:00:12.590 --> 00:00:16.420 provided by React Navigation Library that allows you to organize your 00:00:16.440 --> 00:00:19.620 application's navigation in a more accessible and efficient manner. 00:00:19.650 --> 00:00:23.180 You can see how it works right here on the documentation provided. 00:00:23.210 --> 00:00:25.520 You also have a link inside the Resources 00:00:25.550 --> 00:00:29.460 folder and you can just click on it and navigate to the same page. 00:00:29.490 --> 00:00:31.920 Basically, the drawer Navigator provides 00:00:31.950 --> 00:00:36.560 a slide-in menu that the user can access by swiping from left to the right edge 00:00:36.590 --> 00:00:39.340 of the screen or by pressing the menu button. 00:00:39.360 --> 00:00:40.960 This drawer can contain any type 00:00:40.990 --> 00:00:44.080 of component or view, but it usually holds navigation options 00:00:44.110 --> 00:00:47.100 such as application settings or user profiles. 00:00:47.130 --> 00:00:50.360 It's particularly useful and helpful in applications 00:00:50.390 --> 00:00:53.860 that have a significant number of screens or functionalities. 00:00:53.890 --> 00:00:55.680 Instead of cluttering the screen 00:00:55.710 --> 00:00:58.280 with buttons or tabs, you can neatly organize them 00:00:58.310 --> 00:01:01.420 into categories and place them inside the drawer Navigator. 00:01:01.450 --> 00:01:04.570 This provides a cleaner, more user-friendly interface. 00:01:04.600 --> 00:01:07.800 For example, right now in our application, what we had to do to navigate 00:01:07.830 --> 00:01:12.700 to the profile page is actually use the touchable opacity message icon. 00:01:12.730 --> 00:01:14.880 Instead of that, what we could do is place 00:01:14.910 --> 00:01:19.120 the profile page directly inside a menu like drawer Navigator. 00:01:19.150 --> 00:01:23.490 Let's just install the drawer Navigator and start using it. 00:01:23.520 --> 00:01:27.100 To do that, we're just going to follow the documentation provided here. 00:01:27.130 --> 00:01:29.080 Make sure that you close all your Metro 00:01:29.110 --> 00:01:32.160 bundlers and terminals and reopen a new one. 00:01:32.190 --> 00:01:36.210 Let's just navigate to desktop and social media. 00:01:36.240 --> 00:01:38.400 Here I'm going to clear my terminal. 00:01:38.430 --> 00:01:44.260 Then what I'm going to do is use this command to install drawer Navigator. 00:01:44.290 --> 00:01:47.460 After we do that, there are a couple of more steps to take. 00:01:47.480 --> 00:01:49.560 First of all, we're going to have to install 00:01:49.590 --> 00:01:53.100 the React Native gesture handler and React Native reanimated. 00:01:53.130 --> 00:01:57.520 We have already installed the gesture handler, but we might not have installed 00:01:57.520 --> 00:02:00.080 the React Native reanimated, so make sure to run this. 00:02:00.110 --> 00:02:03.290 Let's copy it and paste it here. 00:02:03.320 --> 00:02:04.700 Great, it's done. 00:02:04.720 --> 00:02:06.480 We don't need to import this because we 00:02:06.510 --> 00:02:10.100 have done this already, but we do need to install the pods. 00:02:10.130 --> 00:02:12.380 So if you're on macOS, please do this. 00:02:12.410 --> 00:02:14.730 If you're on Windows, don't do it. 00:02:14.760 --> 00:02:16.480 Don't ever install pods on Windows. 00:02:16.510 --> 00:02:18.280 I know I'm repeating it many times, 00:02:18.310 --> 00:02:22.890 but I want you to have it as a rule in your head that you don't edit iOS 00:02:22.920 --> 00:02:26.060 folder if you're on a Windows operating system. 00:02:26.080 --> 00:02:26.380 Great. 00:02:26.410 --> 00:02:28.840 Let's just do this right here if you're on macOS. 00:02:28.870 --> 00:02:31.500 I am running on macOS, so I got to do it. 00:02:31.530 --> 00:02:36.730 Right after we're done, we might have to add a Babel configuration. 00:02:36.760 --> 00:02:40.240 It's not really written inside this documentation, but I do know it. 00:02:40.270 --> 00:02:42.140 I have faced these issues myself. 00:02:42.170 --> 00:02:46.340 Just follow me here and make sure that you do the same thing. 00:02:46.370 --> 00:02:49.020 Let's just make sure that we find the Babel. 00:02:49.050 --> 00:02:52.980 Config file right here inside the root of our project. 00:02:53.010 --> 00:02:54.760 Go there and after this line, 00:02:54.790 --> 00:02:59.040 just make sure that you use React Native Reanimated plugin here. 00:02:59.070 --> 00:03:01.220 Otherwise you're going to face the issues. 00:03:01.250 --> 00:03:03.900 Just make sure that this plugin is right there. 00:03:03.930 --> 00:03:06.320 Now let's see how our pod installation went. 00:03:06.350 --> 00:03:08.220 It went perfectly fine. 00:03:08.250 --> 00:03:09.440 Let's clear this. 00:03:09.470 --> 00:03:11.880 Now we are going to try to run this 00:03:11.910 --> 00:03:16.380 application on iOS Simulator and start using the drawer Navigator. 00:03:16.410 --> 00:03:19.009 To do that, I'm just going to use 00:03:19.209 --> 00:03:20.900 npx react-native run-ios 00:03:20.920 --> 00:03:22.600 if you're running on Windows operating 00:03:22.630 --> 00:03:26.060 system, you already know that you got to run this on Android. 00:03:26.090 --> 00:03:29.780 Just do it and come back to the video once your application runs. 00:03:29.810 --> 00:03:33.700 Great, our application has run with no errors, which is perfect. 00:03:33.730 --> 00:03:38.220 Now let's go to main navigation and start creating main menu navigation. 00:03:38.250 --> 00:03:40.420 For that, we're also going to need 00:03:40.450 --> 00:03:43.860 something like a stack, but it's going to be called a drawer. 00:03:43.890 --> 00:03:49.020 Let's create a drawer right here and call Create drawer Navigator. 00:03:49.050 --> 00:03:51.060 It's going to be automatically imported 00:03:51.090 --> 00:03:54.380 for me, so make sure that you do so yourself. 00:03:54.400 --> 00:03:58.000 Then we're going to create a new constant and let's call it main menu navigation. 00:03:58.030 --> 00:04:03.260 Let's use it right here and let's use it right here. 00:04:03.290 --> 00:04:09.340 Let's return a functional component and let's use drawer navigator. 00:04:09.370 --> 00:04:12.120 Inside which we're only going to place 00:04:12.150 --> 00:04:16.780 the screens that we want to be visible inside our sliding menu. 00:04:16.800 --> 00:04:20.960 If there's any other screens that we would have had, we might decide not to place it 00:04:20.980 --> 00:04:24.160 there because we don't want it to be inside our menu. 00:04:24.190 --> 00:04:28.300 But if we want it to be there, then we have to do this. 00:04:28.320 --> 00:04:33.408 Great. Let's make sure that we use drawer.screen right here, 00:04:33.608 --> 00:04:38.920 and we're going to have to have the homepage right here, I think. 00:04:38.950 --> 00:04:44.600 So let's set that up and let's use the component of home right here. 00:04:44.630 --> 00:04:50.200 And this will enable having the home button appear right here. 00:04:50.220 --> 00:04:52.940 In fact, if you want to see how it might 00:04:52.970 --> 00:04:57.620 work, we can just get rid of the home from here. 00:04:57.650 --> 00:05:01.360 I'm getting an error here saying that I failed to create a workload. 00:05:01.390 --> 00:05:07.120 Did you forget to add reanimated Babel plugin in babel.config.js 00:05:07.150 --> 00:05:09.980 I actually did not forget to do it. 00:05:10.010 --> 00:05:18.740 So why don't we rerun our application using the cache deletion. 00:05:18.770 --> 00:05:21.632 Let's go to clear this and let's do 00:05:21.832 --> 00:05:23.840 npm start -- --reset-cache. 00:05:23.860 --> 00:05:28.240 This would reset all of the caches and we can try to rebuild the project. 00:05:28.270 --> 00:05:31.600 Again, I'm just going to press on I 00:05:31.630 --> 00:05:35.660 for I-O-S and it's going to try to open the application. 00:05:35.680 --> 00:05:38.220 Let's see if we're going to face the same issue or not. 00:05:38.240 --> 00:05:38.520 Great. 00:05:38.520 --> 00:05:40.460 It doesn't seem like we have the same issue. 00:05:40.480 --> 00:05:42.800 Let's just continue with this setup 00:05:42.830 --> 00:05:46.980 and see if we're going to face any issues going forward. 00:05:47.010 --> 00:05:51.700 Now that we have our drawer and our 00:05:51.730 --> 00:05:56.460 home screen, what we were going to do is actually delete this one from here. 00:05:56.480 --> 00:05:59.060 Now you see that our default page went 00:05:59.090 --> 00:06:02.360 to profile page directly because this is not available here. 00:06:02.390 --> 00:06:08.140 To make it available there, we just delete it home from our text screen. 00:06:08.170 --> 00:06:11.300 What we can do is instead use a new text 00:06:11.330 --> 00:06:16.040 screen and say that the name is going to be 00:06:16.070 --> 00:06:21.880 drawer and for the component we can use the main menu navigation that we just 00:06:21.910 --> 00:06:27.040 created and it's going to have access to all of the items defined here as well. 00:06:27.070 --> 00:06:32.860 Let's save this and we can just reload the application. 00:06:32.880 --> 00:06:33.320 Great. 00:06:33.350 --> 00:06:39.160 Now what you're going to see actually is the label of the homepage again. 00:06:39.480 --> 00:06:42.460 This icon is going to appear and it's 00:06:42.480 --> 00:06:44.400 going to be caused by the drawer Navigator. 00:06:44.420 --> 00:06:48.320 And if you're going to press on it, you're going to see home appear here. 00:06:48.350 --> 00:06:51.980 You can also slide from left to right and you're going to see it. 00:06:52.010 --> 00:06:56.740 But the thing is that for our application, we don't have this in our design. 00:06:56.770 --> 00:07:02.120 Therefore, we're going to have to copy these items and place it right here as 00:07:02.150 --> 00:07:06.380 well so that we don't see this header that goes against our design. 00:07:06.400 --> 00:07:09.240 Let's save this and you're not going to be able to see it anymore. 00:07:09.240 --> 00:07:10.740 But if you were to slide from left 00:07:10.770 --> 00:07:16.100 to right, you still are going to be able to access this menu. 00:07:16.130 --> 00:07:19.740 Now what we want to do is also do the same for the profile page. 00:07:19.770 --> 00:07:22.940 Let's just copy this and paste it here. 00:07:22.970 --> 00:07:25.000 We don't need that anymore over there. 00:07:25.030 --> 00:07:27.860 Let's make sure that this is called Drawer instead. 00:07:27.880 --> 00:07:31.040 Let's save this. Now what you're going to see happen is 00:07:31.070 --> 00:07:33.420 that profile page is available here as well. 00:07:33.450 --> 00:07:37.920 If I were to press on it, you would actually go to the profile page. 00:07:37.950 --> 00:07:41.220 Now, Go Back button will also work just fine 00:07:41.240 --> 00:07:43.420 and you're going to come back to the homepage. 00:07:43.450 --> 00:07:47.840 We don't want to be navigated to the profile page from here anymore. 00:07:47.840 --> 00:07:51.480 Let's just make sure that we don't access this anymore on our home screen. 00:07:51.510 --> 00:07:54.560 Let's go right here and delete this on press event. 00:07:54.590 --> 00:07:55.860 We don't need it anymore. 00:07:55.890 --> 00:07:57.220 Once we press on this, 00:07:57.250 --> 00:08:01.460 we shouldn't go anywhere because this definitely was not the right place 00:08:01.480 --> 00:08:04.440 to implement going to the profile functionality. 00:08:04.470 --> 00:08:07.740 But now we do have a right way of going to the profile page. 00:08:07.770 --> 00:08:11.080 Now probably all of you understand 00:08:11.100 --> 00:08:15.860 that our profile page looks hideous and it's nothing like our designs. 00:08:15.880 --> 00:08:18.360 In the next video, we're just going to finish up this 00:08:18.390 --> 00:08:22.220 application and make sure that our profile page looks presentable. 00:08:22.250 --> 00:08:24.400 There are some more navigators that we're 00:08:24.420 --> 00:08:29.360 going to explore so that you have an idea about any navigator that's really 00:08:29.390 --> 00:08:33.100 available with the React Native Navigation package. 00:08:33.120 --> 00:08:35.040 I will teach you the most important ones, 00:08:35.060 --> 00:08:37.520 so stay tuned and I'll see you in the next video. 00:08:37.520 --> 00:08:38.920 Thank you so much for watching.