1 00:00:02,100 --> 00:00:04,020 So we work with the Stack Navigator. 2 00:00:04,110 --> 00:00:05,480 Now, what about the draw? 3 00:00:06,060 --> 00:00:08,040 The logic is exactly the same. 4 00:00:08,880 --> 00:00:10,980 We create our shop. 5 00:00:12,510 --> 00:00:19,090 Draw navigator here, but calling creates draw navigator, and just like the Stack Navigator, this 6 00:00:19,110 --> 00:00:21,030 function wants no argument. 7 00:00:21,360 --> 00:00:25,530 Instead will set up or draw navigation in a component based approach. 8 00:00:26,190 --> 00:00:31,140 For that, I'll create a shop navigator here and this will be a react component. 9 00:00:31,410 --> 00:00:33,650 Again, you could have that in a separate file. 10 00:00:33,780 --> 00:00:38,640 I'll keep it all one file to have it side by side with the old code and in their. 11 00:00:39,690 --> 00:00:45,390 We return shop drawer navigator, dot navigator, same logic as before. 12 00:00:45,420 --> 00:00:47,370 It doesn't matter that it's a drawer. 13 00:00:48,120 --> 00:00:52,920 And in there we now have two different screens which can be loaded through the navigator and react. 14 00:00:52,920 --> 00:00:59,460 Navigation will automatically make sure that a navigator is created, that we can open it with the exact 15 00:00:59,460 --> 00:01:00,590 same code we use before. 16 00:01:00,590 --> 00:01:02,400 It will not have to adjust that. 17 00:01:03,330 --> 00:01:07,110 So here we now have our shop drawer navigator dot screen. 18 00:01:07,920 --> 00:01:14,130 And just before we give that screen a name here, we have two products, for example, and that name 19 00:01:14,130 --> 00:01:16,890 will then automatically be used inside of the drawer. 20 00:01:16,890 --> 00:01:20,220 Navigator, though you could also override all of that if you want to. 21 00:01:21,920 --> 00:01:27,500 And we need a component that is loaded when we click on that link in The Navigator and here that's still 22 00:01:27,500 --> 00:01:29,010 the product navigator. 23 00:01:29,270 --> 00:01:30,620 So just as before. 24 00:01:31,820 --> 00:01:38,540 We can use our STAC navigator's, even though they're now using this component based approach as components 25 00:01:38,720 --> 00:01:44,760 that should be created as part of another navigator, in this case, as part of the draw navigator. 26 00:01:44,870 --> 00:01:51,350 We can still point at our Stack Navigator's as components here because they are components this year. 27 00:01:51,380 --> 00:01:56,420 This is a component and the same is true for all our navigators we create here. 28 00:01:56,450 --> 00:02:02,150 They're all react components which hold their specific navigation logic as components. 29 00:02:02,980 --> 00:02:08,350 And the overall components, like the Products Navigator here, can be used in a draw navigator. 30 00:02:09,370 --> 00:02:18,550 So replicates this twice so that we can also add our orders here with the orders navigator and admin 31 00:02:18,550 --> 00:02:25,600 here with the admin navigator and make sure you have no errors in your names because we're using them 32 00:02:25,600 --> 00:02:28,680 all over the app and that logic won't need to be adjusted. 33 00:02:28,780 --> 00:02:32,190 So if you mess up the names here, other parts of the app will not work. 34 00:02:33,630 --> 00:02:39,160 OK, so now we got this draw navigator's set up and now what about the configuration? 35 00:02:39,660 --> 00:02:41,700 Now there are two things we need to consider. 36 00:02:42,060 --> 00:02:46,030 For one, we have to configuration here for the draw content. 37 00:02:46,440 --> 00:02:52,650 And second, we want to configure our different screens like the products navigator or the orders navigator 38 00:02:52,710 --> 00:02:54,870 to have their own icons in the drawer. 39 00:02:55,440 --> 00:02:56,790 Now, let's start with the icons. 40 00:02:57,120 --> 00:03:02,250 Previously, we set up that I can directly in the configuration of the Stack Navigator, which we wanted 41 00:03:02,250 --> 00:03:03,210 to use in a drawer. 42 00:03:04,230 --> 00:03:07,980 Now, with the component based approach, we don't do that anymore. 43 00:03:08,310 --> 00:03:12,060 Instead, we can just grab this part here. 44 00:03:14,480 --> 00:03:20,510 We're actually the entire object, which we previously set up on the Stack Navigator and go down to 45 00:03:20,510 --> 00:03:23,570 our drawer and now here on this screen to which it belongs. 46 00:03:23,810 --> 00:03:26,080 So in this case, it belongs to the admin navigator. 47 00:03:26,120 --> 00:03:34,140 So here on the admin screen, we again pass our options, just as we did a second ago on the Stack Navigator. 48 00:03:34,730 --> 00:03:38,120 So here we now pass to the options for this screen. 49 00:03:38,120 --> 00:03:44,870 And this could be a normal component or as it is in this case, a component with our stack navigation, 50 00:03:44,870 --> 00:03:46,880 logic and two options. 51 00:03:46,880 --> 00:03:50,850 We pass an object and there we can reuse that object we use before. 52 00:03:51,140 --> 00:03:56,060 So an object with a draw, I can key where we have our ionic buttons and so on. 53 00:03:56,070 --> 00:03:58,190 So this all works just as before. 54 00:03:59,340 --> 00:04:06,060 One small adjustment, however, we now get props here as well, fadin by reac navigation and these 55 00:04:06,060 --> 00:04:11,880 props will have a color key instead of draw a config active tint color. 56 00:04:12,060 --> 00:04:17,820 And the color will always be the right color because reac navigation behind the scenes will control 57 00:04:17,970 --> 00:04:20,280 whatever disaster currently active screen or not. 58 00:04:20,400 --> 00:04:26,430 And it will adjust the value stored in that color prop to be evenly highlighted, ordinal and highlighted 59 00:04:26,430 --> 00:04:26,800 color. 60 00:04:26,940 --> 00:04:29,190 So that's a tiny adjustment we have to make here. 61 00:04:30,340 --> 00:04:35,530 Well, and with that, we can copy the logic from the other navigator's as well, like from the order's 62 00:04:35,530 --> 00:04:42,100 navigator, let's grab this object here, which we had in its navigation options, go down to the draw, 63 00:04:42,250 --> 00:04:49,300 to the orders screen at the options, key passengers object and comments back in. 64 00:04:49,630 --> 00:04:55,480 And important, we now get props which will have that color key just like this. 65 00:04:56,630 --> 00:05:03,130 And last but not least, let's, of course, also do that for the products screen for the Products Navigator. 66 00:05:03,440 --> 00:05:04,900 Here we have this object. 67 00:05:04,910 --> 00:05:05,840 Let's grab it. 68 00:05:06,230 --> 00:05:09,200 Let's go down to our drawer navigator. 69 00:05:11,940 --> 00:05:16,230 And here's our products screen set up the options. 70 00:05:17,370 --> 00:05:22,960 Kiya passed it in and adjusted as I just showed it. 71 00:05:23,460 --> 00:05:28,350 So now we have our screen specific configuration here, you could say. 72 00:05:28,980 --> 00:05:31,320 Now, what about the draw overall? 73 00:05:31,800 --> 00:05:39,870 Because previously in the app, with the old REACT navigation version, we actually had our draw and 74 00:05:39,870 --> 00:05:45,830 we configure the act of 10 color and also the content of the draw. 75 00:05:46,590 --> 00:05:49,440 Well, you can still do that with that new approach. 76 00:05:50,310 --> 00:05:53,140 We go to our draw navigator. 77 00:05:53,190 --> 00:06:00,450 So where we set up the overall navigator and we configure it via props just before it's all about components 78 00:06:00,450 --> 00:06:01,050 and props. 79 00:06:01,980 --> 00:06:08,130 So here we now, however, have a different naming, we no longer have a content options and content 80 00:06:08,130 --> 00:06:15,960 component instead, and you can find dozens of little docs we now have draw content and draw content 81 00:06:15,960 --> 00:06:16,580 options. 82 00:06:17,100 --> 00:06:20,190 However, the values are exactly the same in the end. 83 00:06:20,640 --> 00:06:24,750 So we can grab our content options object here. 84 00:06:28,490 --> 00:06:32,420 And past is into draw content options here. 85 00:06:33,270 --> 00:06:34,530 And comment that in. 86 00:06:35,470 --> 00:06:42,760 And for the draw content, it's also almost the same, we just wrap this component here. 87 00:06:51,150 --> 00:06:53,940 Up to here, kopi, this. 88 00:06:57,150 --> 00:07:06,030 And pass this here into your content and comment this in, however, now two important things U.S. dispatch 89 00:07:06,030 --> 00:07:07,050 is not allowed here. 90 00:07:07,320 --> 00:07:09,310 You should do this outside of here. 91 00:07:09,420 --> 00:07:17,370 So, for example, here in the shop, Navigator Neednt is nested component and in addition. 92 00:07:18,740 --> 00:07:23,330 It's no longer draw items, but draw item list. 93 00:07:24,450 --> 00:07:26,010 Which we also need to import. 94 00:07:27,110 --> 00:07:27,950 At the top. 95 00:07:32,850 --> 00:07:35,460 From reactivations draw. 96 00:07:35,670 --> 00:07:37,860 So here we import draw item list. 97 00:07:40,520 --> 00:07:46,310 With that, however, if I scroll down, this should now be working again and this should now be our 98 00:07:46,310 --> 00:07:47,540 working drawer. 99 00:07:49,240 --> 00:07:56,260 So we got the shop navigator, we got all these stacked navigators, what's left now is that switch 100 00:07:56,260 --> 00:08:04,570 navigator, which basically renders ever our start up screen or the off screen or the shop screen or 101 00:08:04,570 --> 00:08:07,050 the respective navigation stacks, I should say. 102 00:08:07,690 --> 00:08:09,760 Well, that's what we'll work on next.