1 00:00:02,400 --> 00:00:06,680 Now with the tabs added, we're missing content in the favorite screen. 2 00:00:06,740 --> 00:00:12,960 Now we don't really have functionality to add favorites yet, if we click that star icon, that doesn't 3 00:00:12,960 --> 00:00:13,640 do anything 4 00:00:13,650 --> 00:00:16,370 and by the way, I'm aware that we're missing content here as well, 5 00:00:16,380 --> 00:00:17,680 we'll add this later. 6 00:00:17,880 --> 00:00:22,140 So clicking the star icon doesn't do anything yet and we'll only be able to make that do something a 7 00:00:22,140 --> 00:00:23,370 bit later, 8 00:00:23,490 --> 00:00:29,040 still I want to populate this favorite screen a little bit more at least with some dummy meals we're 9 00:00:29,040 --> 00:00:30,340 loading there let's say 10 00:00:30,480 --> 00:00:35,640 and at least with the functionality to also go to the MealDetailScreen there because in the end, 11 00:00:35,640 --> 00:00:39,080 the idea here is that we have a list of meals here, just as we have it here 12 00:00:39,090 --> 00:00:44,460 after we selected a category and that we can tap on a meal to go to the details page, just as we can do 13 00:00:44,460 --> 00:00:45,620 it in the meals navigator, 14 00:00:45,660 --> 00:00:50,940 so in the meals stack navigator I should say and therefore in the end, what we need for favorites, for 15 00:00:50,940 --> 00:00:58,620 our favorites tab is not a single screen but another stack, a stack for our favorites feature in this 16 00:00:58,620 --> 00:00:59,330 application, 17 00:00:59,340 --> 00:01:02,750 that's what we need here, 18 00:01:02,760 --> 00:01:06,960 this will then by the way also give us a header which we're currently also missing. 19 00:01:07,470 --> 00:01:10,020 Of course, that's not too hard to implement, 20 00:01:10,110 --> 00:01:18,500 we can simply create another stack navigator above our tabScreenConfig maybe and this will set 21 00:01:18,500 --> 00:01:21,390 up the stack navigator for our favorites stack. 22 00:01:21,530 --> 00:01:26,630 So the object we pass here has to define all the screens we want to have in that stack 23 00:01:26,630 --> 00:01:30,830 and that would be the favorites screen itself with the list of our favorite meals 24 00:01:30,830 --> 00:01:36,470 and there I want to point at favorites screen and then I want to have a meal detail and I'll point at 25 00:01:36,710 --> 00:01:42,710 MealDetailScreen and we're already using the MealDetailScreen here in our meals navigator, in 26 00:01:42,710 --> 00:01:44,000 our other stack navigator 27 00:01:44,030 --> 00:01:45,230 but that's totally fine, 28 00:01:45,230 --> 00:01:49,030 you can use one and the same screen in different stack navigators, 29 00:01:49,040 --> 00:01:51,540 there's nothing wrong with that. 30 00:01:51,710 --> 00:01:58,340 So we can use MealDetailScreen here in the favorites stack navigator as well and now I just want 31 00:01:58,340 --> 00:02:03,550 to make sure that I also copy my options here, my default navigation options, 32 00:02:03,560 --> 00:02:09,170 this second argument actually for create stack navigator, for the meals navigator to my favorites stack 33 00:02:09,170 --> 00:02:10,070 navigator as well. 34 00:02:10,070 --> 00:02:15,680 So here as a second argument to create stack navigator, I copy in that object where I set up my default 35 00:02:15,680 --> 00:02:22,430 navigation options so that for this stack, I have the same defaults, I have the same header style and therefore 36 00:02:22,430 --> 00:02:29,330 of course, we can also cut this from here and remove this from here and store that default setting 37 00:02:29,330 --> 00:02:39,100 in a constant here, maybe our defaultStackNavOptions, that's this object which sets up the header style 38 00:02:39,330 --> 00:02:45,670 and we can then use the defaultStackNavOptions here in our meals navigator stack 39 00:02:45,840 --> 00:02:52,800 and also here in our favorites stack navigator and I'll also store this in the FavNavigator constant, of 40 00:02:52,800 --> 00:02:55,330 course you can name this constant whatever you want. 41 00:02:55,410 --> 00:02:57,230 Now it's that FavNavigator, 42 00:02:57,270 --> 00:03:03,890 so that created stack navigator component in the end which I want to use in my tabScreenConfig, there 43 00:03:03,920 --> 00:03:09,420 for meals we were already using stack navigator, for favorites I was using the favorite screen and 44 00:03:09,420 --> 00:03:10,720 this now has to change, 45 00:03:10,720 --> 00:03:16,620 this now should be the FavNavigator, so that here we also use a stack instead of a single screen. 46 00:03:16,680 --> 00:03:23,220 And with that already, if we go to favorites, we have our title here, at least we have a header which already 47 00:03:23,220 --> 00:03:27,000 proves that we're using a stack navigator here. 48 00:03:27,080 --> 00:03:31,870 Now of course, a screen is not really that useful, not something I want to say here, 49 00:03:31,920 --> 00:03:37,500 so I want to set specific navigation options for the favorite screen and we can either use that here 50 00:03:37,560 --> 00:03:43,290 when we create the favorites stack navigator with the longer form where we set up screen and the navigation 51 00:03:43,290 --> 00:03:47,340 options for that screen here or we do it directly in our component, 52 00:03:47,370 --> 00:03:48,570 that's what I did thus far, 53 00:03:48,600 --> 00:03:50,330 that's what I'll do here as well. 54 00:03:50,340 --> 00:03:55,560 There we can set up FavoritesScreen.navigationOptions like this, 55 00:03:55,740 --> 00:03:57,610 use the object here, 56 00:03:57,630 --> 00:04:03,900 we don't need the function because I'll not derive the name dynamically here and in the navigation options 57 00:04:03,900 --> 00:04:11,700 here, I simply will set the header title to your favorites and of course, you can pick any text you want 58 00:04:11,700 --> 00:04:12,210 here 59 00:04:12,330 --> 00:04:17,880 and if we now save that, now we see our custom title here which is a bit better. 60 00:04:17,880 --> 00:04:24,090 Now as I said, we don't really have the tools yet to store meals as favorites, 61 00:04:24,090 --> 00:04:26,410 that's something we'll do in a while. 62 00:04:26,430 --> 00:04:29,160 So for now, I just want to display some dummy meals here, 63 00:04:29,160 --> 00:04:36,000 let's say the meals with the ID M1 and M2, simply two dummy meals 64 00:04:36,000 --> 00:04:41,670 and for that, we can go to the favorite screen and instead of displaying this view here, in the end I 65 00:04:41,670 --> 00:04:45,000 want to display the same as in the category meals screen, right, 66 00:04:45,000 --> 00:04:51,480 I want to render a FlatList which then renders my meal items here. 67 00:04:51,480 --> 00:04:53,620 The only difference is which meals I render, 68 00:04:53,640 --> 00:04:58,300 that logic will not be the same because that's different for my favorite screen. 69 00:04:58,320 --> 00:05:03,480 This however will be the same and since I will reuse that list creation logic and the only thing that 70 00:05:03,480 --> 00:05:09,570 differs is the data which I render, it would make sense to outsource this list into a separate component, 71 00:05:09,750 --> 00:05:15,140 so that we can reuse the component in the category meals screen and in the favorites screen. 72 00:05:15,180 --> 00:05:20,970 So in the components folder, I'll add a MealList.js file and in there, I want to have a React component, 73 00:05:21,000 --> 00:05:30,210 so import React from React and we'll also need to import FlatList from react-native and we'll also need 74 00:05:30,210 --> 00:05:34,470 to import stylesheet from react-native of course 75 00:05:34,470 --> 00:05:42,500 and then here, we can create our meal list component where we get props and we export that as a default 76 00:05:42,500 --> 00:05:43,180 thereafter, 77 00:05:43,190 --> 00:05:49,940 we'll also need some styles so we can already add stylesheet create here like this and now I want 78 00:05:49,940 --> 00:05:56,690 to move over my list logic from category meal screen into this new component. So I'll cut this entire 79 00:05:56,930 --> 00:06:04,640 jsx code which I return here in category meal screen and move that here and return it 80 00:06:04,910 --> 00:06:06,380 in the meal list component. 81 00:06:06,380 --> 00:06:08,720 So now here, I will return that view and 82 00:06:08,720 --> 00:06:16,000 therefore we also need to import the view here of course. That also means we have to bring over the look, 83 00:06:16,000 --> 00:06:21,340 so here this screen style can also be cut from category meals and therefore here, we don't need a stylesheet 84 00:06:21,340 --> 00:06:22,370 anymore, 85 00:06:22,480 --> 00:06:24,700 we can get rid of the stylesheet import as well, 86 00:06:24,700 --> 00:06:29,650 we can actually get rid of all React Native imports because we have no React Native specific component 87 00:06:29,680 --> 00:06:37,000 in here anymore and instead move that to meal list. So there in stylesheet, I can add this screen which 88 00:06:37,000 --> 00:06:42,540 I just removed and a more fitting name therefore probably is lists, so I'll rename this, 89 00:06:42,610 --> 00:06:47,590 technically you don't have to rename it but it makes sense because this is now not a screen component 90 00:06:47,590 --> 00:06:52,570 anymore, it's just rendering a list which then happens to be the only part on our screen but that's a 91 00:06:52,570 --> 00:06:56,590 different story. So I'll just name this list, have my FlatList in there. 92 00:06:57,960 --> 00:07:02,240 Now of course, displayed meals which I want to render, that won't work anymore, 93 00:07:02,240 --> 00:07:09,170 instead I simply expect to get some data from my props here, maybe name it list data, you can choose any 94 00:07:09,170 --> 00:07:15,380 name you want here of course and render meal item, that's also missing. For that in the category meals, 95 00:07:16,190 --> 00:07:17,030 we can 96 00:07:17,040 --> 00:07:20,570 cuts this render meal item constant here, 97 00:07:20,570 --> 00:07:25,250 cut it from the category meals screen and move that into our meal list as well. 98 00:07:25,250 --> 00:07:27,240 So there in the meal list component, 99 00:07:27,290 --> 00:07:33,890 I'll add this constant which holds this render meal item function which has everything it needs to work 100 00:07:34,160 --> 00:07:37,650 except for one thing, the meal item import is missing, 101 00:07:37,760 --> 00:07:49,160 so we need to import meal item from ./MealItem, so from the meal item component. One other thing 102 00:07:49,160 --> 00:07:51,470 will be missing here in the meal list component as well 103 00:07:51,470 --> 00:07:56,300 and that will be the navigation prop because as I mentioned, the navigation prop is only available in 104 00:07:56,300 --> 00:08:02,390 components that are loaded with the help of a navigator by React navigation and only in that component, 105 00:08:02,420 --> 00:08:04,100 not in nested components. 106 00:08:04,100 --> 00:08:09,620 So the thing is category meals is the component we're loading with the help of the navigator 107 00:08:09,620 --> 00:08:12,630 and if we then use the meal list in there which we'll do in a second, 108 00:08:12,690 --> 00:08:18,920 the meal list will not have access to props navigation, only the directly loaded component has access 109 00:08:19,400 --> 00:08:21,790 but that will be an issue that's easy to solve. 110 00:08:21,890 --> 00:08:30,530 First of all however, let's import meal list here from the meal list component and let's return meal 111 00:08:30,650 --> 00:08:38,690 list here in the category meals component and now meal list of course needs that list data prop which 112 00:08:38,690 --> 00:08:39,920 we're working with, 113 00:08:39,920 --> 00:08:46,900 so let's pass in list data and that should simply point at the array we want to render which in this 114 00:08:46,900 --> 00:08:48,130 case is displayed 115 00:08:48,140 --> 00:08:53,110 meals and now as I mentioned, we'll have a problem with the navigation prop, 116 00:08:53,260 --> 00:09:00,760 well we can just forward it though, we can use navigation, add such a prop here to meal list and forward 117 00:09:00,790 --> 00:09:01,960 props navigation, 118 00:09:01,960 --> 00:09:06,170 that is how easy we can forward this to the meal list. 119 00:09:06,200 --> 00:09:11,660 So now in the meal list, in that component, we'll have a navigation prop again because we are forwarding 120 00:09:11,660 --> 00:09:16,940 it, we're adding our own navigation prop and we're pointing at the data we get on the navigation prop 121 00:09:16,940 --> 00:09:18,810 provided by React navigation, 122 00:09:18,890 --> 00:09:20,480 that's how we have access to it again 123 00:09:20,540 --> 00:09:26,850 here and with that, we should have a setup that works, 124 00:09:27,240 --> 00:09:33,570 so that should be our category meals screen. Let's save it and let's ignore the favorite screen for the 125 00:09:33,570 --> 00:09:40,110 moment and just see that our stack navigator here still works and it seems to do that, 126 00:09:40,160 --> 00:09:48,820 if I test that, that definitely still works here as it was before. Now let's make sure we also use this 127 00:09:48,820 --> 00:09:50,620 in the favorite screen. 128 00:09:50,620 --> 00:09:55,320 So here on the favorite screen, we don't need to import anything from React Native, 129 00:09:55,330 --> 00:10:01,270 instead we just need to import the meal list component we just created from components and then meal 130 00:10:01,600 --> 00:10:06,670 list and simply return meal list 131 00:10:06,730 --> 00:10:11,500 and now the difference to the category meal screen where we also return meal list is of course the data 132 00:10:11,510 --> 00:10:12,150 we want to render, 133 00:10:12,190 --> 00:10:14,410 the logic for deriving that data, 134 00:10:14,410 --> 00:10:15,880 that's the difference 135 00:10:15,880 --> 00:10:20,250 and another difference between the components is of course our navigation option setup and the header title 136 00:10:20,260 --> 00:10:21,450 we're setting. 137 00:10:22,030 --> 00:10:26,680 We can get rid of the stylesheet here, we don't need that anymore here in the favorite screen and now 138 00:10:26,680 --> 00:10:27,820 the data I want to render, 139 00:10:27,970 --> 00:10:30,010 that depends on my meals, 140 00:10:30,100 --> 00:10:31,960 so I'll import meals 141 00:10:34,440 --> 00:10:42,060 from, now from the dummy-data.js file and as I mentioned, here since we have no real way of setting 142 00:10:42,080 --> 00:10:47,120 favorites, I'll just use some dummy favorites which I come up with. 143 00:10:47,160 --> 00:10:55,710 So here, my favorite meals, that could be my meals array and there I want to filter for two specific meals, 144 00:10:55,860 --> 00:10:57,500 so I'll have a look at every single meal 145 00:10:57,540 --> 00:11:05,510 but I only return true if meal.id is equal to M1 or if meal.id is equal to M2 146 00:11:05,520 --> 00:11:09,480 and that's of course just some dummy logic so that we have something here, 147 00:11:09,600 --> 00:11:15,330 we'll replace this later once we really know how to manage our state and how to manage the currently 148 00:11:15,330 --> 00:11:17,580 set favorites. 149 00:11:17,610 --> 00:11:23,730 Now to meal list, to our component here, we can forward the list data prop again which we need in there, 150 00:11:23,820 --> 00:11:36,840 so we can forward list data and set this equal to fav meals, just like that. 151 00:11:36,850 --> 00:11:38,980 So now we should have some favorites as well 152 00:11:39,010 --> 00:11:40,990 and we do, we got two favorites, 153 00:11:40,990 --> 00:11:47,440 however if I click on it, we get undefined is not an object where we try to call props navigation navigate 154 00:11:48,670 --> 00:11:54,520 and yes, the problem of course is that in the meal list, as I mentioned, we're using the navigation prop and 155 00:11:54,550 --> 00:11:59,560 that's only available in the component that is directly loaded through a navigator, 156 00:11:59,590 --> 00:12:05,440 so in this case that's the favorite screen and in category meals, we solve this by forwarding the navigation 157 00:12:05,440 --> 00:12:11,080 prop, of course we need to do the very same thing here for our favorite screen, 158 00:12:11,080 --> 00:12:17,170 so we need to provide that navigation prop here on meal list and forward props navigation so that that 159 00:12:17,170 --> 00:12:22,800 navigation prop with the navigate method is available in the meal list component as well. 160 00:12:22,870 --> 00:12:29,940 Now with that, if we go to favorites, we are indeed able to go to the detail screen. 161 00:12:30,130 --> 00:12:37,690 So this is working, that's pretty decent, pretty nice. As you see, these two stack navigators also work 162 00:12:37,720 --> 00:12:38,700 independent of each other, 163 00:12:38,700 --> 00:12:44,200 we can be on the detail screen in both stacks separately, here I'm on the detail screen of the salmon 164 00:12:44,470 --> 00:12:50,410 in the meals tab and I can go to the toast hawaii detail screen in the favorites tab. We can go back here 165 00:12:50,530 --> 00:12:54,840 in the meals tab and I'm still on the toast hawaii detail page here in the favorites stack. 166 00:12:54,940 --> 00:12:57,670 So these two stacks work separate from each other, 167 00:12:57,700 --> 00:13:00,350 totally independent and that's how it should be 168 00:13:00,610 --> 00:13:06,130 and this is how we can reuse some logic and how we can have different stacks merged into one and the 169 00:13:06,130 --> 00:13:07,760 same tab navigator 170 00:13:07,810 --> 00:13:11,900 and even though some logic is still missing, the logic to really add favorites, 171 00:13:11,950 --> 00:13:17,620 this is a huge step forward and hopefully shows you the power of React navigation and how to set up this 172 00:13:17,620 --> 00:13:24,490 common navigation pattern where you have tabs and then different nested stacks. One navigation pattern 173 00:13:24,490 --> 00:13:25,920 is missing which I want to show you 174 00:13:26,080 --> 00:13:27,210 and that's a side drawer.