Now you know how we can go to the detail page of course,
it's something we did before when we went from the categories page to the category meals page. So we
can use the same approach here
and of course feel free to pause the video at this point and do that on your own,
that's absolutely something you can do here as a practice. Let's of course also do it together though.
So in the category meals screen, when we select a meal, onSelectMeal, this function here should trigger because
we're passing in this function through onSelectMeal to the meal item and there, we're binding it to on
press, on the touchable opacity here,
so that should fire on select meal and therefore in category meals screen, in this function here, we can
navigate. Now since I defined this render meal function where I render my meal item inside of my component,
I have access to props and there, since the category meal screen is our component we load with the help
of navigation, I can access the navigation property and the navigate method and you learned that there,
we can now pass in the route name where we want to go to and that would be meal detail,
so the route name we set up in the meals navigator, this name here, this will load the meal detail page.
Now we'll need to forward some data there and the data which I want to forward here of course is the
ID of the selected meal, so that we can then load the details of that meal on that meal detail page
to render them there.
So in the category meals screen here, we can set up params here on our navigate object, on the
object we pass to navigate and params takes an object of key-value pairs as you learned, that's something
we did before and here, I want to forward my meal.id which I of course can get from an item data because
itemData.item is a meal and every meal as you can see in the model has an ID, we're storing this here.
Hence here of course we can say itemData.item.id, that's what I want to forward and with that,
we should go to the meal detail page and there, we'll also be able to extract the ID of the meal we
loaded.
So on the MealDetailScreen, let's just see whether that works, the meal.id is props.navigation.getParam
and now the name was meal.id, that's the param name I chose here for storing the param, if
you chose a different name here, you need to choose a different name here or use the same name there
of course and now we can select the meal, for that let's import all meals from the dummy data file in
the data folder, like this and now the selected meal here of course is meals find and then we run this
function on every meal there and it's the meal where the meal.id matches the meal.id we extracted
up there, that's our selected meal. To prove that this works, we can output it there, selectedMeal.title
and of course I also want to set the title in the header and that's also something you learned.
You can do this by adding navigation options to this screen here, navigation options and you learned
that if you want to retrieve something dynamic, you do this with the help of this special function here.
Navigation data is what you get there, this function is called for you by React navigation as you learned
and now in there, we have to return our navigation object, our navigation options object but before we
return this, we can use data we get from navigation data, like our navigation prop which in turn allows
us to get access to a param, so we can use navigationData.navigation.getParam to get our meal.id
here as well and also retrieve our meal just as we're doing it up there in the component,
do the same down there for the navigation options and with the meal selected, we can of course here set
a header title to selectedMeal.title and that's something we did before,
this is how we can extract data here in our navigation options and use that dynamic data there
for example to set the header title.
With this out of the way, let's see whether it works,
maybe on Android. Let's go to light and lovely, there we have all our recipes, let's go to to salad here
and here it is, here's our title, we also see it here so this is all loaded,
if we go to the salmon, we instead see that.
So this is all working as it should,
very nice to see,
now it's time to take the next step because for example, we want to be able to mark a meal as a favorite and
for this, I want to have a star icon here in the navigation which I can press.
That's something we're missing yet and we haven't learned about yet,
so it's a nice next step.