1 00:00:02,870 --> 00:00:09,470 So let's at this last main navigation pattern you see in mobile apps, and that's having a side draw, 2 00:00:10,040 --> 00:00:12,620 of course, REAC navigation has us covered for that as well. 3 00:00:12,980 --> 00:00:18,740 From REACT navigation, you can import, create, draw navigator, which does just what it sounds like. 4 00:00:18,740 --> 00:00:24,710 It makes it easy for us to create this draw based navigation pattern and it gives us such a draw and 5 00:00:24,710 --> 00:00:29,990 all the functionality we need to control the straw out of the box, which is of course very convenient. 6 00:00:30,890 --> 00:00:35,030 So we simply create a new navigator and I'll do this at the bottom of this file. 7 00:00:35,390 --> 00:00:40,880 And just a quick side note, of course, you could split that into multiple files and have each navigator 8 00:00:40,880 --> 00:00:46,520 in its own file and then merge them together into one file by importing them into one central file. 9 00:00:46,550 --> 00:00:47,630 That is something you could do. 10 00:00:48,020 --> 00:00:51,390 I found it easier for this tutorial also to keep it all in one file. 11 00:00:51,410 --> 00:00:55,430 It's also not too big of a file, but you could definitely split this. 12 00:00:56,300 --> 00:01:01,070 So I will create my drawer navigator here at the bottom of this file and all stored in that constant 13 00:01:01,070 --> 00:01:04,350 named main navigator, because in the end, that's what it is. 14 00:01:04,370 --> 00:01:10,010 This will be our main navigator in the end because the tab will be inside of the drawer. 15 00:01:10,010 --> 00:01:11,720 Navigator in the end, our tabs here. 16 00:01:11,900 --> 00:01:18,830 So on both tabs, we have access to that side draw and decide or allows us to go to a brand new screen, 17 00:01:18,830 --> 00:01:20,690 which will not be part of our tabs. 18 00:01:20,870 --> 00:01:24,940 So the drawer navigator is above the tabs navigator in the hierarchy. 19 00:01:26,090 --> 00:01:27,860 So how do we configure such a draw? 20 00:01:27,860 --> 00:01:33,530 Navigator basically, just as we did before, it takes two arguments and the first argument is an object 21 00:01:33,530 --> 00:01:42,260 where we configured the screens for our navigator just before we have identifiers like tabs or meals, 22 00:01:42,260 --> 00:01:47,030 favs, whatever a fitting navigator is for that first drawer entry you want to have. 23 00:01:47,750 --> 00:01:54,800 And here I want to point at my meals FAF Tab Navigator in the end, because that's when I want to load 24 00:01:54,800 --> 00:01:55,190 there. 25 00:01:55,790 --> 00:01:58,940 And on a second entry is the filters screen. 26 00:02:00,270 --> 00:02:04,680 We must not forget that we have one hour screen, that's the filters screen, we haven't used it before. 27 00:02:05,010 --> 00:02:10,290 Now is it's time to shine and actually all wrapped us into a stack navigator, even though it will be 28 00:02:10,290 --> 00:02:10,850 empty. 29 00:02:11,070 --> 00:02:13,440 So did we get a header there as well? 30 00:02:14,100 --> 00:02:20,300 So I will add another Stack Navigator here with Create Stack Navigator. 31 00:02:20,340 --> 00:02:21,900 That's a very simple stack. 32 00:02:22,200 --> 00:02:26,670 It will have only one screen and that will be the filters screen, which would therefore need to import 33 00:02:26,670 --> 00:02:28,770 here at the top because we're not doing that yet. 34 00:02:29,280 --> 00:02:38,220 Let's import filters screen here from screens, filters, screen, and now we can use the filters screen 35 00:02:38,220 --> 00:02:39,060 down there. 36 00:02:40,100 --> 00:02:47,780 Whoops, not not here, but here in the Stack Navigator named as Filters Navigator or anything like 37 00:02:47,780 --> 00:02:48,170 that. 38 00:02:49,560 --> 00:02:55,350 And now it's just filters navigator, which map to filters in my drawer navigator and I only use a Stack 39 00:02:55,350 --> 00:02:59,030 Navigator here, so they also have a header there and for no other reason. 40 00:02:59,340 --> 00:03:02,400 Now on the filter screen will of course, work on this in a second. 41 00:03:02,580 --> 00:03:04,560 But on there, there's one thing I want to do right away. 42 00:03:04,800 --> 00:03:12,780 I will add my navigation options and I will add a header title there and set this to. 43 00:03:15,250 --> 00:03:19,750 Filters or filter meals, anything like that. 44 00:03:22,200 --> 00:03:27,000 With that, back to the Meals Navigator recreating that stack we're assigning to Fulton's Navigator, 45 00:03:27,000 --> 00:03:33,480 Stack Navigator, to our draw navigator, and now we just have to use the main navigator here in our 46 00:03:33,480 --> 00:03:36,000 app container to start with that. 47 00:03:37,180 --> 00:03:40,900 And now if we save this, we see nothing, though. 48 00:03:41,290 --> 00:03:46,030 Well, I said that the draw navigator would manage all the logic for opening it and so on. 49 00:03:46,630 --> 00:03:52,150 The thing it does not do for us automatically is show a menu icon. 50 00:03:53,770 --> 00:03:58,870 So it doesn't show a hamburger button for us, that's something we have to do and we can decide on which 51 00:03:58,870 --> 00:03:59,700 screens to show it. 52 00:03:59,710 --> 00:04:04,600 And of course, that would be the category screen because that's the rude screen for the meals tab and 53 00:04:04,600 --> 00:04:08,450 the favorite screen, because that's the root screen for his favorites tab. 54 00:04:09,310 --> 00:04:15,490 So in these two screens, I want to add to that menu icon and I add it in my navigation options, as 55 00:04:15,490 --> 00:04:20,140 you learned, because, dear, I want to add it with the help of Hattar left. 56 00:04:20,380 --> 00:04:25,180 Previously, we just had a right to add actions to the navigation bar to the header. 57 00:04:25,480 --> 00:04:27,720 But that menu button typically is on the left. 58 00:04:27,760 --> 00:04:32,320 We'll add it here and I will use my hattar buttons for this. 59 00:04:32,860 --> 00:04:36,640 So we'll import from react navigation. 60 00:04:36,640 --> 00:04:38,790 Hattar buttons does package we used earlier. 61 00:04:39,490 --> 00:04:45,010 From there I will import hattar buttons and also item what we also use before. 62 00:04:47,360 --> 00:04:55,460 And also import my custom header button, so header button from component's header button, so the same 63 00:04:55,460 --> 00:04:59,580 pattern we used before for adding that star icon in the action bar. 64 00:04:59,690 --> 00:05:03,160 Now I'll do it here for the menu icon for the menu button. 65 00:05:04,070 --> 00:05:09,590 And therefore we can now go down to the left and there at Hattar buttons. 66 00:05:11,250 --> 00:05:19,230 This year, as a component set the header button component to our header button component, we're importing 67 00:05:19,230 --> 00:05:24,690 from our own custom component and add an item in there which allows us to define a title that should 68 00:05:24,690 --> 00:05:25,320 be menu. 69 00:05:25,590 --> 00:05:31,230 And then very importantly, I can name and there you can use EOS menu. 70 00:05:31,440 --> 00:05:36,570 And by the way, you can always use the platform API here to use a different icon for Android and for 71 00:05:36,570 --> 00:05:37,700 iOS if you want to. 72 00:05:38,520 --> 00:05:44,160 And last but not least, also add on press to do something when that Putnis pressed. 73 00:05:44,790 --> 00:05:50,970 And now this should render a nice looking menu button here on that screen. 74 00:05:50,970 --> 00:05:55,500 And indeed we see it here on ISSUES and we also see it on Android. 75 00:05:55,650 --> 00:06:00,030 Now, again, if you want a different icon on Android, that looks more like a typical Android icons. 76 00:06:00,060 --> 00:06:01,290 The same is true for the taps. 77 00:06:01,290 --> 00:06:07,140 By the way, you can use the platform API to render a different icon there to save some time. 78 00:06:07,140 --> 00:06:08,310 I'll use the same icons. 79 00:06:09,690 --> 00:06:11,430 So this is how we display the icon. 80 00:06:11,850 --> 00:06:13,710 How do we now open to draw, though? 81 00:06:14,610 --> 00:06:19,890 Well, for this we need access to the navigation prop and we don't have that access and the navigation 82 00:06:19,890 --> 00:06:20,850 options like this. 83 00:06:21,360 --> 00:06:27,360 But of course, we learned earlier that you can use the function form here where you then get your NAV 84 00:06:27,360 --> 00:06:27,690 data. 85 00:06:27,690 --> 00:06:32,900 You could say in that function you then have to return your configuration object. 86 00:06:33,120 --> 00:06:36,450 So here you have to return an object in the end. 87 00:06:36,840 --> 00:06:39,920 And now NAFT data has such a navigation prop. 88 00:06:40,080 --> 00:06:46,380 So now here in on press we can say NAV data, dot navigation that will now be available, that's provided 89 00:06:46,380 --> 00:06:49,800 by react navigation which executes dysfunctionally end. 90 00:06:50,460 --> 00:06:53,520 And there you will have a toggle draw method. 91 00:06:53,940 --> 00:06:59,730 You would also have open draw if you know you only want to open it, but toggle draw will open it if 92 00:06:59,730 --> 00:07:01,460 it's closed and close it if it's open. 93 00:07:01,830 --> 00:07:05,870 So here you have toggle draw and Datchet open the side menu. 94 00:07:06,360 --> 00:07:10,080 So if we save that now, indeed the drawer opens. 95 00:07:10,380 --> 00:07:15,450 We can work on the styling of the text we see here in the second, but this is how you can open that 96 00:07:15,450 --> 00:07:15,990 drawer. 97 00:07:17,630 --> 00:07:22,700 Now, before we take care about how this looks here, let's make sure we have to say on Favourite's 98 00:07:22,700 --> 00:07:26,720 and of course, you can all to post a video and do it on your own here because the steps will be the 99 00:07:26,720 --> 00:07:29,110 same as for the meals categories here. 100 00:07:29,570 --> 00:07:33,050 It's a nice practice to offer, but after this short pause, you have to pause. 101 00:07:33,060 --> 00:07:34,460 This video will do it together. 102 00:07:36,150 --> 00:07:42,330 So where you successful, let's do it together and in the end, it's all just about copying this set 103 00:07:42,330 --> 00:07:42,810 up here. 104 00:07:44,410 --> 00:07:52,210 Tudy favorites screen, so I will copy this entire navigation options set up from the category's screen 105 00:07:52,210 --> 00:07:56,080 to the favorite screen and replace my navigation options there with it. 106 00:07:56,500 --> 00:08:01,360 Of course, that means that I have to rename this year to Favorite Screen and here change the title 107 00:08:01,360 --> 00:08:02,980 back to your favorites. 108 00:08:03,430 --> 00:08:08,830 But now I already have this dynamic navigation options creation function here where I have to target 109 00:08:08,830 --> 00:08:10,750 raw call here. 110 00:08:11,050 --> 00:08:12,700 The icon I want to use is the same. 111 00:08:13,060 --> 00:08:18,370 We just have to make sure we import all the things we need to import and for that we can grab the imports 112 00:08:18,370 --> 00:08:25,540 here from the categories screen as well, from the REACT Navigation Hattar Buttons package and from 113 00:08:25,540 --> 00:08:26,700 our own header button. 114 00:08:26,980 --> 00:08:30,850 Grab that and added here on the favorite screen. 115 00:08:31,870 --> 00:08:35,690 Now, with that, if we saved, as this should be all now on the favorite screen. 116 00:08:35,710 --> 00:08:39,580 We also have to draw and you can open it there as well. 117 00:08:39,900 --> 00:08:40,930 We cannot just open it. 118 00:08:40,930 --> 00:08:44,890 By the way, if we click on filters, we're all taken to the filter screen there. 119 00:08:44,890 --> 00:08:46,870 We right now just don't have a way back. 120 00:08:47,800 --> 00:08:50,050 But that's actually something we can all to fix right away. 121 00:08:50,200 --> 00:08:54,160 Because on the filter screen, I simply also just want to have a drawer at the top. 122 00:08:54,490 --> 00:08:57,100 So on the filter screen, I will also. 123 00:08:59,280 --> 00:09:08,010 At my imports here, we had her buttons and on and then all the admin navigational options here, so 124 00:09:08,010 --> 00:09:13,830 copied the navigation options from the favorite screen, this dynamic function, and added to the filters 125 00:09:13,830 --> 00:09:19,050 screen and replaced the navigation options there, of course, therefore then changed this year back 126 00:09:19,050 --> 00:09:25,250 to filters screen and changed the title back to filter meals or whatever you want here. 127 00:09:25,980 --> 00:09:32,070 And with that, we should have a draw on the filter screen as well, and that allows us to go back to 128 00:09:32,070 --> 00:09:32,610 our meals. 129 00:09:33,720 --> 00:09:35,400 Now, a couple of things are missing, though. 130 00:09:35,550 --> 00:09:40,830 For example, on the filter screen, the header looks totally different and therefore here on Android, 131 00:09:40,830 --> 00:09:42,810 I can't even see my button because it's white. 132 00:09:43,620 --> 00:09:46,230 The texture is not the text I want to display. 133 00:09:46,230 --> 00:09:49,830 I also want to use different colors here, maybe different fonts. 134 00:09:49,830 --> 00:09:58,440 So there is work left to do, but the basic draw functionality was added and as you see, again, with 135 00:09:58,440 --> 00:09:59,490 very little effort. 136 00:09:59,820 --> 00:10:03,570 So let's now take care about styling the draw and that filters screen.