1 00:00:02,130 --> 00:00:08,640 I want to get started with the most basic form of navigation and also the most common form of navigation 2 00:00:08,640 --> 00:00:13,470 you have in any mobile app, and that's how to go back and forth between screens. 3 00:00:13,890 --> 00:00:20,010 And for this will set up a so-called stack and navigator because pages or screens, I'll use these words 4 00:00:20,010 --> 00:00:20,940 as synonyms here. 5 00:00:21,570 --> 00:00:25,740 So pages and screens are basically managed on a stack of pages. 6 00:00:26,160 --> 00:00:30,540 And whenever you go to a new screen, it will be pushed on top of that stack. 7 00:00:30,540 --> 00:00:34,320 And the topmost screen on a stack is always the screen, which is visible. 8 00:00:34,590 --> 00:00:39,600 And when you then click the back button popped off this screen, you were honest, popped off. 9 00:00:39,750 --> 00:00:45,420 And since you always see on the app the topmost screen, you will see the screen below that, which 10 00:00:45,420 --> 00:00:46,730 is the screen you came from. 11 00:00:46,890 --> 00:00:48,910 That's why it's called Stack Navigator. 12 00:00:49,290 --> 00:00:50,420 Now, that's the theory. 13 00:00:50,430 --> 00:00:52,650 Let's simply use it and it will become very clear. 14 00:00:53,340 --> 00:01:01,260 We import it from react navigation and its name or the name of the function we actually need to create 15 00:01:01,260 --> 00:01:02,010 such a stack. 16 00:01:02,010 --> 00:01:05,010 Navigator is create Stack Navigator. 17 00:01:05,490 --> 00:01:07,020 Now, one important note. 18 00:01:07,170 --> 00:01:08,790 This syntax is correct. 19 00:01:08,790 --> 00:01:14,400 If you're using react navigation version three, if you're using reac navigation to audition for it 20 00:01:14,400 --> 00:01:19,650 changed slightly, then you need to install an extra package like mentioned on a lecture earlier. 21 00:01:20,640 --> 00:01:28,950 You need to run and install dash to save, react, dash navigation, dash steck and install this extra 22 00:01:28,950 --> 00:01:36,540 package and with it installed, you import create Stack Navigator from reactor's navigation dash stack 23 00:01:36,540 --> 00:01:38,310 instead of reac navigation. 24 00:01:38,730 --> 00:01:39,990 That's a minor adjustment. 25 00:01:39,990 --> 00:01:42,480 You then have to make for create Stack Navigator. 26 00:01:42,640 --> 00:01:49,140 And when we create our navigators, for example, the tabs or draw navigator later you will have respective 27 00:01:49,140 --> 00:01:52,710 packages you need to install, react navigation, dash taps and so on. 28 00:01:52,830 --> 00:01:56,880 Again, that is all covered in the lecture you find before dyslexia. 29 00:01:57,390 --> 00:02:03,150 Now here I did record this course with react navigation version free, which otherwise is exactly the 30 00:02:03,150 --> 00:02:03,510 same. 31 00:02:03,510 --> 00:02:08,250 It's only the import which differs and therefore I will import from react navigation here. 32 00:02:08,400 --> 00:02:14,210 But if you're following along on version four, it's react that navigation dash stack an extra package 33 00:02:14,220 --> 00:02:15,130 you need to install. 34 00:02:15,810 --> 00:02:16,710 So that's how I react. 35 00:02:16,710 --> 00:02:18,900 Navigation, this library works. 36 00:02:19,080 --> 00:02:26,520 You create so-called navigators, which are in the end just you could say objects actually react components 37 00:02:26,520 --> 00:02:32,700 as will turn out, which hold all the navigation configuration, which hold all the information, which 38 00:02:32,700 --> 00:02:37,680 different screens you have and which will do the heavy lifting of loading different screens and playing 39 00:02:37,680 --> 00:02:41,560 nice, smooth transitions for going from A to B for you. 40 00:02:42,240 --> 00:02:49,740 So we need to import create Stack Navigator and then we can simply call that now create Stack Navigator 41 00:02:49,740 --> 00:02:56,190 takes at least one argument and that is a JavaScript object where we configure the different screens. 42 00:02:56,190 --> 00:02:58,140 We want to be able to move between. 43 00:02:58,920 --> 00:03:05,160 Now, in this app, I want to start on the categories screen and if I tap on a category there, I want 44 00:03:05,160 --> 00:03:06,960 to go to the category meals screen. 45 00:03:07,380 --> 00:03:12,230 And if I then tap on a recipe there on a meal, I want to go to the meal detail screen. 46 00:03:12,840 --> 00:03:19,590 So we'll need these three screens in our Stack Navigator so that these are the free screens we can move 47 00:03:19,590 --> 00:03:25,230 between by using this stack pattern, by pushing new pages and popping them off. 48 00:03:25,690 --> 00:03:28,440 And why don't we need favourite's and filters? 49 00:03:28,650 --> 00:03:32,100 Because filters will later be added with the help of a draw. 50 00:03:32,130 --> 00:03:35,100 It will be an alternative to this stack here. 51 00:03:35,610 --> 00:03:38,940 And favourite's also is an alternative to this stack. 52 00:03:38,970 --> 00:03:42,360 We will be able to go there with TAPS later, but not right now. 53 00:03:42,900 --> 00:03:49,020 So let's start with this basic stack based navigation where we can go forth and back between categories 54 00:03:49,020 --> 00:03:52,080 screen category, meals, screen and you'll detail screen. 55 00:03:52,860 --> 00:03:59,520 We in the form react navigation about these three screens by registering them as key value pairs. 56 00:04:00,550 --> 00:04:06,340 You take any identifier, any name of your choice, for example, categories, but this name is up to 57 00:04:06,340 --> 00:04:11,850 you as a property name convention is to start with the capital character here, by the way. 58 00:04:12,280 --> 00:04:14,140 But you don't have to do that technically. 59 00:04:14,620 --> 00:04:20,710 So you use any identifier you want as a property name in this object you're passing to create Stack 60 00:04:20,710 --> 00:04:21,460 Navigator. 61 00:04:22,000 --> 00:04:29,170 And now the value in its simplest form simply is a pointer at direct component. 62 00:04:29,320 --> 00:04:33,770 You want to load as a screen for this screen. 63 00:04:34,630 --> 00:04:36,190 So in my case, that would be the category. 64 00:04:36,340 --> 00:04:40,900 Screens all import this, all import categories. 65 00:04:42,240 --> 00:04:50,610 Screen from screens, category screen, I can import this because there this is my default export. 66 00:04:51,900 --> 00:04:59,430 So now we map this two categories, and this allows us to later tell react navigation does library we're 67 00:04:59,430 --> 00:05:01,820 using that it should load the categories screen. 68 00:05:02,880 --> 00:05:04,870 Now, as I said, this is not the only screen I need. 69 00:05:05,160 --> 00:05:08,370 I also want to have the category meals. 70 00:05:08,640 --> 00:05:11,070 So these are desistance, a second screen. 71 00:05:11,070 --> 00:05:17,520 This screen will present all the meals for the chosen Category four that we have another component and 72 00:05:17,520 --> 00:05:24,240 that's the category meals screen we prepared, which we import from screens category meals screen. 73 00:05:24,660 --> 00:05:25,950 So we map this year. 74 00:05:27,060 --> 00:05:32,120 Now, by the way, I mentioned that this is the simplest form of mapping, simply having the property 75 00:05:32,130 --> 00:05:34,720 name and then a pointer at the component you want to load. 76 00:05:35,250 --> 00:05:42,060 You also can pass the object here instead and set the screen property on this object and then point 77 00:05:42,060 --> 00:05:44,070 on the at component you want to load. 78 00:05:44,400 --> 00:05:45,720 Now, why would you do that? 79 00:05:46,080 --> 00:05:52,290 Because now you can also set up additional configuration here besides the screen, you could set up 80 00:05:52,290 --> 00:05:54,480 some default options for the screen and so on. 81 00:05:54,690 --> 00:05:57,230 But this is not something we have to worry about right now. 82 00:05:57,720 --> 00:06:00,350 Will actually take care about this later in this module. 83 00:06:00,360 --> 00:06:02,310 Just already want to mention that. 84 00:06:02,310 --> 00:06:03,390 Does this the shortcut? 85 00:06:03,480 --> 00:06:08,920 Does this the longer form of telling navigation, which screen should be loaded for which identifier? 86 00:06:09,900 --> 00:06:14,460 Speaking of that, we need a third identifier, of course, and that's the identifier that should load 87 00:06:14,460 --> 00:06:15,570 our detailed screen. 88 00:06:15,780 --> 00:06:22,590 I'll name it Meehl detail, and I want to point at my meal detailed screen so I'll import more detail 89 00:06:22,920 --> 00:06:24,120 screen from. 90 00:06:25,670 --> 00:06:31,430 And now let's go to the screen folder and there it's the detail screen and again, I'll use the shortcut 91 00:06:31,430 --> 00:06:31,730 here. 92 00:06:31,730 --> 00:06:35,810 We could use that longer form, but I'll use that shortcut and point at the detailed screen. 93 00:06:36,680 --> 00:06:42,350 So with that basic configuration, we're telling react navigation, hey, these are the screens will 94 00:06:42,350 --> 00:06:45,280 be able to move between right now. 95 00:06:45,290 --> 00:06:48,020 However, that alone won't do much. 96 00:06:48,970 --> 00:06:54,520 Why, because we're creating that Stack Navigator, but we're not doing anything with it. 97 00:06:56,490 --> 00:07:02,790 So let's change this create Stack Navigator actually returns a navigation container, and that turns 98 00:07:02,790 --> 00:07:08,460 out to be a react component that's all named as Meals Navigator, sounds like a fitting name because 99 00:07:08,460 --> 00:07:09,890 that's what we have in the end here. 100 00:07:10,500 --> 00:07:16,080 And now we're storing the component created by the Stack Navigator, which is basically a react component 101 00:07:16,080 --> 00:07:21,000 with all the heavy lifting of loading different screens and playing animations. 102 00:07:21,720 --> 00:07:24,280 Dishrag component is stored in meals navigator. 103 00:07:25,140 --> 00:07:28,350 Now we could export the meals navigator here. 104 00:07:29,410 --> 00:07:35,320 And try using it like this in Abcess to render it onto the screen and see what happens, but actually 105 00:07:36,190 --> 00:07:38,060 react, navigation works a bit differently. 106 00:07:38,410 --> 00:07:41,080 You also need to create an app container. 107 00:07:42,320 --> 00:07:48,410 In app container, you need to wrap your route, so your main navigator in this case, we only have 108 00:07:48,410 --> 00:07:50,280 one, we only have to stack navigator. 109 00:07:50,490 --> 00:07:51,770 Let's wrap this with it. 110 00:07:51,920 --> 00:07:58,070 Let's wrap the meals navigator we created by calling create app container and then simply pass the meals 111 00:07:58,070 --> 00:08:00,050 navigator as an argument. 112 00:08:00,360 --> 00:08:05,560 Create app container also creates a navigation container so all gives you a react component. 113 00:08:05,750 --> 00:08:12,170 But this is now actually the react component you should use in your JSA code, because this now has 114 00:08:12,170 --> 00:08:17,890 all the metadata about the navigation in general, about react navigation and so on. 115 00:08:17,900 --> 00:08:24,680 So this is simply a pattern you need wrap your route, your most important navigator with that and use 116 00:08:24,680 --> 00:08:29,000 this return react component in your jazz code then does basically to set up. 117 00:08:29,000 --> 00:08:34,460 You'll always have when working with reac navigation later, you will also learn how to use multiple 118 00:08:34,460 --> 00:08:35,120 navigators. 119 00:08:35,120 --> 00:08:40,910 And one app, by the way, for now we have this one and we export this component, which just the end 120 00:08:40,910 --> 00:08:41,440 creates. 121 00:08:41,840 --> 00:08:44,640 So now in abcess we can start using this component. 122 00:08:44,660 --> 00:08:46,520 So did we see something on the screen? 123 00:08:47,420 --> 00:08:50,150 For that, let's go there and import. 124 00:08:51,250 --> 00:08:54,190 The Meals Navigator from. 125 00:08:55,730 --> 00:08:57,920 Navigation Meals Navigator. 126 00:08:58,580 --> 00:09:02,120 Now, as I mentioned, Meals Navigator is now just a Riak component. 127 00:09:02,130 --> 00:09:07,610 So in the end, what we can do is we can simply return us instead of returning our view with our text 128 00:09:07,610 --> 00:09:07,920 here. 129 00:09:08,300 --> 00:09:10,550 I will return meals navigator. 130 00:09:10,670 --> 00:09:17,090 And since it's a react component, I can simply write some code like this with Dad if we save this. 131 00:09:18,070 --> 00:09:20,860 We have a look at our application as it reloads. 132 00:09:24,250 --> 00:09:30,460 And you might need to manually reload your app, you should see the categories screen once it reloaded 133 00:09:30,940 --> 00:09:34,930 and there's, of course, is huge because this means that this works. 134 00:09:35,350 --> 00:09:40,840 Now, please also note that you all, by default, get a nice header which has the default platform. 135 00:09:40,840 --> 00:09:42,190 Look for iOS. 136 00:09:42,190 --> 00:09:45,490 It's clean, flat, has this thin line below it. 137 00:09:45,670 --> 00:09:50,590 For Android, it's more three dimensional because it also has a slight drop shadow. 138 00:09:50,710 --> 00:09:55,090 Now, of course, it's missing a title and you will learn how we can add one in this module, but we 139 00:09:55,090 --> 00:10:01,030 get this out of the box and this automatically also respects any notches you might have to status bar 140 00:10:01,030 --> 00:10:01,780 you have here. 141 00:10:01,900 --> 00:10:04,870 So it automatically uses such a safe area view. 142 00:10:05,140 --> 00:10:07,960 And that's all to what I mentioned in the last course module. 143 00:10:08,290 --> 00:10:13,150 Whilst you have this component and you sometimes need it, for example, in building an app with react 144 00:10:13,150 --> 00:10:18,700 navigation, react navigation already wraps your views into a safe area view. 145 00:10:18,820 --> 00:10:21,610 At least it will do a lot of the work you would have to do. 146 00:10:21,610 --> 00:10:24,430 Otherwise it will make sure that your header looks good. 147 00:10:24,430 --> 00:10:29,920 And that is a big thing because manually creating a header that looks good on all devices is actually 148 00:10:29,920 --> 00:10:31,000 quite some work. 149 00:10:31,780 --> 00:10:32,990 So that's what we get here. 150 00:10:33,160 --> 00:10:36,550 The obvious question now is how can we reach our other screens?