1
00:00:02,710 --> 00:00:05,590
Now you know how we can go to the detail page of course,

2
00:00:05,620 --> 00:00:11,530
it's something we did before when we went from the categories page to the category meals page. So we

3
00:00:11,530 --> 00:00:12,880
can use the same approach here

4
00:00:12,910 --> 00:00:16,900
and of course feel free to pause the video at this point and do that on your own,

5
00:00:16,900 --> 00:00:24,540
that's absolutely something you can do here as a practice. Let's of course also do it together though.

6
00:00:24,630 --> 00:00:32,550
So in the category meals screen, when we select a meal, onSelectMeal, this function here should trigger because

7
00:00:32,550 --> 00:00:39,950
we're passing in this function through onSelectMeal to the meal item and there, we're binding it to on

8
00:00:39,950 --> 00:00:42,550
press, on the touchable opacity here,

9
00:00:42,570 --> 00:00:48,870
so that should fire on select meal and therefore in category meals screen, in this function here, we can

10
00:00:48,870 --> 00:00:54,870
navigate. Now since I defined this render meal function where I render my meal item inside of my component,

11
00:00:54,900 --> 00:01:00,780
I have access to props and there, since the category meal screen is our component we load with the help

12
00:01:00,780 --> 00:01:07,050
of navigation, I can access the navigation property and the navigate method and you learned that there,

13
00:01:07,050 --> 00:01:12,820
we can now pass in the route name where we want to go to and that would be meal detail,

14
00:01:12,900 --> 00:01:18,810
so the route name we set up in the meals navigator, this name here, this will load the meal detail page.

15
00:01:19,590 --> 00:01:26,400
Now we'll need to forward some data there and the data which I want to forward here of course is the

16
00:01:26,400 --> 00:01:32,850
ID of the selected meal, so that we can then load the details of that meal on that meal detail page

17
00:01:32,850 --> 00:01:34,500
to render them there.

18
00:01:34,770 --> 00:01:44,520
So in the category meals screen here, we can set up params here on our navigate object, on the

19
00:01:44,520 --> 00:01:49,980
object we pass to navigate and params takes an object of key-value pairs as you learned, that's something

20
00:01:49,980 --> 00:01:56,730
we did before and here, I want to forward my meal.id which I of course can get from an item data because

21
00:01:56,790 --> 00:02:03,330
itemData.item is a meal and every meal as you can see in the model has an ID, we're storing this here.

22
00:02:04,320 --> 00:02:10,890
Hence here of course we can say itemData.item.id, that's what I want to forward and with that,

23
00:02:10,890 --> 00:02:16,650
we should go to the meal detail page and there, we'll also be able to extract the ID of the meal we

24
00:02:16,650 --> 00:02:17,410
loaded.

25
00:02:17,640 --> 00:02:26,760
So on the MealDetailScreen, let's just see whether that works, the meal.id is props.navigation.getParam

26
00:02:26,760 --> 00:02:34,470
and now the name was meal.id, that's the param name I chose here for storing the param, if

27
00:02:34,470 --> 00:02:39,090
you chose a different name here, you need to choose a different name here or use the same name there

28
00:02:39,090 --> 00:02:46,980
of course and now we can select the meal, for that let's import all meals from the dummy data file in

29
00:02:46,980 --> 00:02:59,800
the data folder, like this and now the selected meal here of course is meals find and then we run this

30
00:02:59,800 --> 00:03:05,770
function on every meal there and it's the meal where the meal.id matches the meal.id we extracted

31
00:03:05,860 --> 00:03:14,200
up there, that's our selected meal. To prove that this works, we can output it there, selectedMeal.title

32
00:03:14,290 --> 00:03:21,250
and of course I also want to set the title in the header and that's also something you learned.

33
00:03:21,970 --> 00:03:28,460
You can do this by adding navigation options to this screen here, navigation options and you learned

34
00:03:28,490 --> 00:03:35,090
that if you want to retrieve something dynamic, you do this with the help of this special function here. 

35
00:03:35,690 --> 00:03:42,650
Navigation data is what you get there, this function is called for you by React navigation as you learned

36
00:03:43,340 --> 00:03:52,050
and now in there, we have to return our navigation object, our navigation options object but before we

37
00:03:52,050 --> 00:03:58,470
return this, we can use data we get from navigation data, like our navigation prop which in turn allows

38
00:03:58,470 --> 00:04:09,340
us to get access to a param, so we can use navigationData.navigation.getParam to get our meal.id

39
00:04:09,340 --> 00:04:13,890
here as well and also retrieve our meal just as we're doing it up there in the component,

40
00:04:13,990 --> 00:04:19,630
do the same down there for the navigation options and with the meal selected, we can of course here set

41
00:04:19,630 --> 00:04:25,040
a header title to selectedMeal.title and that's something we did before,

42
00:04:25,060 --> 00:04:30,650
this is how we can extract data here in our navigation options and use that dynamic data there

43
00:04:30,790 --> 00:04:32,620
for example to set the header title.

44
00:04:35,400 --> 00:04:37,830
With this out of the way, let's see whether it works,

45
00:04:37,920 --> 00:04:47,600
maybe on Android. Let's go to light and lovely, there we have all our recipes,  let's go to to salad here

46
00:04:49,530 --> 00:04:54,690
and here it is, here's our title, we also see it here so this is all loaded,

47
00:04:54,690 --> 00:04:58,050
if we go to the salmon, we instead see that.

48
00:04:58,050 --> 00:05:00,850
So this is all working as it should,

49
00:05:00,870 --> 00:05:02,350
very nice to see,

50
00:05:02,370 --> 00:05:08,340
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

51
00:05:08,340 --> 00:05:13,650
for this, I want to have a star icon here in the navigation which I can press.

52
00:05:13,650 --> 00:05:16,290
That's something we're missing yet and we haven't learned about yet,

53
00:05:16,320 --> 00:05:17,850
so it's a nice next step.