Now with the tabs added, we're missing content in the favorite screen.
Now we don't really have functionality to add favorites yet, if we click that star icon, that doesn't
do anything
and by the way, I'm aware that we're missing content here as well,
we'll add this later.
So clicking the star icon doesn't do anything yet and we'll only be able to make that do something a
bit later,
still I want to populate this favorite screen a little bit more at least with some dummy meals we're
loading there let's say
and at least with the functionality to also go to the MealDetailScreen there because in the end,
the idea here is that we have a list of meals here, just as we have it here
after we selected a category and that we can tap on a meal to go to the details page, just as we can do
it in the meals navigator,
so in the meals stack navigator I should say and therefore in the end, what we need for favorites, for
our favorites tab is not a single screen but another stack, a stack for our favorites feature in this
application,
that's what we need here,
this will then by the way also give us a header which we're currently also missing.
Of course, that's not too hard to implement,
we can simply create another stack navigator above our tabScreenConfig maybe and this will set
up the stack navigator for our favorites stack.
So the object we pass here has to define all the screens we want to have in that stack
and that would be the favorites screen itself with the list of our favorite meals
and there I want to point at favorites screen and then I want to have a meal detail and I'll point at
MealDetailScreen and we're already using the MealDetailScreen here in our meals navigator, in
our other stack navigator
but that's totally fine,
you can use one and the same screen in different stack navigators,
there's nothing wrong with that.
So we can use MealDetailScreen here in the favorites stack navigator as well and now I just want
to make sure that I also copy my options here, my default navigation options,
this second argument actually for create stack navigator, for the meals navigator to my favorites stack
navigator as well.
So here as a second argument to create stack navigator, I copy in that object where I set up my default
navigation options so that for this stack, I have the same defaults, I have the same header style and therefore
of course, we can also cut this from here and remove this from here and store that default setting
in a constant here, maybe our defaultStackNavOptions, that's this object which sets up the header style
and we can then use the defaultStackNavOptions here in our meals navigator stack
and also here in our favorites stack navigator and I'll also store this in the FavNavigator constant, of
course you can name this constant whatever you want.
Now it's that FavNavigator,
so that created stack navigator component in the end which I want to use in my tabScreenConfig, there
for meals we were already using stack navigator, for favorites I was using the favorite screen and
this now has to change,
this now should be the FavNavigator, so that here we also use a stack instead of a single screen.
And with that already, if we go to favorites, we have our title here, at least we have a header which already
proves that we're using a stack navigator here.
Now of course, a screen is not really that useful, not something I want to say here,
so I want to set specific navigation options for the favorite screen and we can either use that here
when we create the favorites stack navigator with the longer form where we set up screen and the navigation
options for that screen here or we do it directly in our component,
that's what I did thus far,
that's what I'll do here as well.
There we can set up FavoritesScreen.navigationOptions like this,
use the object here,
we don't need the function because I'll not derive the name dynamically here and in the navigation options
here, I simply will set the header title to your favorites and of course, you can pick any text you want
here
and if we now save that, now we see our custom title here which is a bit better.
Now as I said, we don't really have the tools yet to store meals as favorites,
that's something we'll do in a while.
So for now, I just want to display some dummy meals here,
let's say the meals with the ID M1 and M2, simply two dummy meals
and for that, we can go to the favorite screen and instead of displaying this view here, in the end I
want to display the same as in the category meals screen, right,
I want to render a FlatList which then renders my meal items here.
The only difference is which meals I render,
that logic will not be the same because that's different for my favorite screen.
This however will be the same and since I will reuse that list creation logic and the only thing that
differs is the data which I render, it would make sense to outsource this list into a separate component,
so that we can reuse the component in the category meals screen and in the favorites screen.
So in the components folder, I'll add a MealList.js file and in there, I want to have a React component,
so import React from React and we'll also need to import FlatList from react-native and we'll also need
to import stylesheet from react-native of course
and then here, we can create our meal list component where we get props and we export that as a default
thereafter,
we'll also need some styles so we can already add stylesheet create here like this and now I want
to move over my list logic from category meal screen into this new component. So I'll cut this entire
jsx code which I return here in category meal screen and move that here and return it
in the meal list component.
So now here, I will return that view and
therefore we also need to import the view here of course. That also means we have to bring over the look,
so here this screen style can also be cut from category meals and therefore here, we don't need a stylesheet
anymore,
we can get rid of the stylesheet import as well,
we can actually get rid of all React Native imports because we have no React Native specific component
in here anymore and instead move that to meal list. So there in stylesheet, I can add this screen which
I just removed and a more fitting name therefore probably is lists, so I'll rename this,
technically you don't have to rename it but it makes sense because this is now not a screen component
anymore, it's just rendering a list which then happens to be the only part on our screen but that's a
different story. So I'll just name this list, have my FlatList in there.
Now of course, displayed meals which I want to render, that won't work anymore,
instead I simply expect to get some data from my props here, maybe name it list data, you can choose any
name you want here of course and render meal item, that's also missing. For that in the category meals,
we can
cuts this render meal item constant here,
cut it from the category meals screen and move that into our meal list as well.
So there in the meal list component,
I'll add this constant which holds this render meal item function which has everything it needs to work
except for one thing, the meal item import is missing,
so we need to import meal item from ./MealItem, so from the meal item component. One other thing
will be missing here in the meal list component as well
and that will be the navigation prop because as I mentioned, the navigation prop is only available in
components that are loaded with the help of a navigator by React navigation and only in that component,
not in nested components.
So the thing is category meals is the component we're loading with the help of the navigator
and if we then use the meal list in there which we'll do in a second,
the meal list will not have access to props navigation, only the directly loaded component has access
but that will be an issue that's easy to solve.
First of all however, let's import meal list here from the meal list component and let's return meal
list here in the category meals component and now meal list of course needs that list data prop which
we're working with,
so let's pass in list data and that should simply point at the array we want to render which in this
case is displayed
meals and now as I mentioned, we'll have a problem with the navigation prop,
well we can just forward it though, we can use navigation, add such a prop here to meal list and forward
props navigation,
that is how easy we can forward this to the meal list.
So now in the meal list, in that component, we'll have a navigation prop again because we are forwarding
it, we're adding our own navigation prop and we're pointing at the data we get on the navigation prop
provided by React navigation,
that's how we have access to it again
here and with that, we should have a setup that works,
so that should be our category meals screen. Let's save it and let's ignore the favorite screen for the
moment and just see that our stack navigator here still works and it seems to do that,
if I test that, that definitely still works here as it was before. Now let's make sure we also use this
in the favorite screen.
So here on the favorite screen, we don't need to import anything from React Native,
instead we just need to import the meal list component we just created from components and then meal
list and simply return meal list
and now the difference to the category meal screen where we also return meal list is of course the data
we want to render,
the logic for deriving that data,
that's the difference
and another difference between the components is of course our navigation option setup and the header title
we're setting.
We can get rid of the stylesheet here, we don't need that anymore here in the favorite screen and now
the data I want to render,
that depends on my meals,
so I'll import meals
from, now from the dummy-data.js file and as I mentioned, here since we have no real way of setting
favorites, I'll just use some dummy favorites which I come up with.
So here, my favorite meals, that could be my meals array and there I want to filter for two specific meals,
so I'll have a look at every single meal
but I only return true if meal.id is equal to M1 or if meal.id is equal to M2
and that's of course just some dummy logic so that we have something here,
we'll replace this later once we really know how to manage our state and how to manage the currently
set favorites.
Now to meal list, to our component here, we can forward the list data prop again which we need in there,
so we can forward list data and set this equal to fav meals, just like that.
So now we should have some favorites as well
and we do, we got two favorites,
however if I click on it, we get undefined is not an object where we try to call props navigation navigate
and yes, the problem of course is that in the meal list, as I mentioned, we're using the navigation prop and
that's only available in the component that is directly loaded through a navigator,
so in this case that's the favorite screen and in category meals, we solve this by forwarding the navigation
prop, of course we need to do the very same thing here for our favorite screen,
so we need to provide that navigation prop here on meal list and forward props navigation so that that
navigation prop with the navigate method is available in the meal list component as well.
Now with that, if we go to favorites, we are indeed able to go to the detail screen.
So this is working, that's pretty decent, pretty nice. As you see, these two stack navigators also work
independent of each other,
we can be on the detail screen in both stacks separately, here I'm on the detail screen of the salmon
in the meals tab and I can go to the toast hawaii detail screen in the favorites tab. We can go back here
in the meals tab and I'm still on the toast hawaii detail page here in the favorites stack.
So these two stacks work separate from each other,
totally independent and that's how it should be
and this is how we can reuse some logic and how we can have different stacks merged into one and the
same tab navigator
and even though some logic is still missing, the logic to really add favorites,
this is a huge step forward and hopefully shows you the power of React navigation and how to set up this
common navigation pattern where you have tabs and then different nested stacks. One navigation pattern
is missing which I want to show you
and that's a side drawer.