1
00:00:02,920 --> 00:00:08,890
So to reach that MealDetailScreen from inside our category meals screen, I'll do basically the same

2
00:00:08,890 --> 00:00:09,850
I did before,

3
00:00:09,880 --> 00:00:11,490
I'll add a button there,

4
00:00:11,740 --> 00:00:19,830
so add a button here on the category meal screen with the title of go to details or whatever you want

5
00:00:19,960 --> 00:00:27,700
and then we use onPress to fire a function when this button is pressed where I will use props.navigation.navigate,

6
00:00:28,060 --> 00:00:34,930
using this navigate method to which we have to pass an object where we set up a route name

7
00:00:35,110 --> 00:00:39,860
and now our route name has to be one of the identifiers we set up in the stack navigator here.

8
00:00:39,940 --> 00:00:46,140
In this case, we want to go to the meal detail page, so I'll use meal detail here and point at this,

9
00:00:46,150 --> 00:00:54,150
so here, point at meal detail and we should be good to go. If we now save this,

10
00:00:54,310 --> 00:00:59,530
we can go to meals then we can go to the details and you see we get another forward animation, we can

11
00:00:59,530 --> 00:01:06,250
go back and back again of course and all of that because this stack of multiple pages is managed under

12
00:01:06,250 --> 00:01:08,320
the hood by React navigation.