1 00:00:02,240 --> 00:00:07,780 Repeating ourselves over and over again and setting the same difficult look over and over again is really 2 00:00:07,790 --> 00:00:09,970 annoying and definitely not what we want. 3 00:00:10,490 --> 00:00:17,060 Well, thus far we always worked with navigation options, which we set up right next to our components. 4 00:00:17,930 --> 00:00:23,510 Now, you don't need to do that for settings, default settings, which you repeat over and over again, 5 00:00:24,170 --> 00:00:29,960 let's actually remove this setting here from the category ML screen and only keep the Hattar title there, 6 00:00:29,960 --> 00:00:34,820 because the header title, of course, depends on this screen and changes with the different values 7 00:00:34,820 --> 00:00:35,600 we get in the screen. 8 00:00:36,290 --> 00:00:41,990 Let's see if we remove the platform import and the color is constant import at the same on categories 9 00:00:42,050 --> 00:00:43,370 screen there. 10 00:00:43,370 --> 00:00:48,560 I will cut this so that I can still use it, but I will also remove it therefore from this screen and 11 00:00:48,560 --> 00:00:54,140 only keep the header title here, which is specific to this screen and not the default for all screens. 12 00:00:54,350 --> 00:00:59,540 So I'll keep that here and I can therefore also get rid of the platform important the color constant 13 00:00:59,540 --> 00:01:00,470 import here as well. 14 00:01:00,650 --> 00:01:06,800 And now let's go to the Meals Navigator, because besides setting up navigation options right next to 15 00:01:06,800 --> 00:01:12,140 your components, which is the right place for any options that are specific to that component, you 16 00:01:12,140 --> 00:01:14,840 can also set up options here directly on your navigator. 17 00:01:14,990 --> 00:01:17,300 You got two different places where you can set them up. 18 00:01:18,110 --> 00:01:23,090 One place is when you're using this more complex screen configuration here. 19 00:01:23,090 --> 00:01:28,970 When you map a screen to your identifiers besides setting up the screen, what you want to load, which 20 00:01:28,970 --> 00:01:37,610 is the must have value you have here, you can also add navigation options here and set up some navigation 21 00:01:37,610 --> 00:01:39,160 options for this screen here. 22 00:01:39,500 --> 00:01:44,240 So there we could also add the header style, the header tint color, and now we just need to add the 23 00:01:44,240 --> 00:01:46,190 platform and the colors import here. 24 00:01:46,220 --> 00:01:47,450 So let's quickly do that. 25 00:01:47,990 --> 00:01:58,340 Let's import platform from react native here and let's also import Koller's from. 26 00:01:59,510 --> 00:02:01,430 Constance Koller's. 27 00:02:02,350 --> 00:02:08,200 And if we do that, what you'll see is that on the categories screen, we have no color because I only 28 00:02:08,210 --> 00:02:11,410 set this coloring here on the category, Milt. 29 00:02:12,570 --> 00:02:17,330 But if you go to that screen, therefore we have that coloring, so we have that same look we had before, 30 00:02:18,360 --> 00:02:21,710 and now, of course, we could do the same here for the categories screen. 31 00:02:22,170 --> 00:02:29,070 So there we can also now turn this into an object, hence add the navigation options and add the exact 32 00:02:29,070 --> 00:02:30,040 same options. 33 00:02:30,060 --> 00:02:34,140 So this same object here for this screen. 34 00:02:34,740 --> 00:02:38,570 Now, if we do that, we also have to color back on the categories screen. 35 00:02:39,390 --> 00:02:45,650 Now, the small advantage compared to the previous solution of setting this up in each component file. 36 00:02:46,020 --> 00:02:49,650 Instead, we now at least have all the configuration in one of the same file. 37 00:02:50,430 --> 00:02:52,230 Still, we're repeating ourselves. 38 00:02:52,500 --> 00:02:54,510 So it's nice that you can set this up here. 39 00:02:54,510 --> 00:03:00,790 And for example, this would be a good alternative to setting up our statically set header title for 40 00:03:00,790 --> 00:03:07,140 a category's screen meal categories so we could set this up here instead of in the component because 41 00:03:07,140 --> 00:03:08,430 it's static anyways. 42 00:03:08,430 --> 00:03:10,170 Doesn't really matter where we set this up. 43 00:03:10,920 --> 00:03:15,950 But besides, such a use case does isn't really an improvement because we still repeat ourselves. 44 00:03:16,560 --> 00:03:23,580 So all again, cut this from here and instead we can now take advantage of a second argument you can 45 00:03:23,580 --> 00:03:25,590 pass to create Stack Navigator. 46 00:03:25,860 --> 00:03:28,850 The first argument is the object with your screens. 47 00:03:29,400 --> 00:03:32,400 The second argument allows you to configure that navigator. 48 00:03:32,950 --> 00:03:38,880 We haven't set up any configuration dairy yet and of course in the official box or as I get it here 49 00:03:38,880 --> 00:03:43,220 by my idee, you find a list of all the settings you can set up there. 50 00:03:43,680 --> 00:03:48,390 One important thing you can configure here are the default navigation options. 51 00:03:48,510 --> 00:03:54,550 And as the name implies, this allows you to set up options that apply to every screen. 52 00:03:55,380 --> 00:04:04,290 Now, this takes object with your navigation options, but now these options will be applied to every 53 00:04:04,290 --> 00:04:06,110 screen in this navigator. 54 00:04:06,270 --> 00:04:09,960 So to all three screens here so that you don't have to repeat yourself. 55 00:04:10,710 --> 00:04:17,310 So now if you do that, you see that color header here, also here and also on the detailed screen if 56 00:04:17,310 --> 00:04:17,850 you go there. 57 00:04:18,930 --> 00:04:24,990 So now this is, of course, how you want to set up repeating configurations like the general style, 58 00:04:24,990 --> 00:04:27,810 which typically doesn't change from screen to screen. 59 00:04:27,820 --> 00:04:29,550 If it does change, that's fine. 60 00:04:29,710 --> 00:04:35,310 You can set it up on a per component basis or here in the screen config, as I showed you. 61 00:04:35,610 --> 00:04:39,180 But if it doesn't change, you can use default navigation options here. 62 00:04:40,140 --> 00:04:43,020 Now, of course, this also brings up another question. 63 00:04:43,410 --> 00:04:51,150 How are the settings set up here or here, merged with the settings here or inside of a component? 64 00:04:51,570 --> 00:04:52,800 And the rule is very simple. 65 00:04:52,800 --> 00:05:00,630 Their default navigation options get merged with your specific navigation options set up here or here 66 00:05:00,630 --> 00:05:01,530 in the component. 67 00:05:02,250 --> 00:05:07,540 And the specific options always win if you have one and the same key of the same name. 68 00:05:07,800 --> 00:05:14,850 So if I would set up a default header title here, like a screen, which is of course very generic, 69 00:05:15,480 --> 00:05:18,870 then you would still see middle categories here, Italian here. 70 00:05:18,870 --> 00:05:24,960 But on the detailed screen where I said no specific header title, you would see a screen. 71 00:05:25,710 --> 00:05:28,360 So your default navigation options are overridden. 72 00:05:28,800 --> 00:05:33,510 Now, if you set up navigation options here, when you configure the screen and instead of the component, 73 00:05:33,960 --> 00:05:39,150 they act on the same level and the settings here on the screen level actually win. 74 00:05:39,570 --> 00:05:46,470 So if I said header title two categories with multiple exclamation marks here you see that here on the 75 00:05:46,470 --> 00:05:52,350 categories screen and the title you set up in the categories screen component does not win. 76 00:05:52,710 --> 00:05:55,420 Might be a bit counterintuitive, but this is how it is. 77 00:05:55,800 --> 00:05:56,760 So if you set up. 78 00:05:58,450 --> 00:06:03,940 Navigational options with the same title or with the same names here in the screen config than the screen 79 00:06:03,940 --> 00:06:09,820 config wins, but no matter where you set it up, it always wins against default navigation options 80 00:06:09,820 --> 00:06:11,080 if you use the same title. 81 00:06:13,250 --> 00:06:17,420 So therefore, here, I'll also get rid of the navigation options on my category's screen, I don't 82 00:06:17,420 --> 00:06:18,110 need that here. 83 00:06:18,120 --> 00:06:22,720 I'm happy with setting this up, directing the screen component, but you could set it up in both places. 84 00:06:22,820 --> 00:06:26,810 It's important that you always remember that default options are overridden, though. 85 00:06:28,220 --> 00:06:33,590 Now, besides the default navigation options in this second object, which you pass to create a tech 86 00:06:33,620 --> 00:06:36,200 navigator, you can also configure other things. 87 00:06:36,200 --> 00:06:41,600 If you had control in space, you should see a list here or alternatively, consult the official docs. 88 00:06:41,600 --> 00:06:45,380 Of course, now, typically, the defaults are just fine. 89 00:06:45,860 --> 00:06:52,700 But there, for example, you can set up the mode and you could set this to model default as card. 90 00:06:53,030 --> 00:06:57,380 If you said this, you'll get a mode like transition for loading a new screen, which means the screen 91 00:06:57,380 --> 00:07:02,210 slides in from the bottom instead of using the normal animation on Android, you don't see a difference, 92 00:07:02,210 --> 00:07:03,280 but on iOS you will. 93 00:07:04,310 --> 00:07:10,070 That's just one thing you can change here to change the default animation in case you want a modal transition 94 00:07:10,070 --> 00:07:13,100 instead of the normal push pop animation here. 95 00:07:14,640 --> 00:07:19,470 You can also change the initial Routt name by default, I mentioned it would be the first key value 96 00:07:19,470 --> 00:07:24,450 pair, but if you don't want to start on the categories screen, but for some reason on the detailed 97 00:07:24,450 --> 00:07:29,520 screen, you could simply point at Mial detail here instead of categories which you don't need to set 98 00:07:29,520 --> 00:07:33,490 up because it's a default and you would start on that screen as your starting screen. 99 00:07:33,510 --> 00:07:38,100 Of course, you can't go back now because it's your initial screen, the only screen in the stack they 100 00:07:38,100 --> 00:07:38,490 offer. 101 00:07:38,520 --> 00:07:40,140 So going back won't work. 102 00:07:41,890 --> 00:07:46,720 Now, again, I'll reset those two categories, and you don't need to add this because this is sort 103 00:07:46,720 --> 00:07:47,950 of a default anyways. 104 00:07:47,980 --> 00:07:50,050 It uses the first key value pair by default. 105 00:07:51,530 --> 00:07:56,570 So with that, we had a brief look at some options you can configure and most importantly at navigation 106 00:07:56,570 --> 00:08:01,880 options and devilled navigation options, which is super important to build nice looking and efficient 107 00:08:01,880 --> 00:08:07,910 applications without repeating yourselves over and over again, which you, of course, don't want. 108 00:08:09,100 --> 00:08:15,190 Speaking of efficiency, there is one other thing you want to do when working with react navigation 109 00:08:15,190 --> 00:08:16,630 or you want to consider. 110 00:08:18,510 --> 00:08:26,250 And that is that you installed one extra package, which is react native screens, which in XPO apps 111 00:08:26,250 --> 00:08:32,790 should be included by default, but still it doesn't hurt to explicitly install it, which allows you 112 00:08:32,790 --> 00:08:36,420 to actually ensure that under the hood. 113 00:08:37,400 --> 00:08:46,610 React Navigation uses native optimised screen components provided by Android and iOS on Android, it 114 00:08:46,610 --> 00:08:52,000 uses defragment defragment in case you're into Android development a bit and on issues, it uses the 115 00:08:52,010 --> 00:08:58,340 UI view controller and that simply improves performance a little bit more here in this simple app. 116 00:08:58,340 --> 00:09:04,820 You won't feel it, but it's good practice to use this special package or these special screens. 117 00:09:05,510 --> 00:09:11,750 Now, to use that, you should go to a place that runs before you render your first screen, which is 118 00:09:11,750 --> 00:09:14,660 the app charges filed in our case here and there. 119 00:09:14,930 --> 00:09:21,500 You can now import use screens from react native screen. 120 00:09:21,510 --> 00:09:27,560 So from this package you just installed and simply called that after your imports, before you do anything 121 00:09:27,560 --> 00:09:27,740 else. 122 00:09:27,750 --> 00:09:29,900 So before you render any JASE'S code. 123 00:09:30,350 --> 00:09:36,440 Now important, if you're using the latest version of Expo and react native, which you most likely 124 00:09:36,440 --> 00:09:41,420 are, this is no longer use screens but an able screens. 125 00:09:41,750 --> 00:09:43,130 You still call it like this. 126 00:09:43,130 --> 00:09:46,160 It's just a different name and that's the only change we need to make here. 127 00:09:48,950 --> 00:09:54,740 Dismal assembly behind the scenes unlock D screens and you won't see a difference in this app, but 128 00:09:54,740 --> 00:09:56,210 it's a little bit more performant. 129 00:09:56,210 --> 00:10:00,650 So it is something I would recommend doing, especially in larger applications. 130 00:10:00,680 --> 00:10:06,290 Again, here, you don't really see a difference, but behind the scenes, does this now a bit more 131 00:10:06,320 --> 00:10:07,010 efficient?