1
00:00:02,530 --> 00:00:07,540
Well to reach our other screens, we need something which we can click, which we can tap.

2
00:00:07,600 --> 00:00:12,130
Later we'll have our grid of categories here and we will work on this in this module too

3
00:00:12,220 --> 00:00:15,990
but just to get started with navigation, I will add a button,

4
00:00:16,030 --> 00:00:21,850
so on the categories screen where I have this text, I want to add a button which I can tap to go to the

5
00:00:21,850 --> 00:00:23,510
category meals screen.

6
00:00:23,980 --> 00:00:34,440
So here, I'll add this React Native button, the one which is built-in and set a title of go to meals

7
00:00:34,600 --> 00:00:41,630
and when we press this button, I want to trigger a function which actually takes me to the category meals

8
00:00:41,660 --> 00:00:42,890
screen.

9
00:00:42,890 --> 00:00:45,610
Now we set up that category meals screen here

10
00:00:45,620 --> 00:00:53,040
but how can we now go to it? Well for this, it's important to know that any component you loaded with

11
00:00:53,040 --> 00:01:00,360
the help of React navigation gets a special prop passed in automatically, so any component mapped to

12
00:01:00,360 --> 00:01:02,550
one of your screen identifiers here,

13
00:01:02,550 --> 00:01:09,390
so in this case these three components, will get the special prop. Nested components in there don't automatically

14
00:01:09,390 --> 00:01:14,850
get it, just the top level components you mapped to identifiers in your navigators.

15
00:01:14,850 --> 00:01:16,800
So that's a special prop I'm talking about,

16
00:01:16,800 --> 00:01:17,810
let's have a look at it.

17
00:01:17,820 --> 00:01:23,790
So here in props, we can extract it and let's simply start by console logging props here, so that we

18
00:01:23,790 --> 00:01:27,510
can get an idea and for now so that we don't get an error,

19
00:01:27,510 --> 00:01:30,480
I'll just pass an empty function here to onPress.

20
00:01:30,480 --> 00:01:33,600
So let's save this and let's see what's inside of props.

21
00:01:33,690 --> 00:01:39,660
This reloads, we have the button which doesn't do anything and here in the console, we indeed see props

22
00:01:39,720 --> 00:01:40,800
isn't empty.

23
00:01:40,800 --> 00:01:42,030
This is our props object

24
00:01:42,030 --> 00:01:48,400
and there we have a navigation prop which itself is an object which has some actions,

25
00:01:48,420 --> 00:01:58,980
okay but which also has for example pop, push, replace, reset and a navigate function, so a bunch of functions

26
00:01:58,980 --> 00:02:03,090
in there, functions which help us get around in our app.

27
00:02:03,450 --> 00:02:09,670
It also has a screen props prop, so our prop has screen props which we can ignore for now.

28
00:02:09,690 --> 00:02:17,160
So this what's inside of props and this navigation prop, this navigation part which is in there,

29
00:02:17,520 --> 00:02:18,680
really helps us,

30
00:02:18,690 --> 00:02:25,350
so this navigation prop. It helps us here because when we press this button and I'll do this with an

31
00:02:25,370 --> 00:02:30,270
inline arrow function here, of course you could have a separate function which you create and which you

32
00:02:30,270 --> 00:02:32,010
then map to onPress,

33
00:02:32,010 --> 00:02:35,430
this helps us and this can be used to navigate around.

34
00:02:35,490 --> 00:02:42,210
So on props navigation, navigation is this special prop we're getting by React navigation because we loaded

35
00:02:42,210 --> 00:02:46,390
this categories screen component with the help of our navigator here,

36
00:02:46,740 --> 00:02:50,900
this special navigation prop has a navigate method

37
00:02:50,910 --> 00:02:53,040
and this is your main method,

38
00:02:53,040 --> 00:03:01,620
the most important method for getting around with the help of React navigation. How does navigate work?

39
00:03:02,490 --> 00:03:12,040
Navigate takes an object as an argument and in this object, you can set up the route name to which

40
00:03:12,040 --> 00:03:13,150
you want to navigate.

41
00:03:13,240 --> 00:03:19,720
So you pass a route name property in this object which you pass to navigate and now important, the route

42
00:03:19,720 --> 00:03:25,540
name you specify here has to be one of the three route names I set up here.

43
00:03:25,720 --> 00:03:31,450
Now route names are the identifiers you show chose in front of these colons, so the property names in

44
00:03:31,450 --> 00:03:34,420
this object you passed to create stack navigator.

45
00:03:34,420 --> 00:03:36,660
These are your route names and

46
00:03:36,670 --> 00:03:42,900
this is what you can now use to navigate around. So here I want to go to category meals,

47
00:03:42,900 --> 00:03:44,690
this is the route name I want to use,

48
00:03:44,690 --> 00:03:48,340
so hence here, I point at category meals but not like this,

49
00:03:48,410 --> 00:03:56,000
this in Javascript would look for a category meals variable, instead to a string named category meals

50
00:03:56,180 --> 00:04:02,450
because this will basically tell Javascript and React navigation in the end that you want to go to the

51
00:04:02,450 --> 00:04:08,470
route which has the category meals name and that is this route here.

52
00:04:08,470 --> 00:04:10,720
So now, this is how you can go there.

53
00:04:13,730 --> 00:04:21,530
If we now save this and we click on go to meals here, you see we go to the meal screen, we get this nice

54
00:04:21,530 --> 00:04:27,020
animation out of the box, we get this back button which looks exactly the way we would expect it to look

55
00:04:27,020 --> 00:04:33,650
on iOS and all of that works out of the box without any extra work, no if check, no manual animation

56
00:04:33,650 --> 00:04:38,890
code, we get this out of the box thanks to the React navigation library.

57
00:04:38,990 --> 00:04:45,800
So with this, we can go forth and back to our meal screen, to the category meal screen and then back to

58
00:04:45,800 --> 00:04:52,130
the category screen and this also works on Android. There we get the Android specific routing navigation

59
00:04:52,400 --> 00:04:57,620
which looks a bit different than on iOS, it's the navigation animation you would expect on Android, of

60
00:04:57,620 --> 00:05:01,550
course you can also use the device back button to then go back.

61
00:05:01,550 --> 00:05:08,600
So this is how you can navigate to a different screen and please also notice that navigate of course

62
00:05:08,600 --> 00:05:15,530
doesn't say anything about the direction we want to go, it doesn't tell React navigation whether it should

63
00:05:15,530 --> 00:05:22,490
play that forward animation or that backward animation. React navigation automatically detects this because

64
00:05:22,550 --> 00:05:29,120
under the hood, it manages this stack of pages I was talking about, this stack of screens and in this

65
00:05:29,120 --> 00:05:35,060
stack, right now when we start the app, we only have the category screen but when I press this button,

66
00:05:35,420 --> 00:05:42,050
navigate in the end tells React navigation that since we're doing this inside of a component which was

67
00:05:42,050 --> 00:05:47,570
loaded with a stack navigator, that we want to navigate to a different screen which should be pushed

68
00:05:47,600 --> 00:05:53,810
on top of the stack. This is simply the default behavior and hence, it knows that it wants to go forward

69
00:05:53,840 --> 00:05:59,690
because a new route was pushed, which means it's added to the stack, we want to go forward and when we

70
00:05:59,690 --> 00:06:06,080
click the back button which it adds automatically, it pops this screen off the stack and since it removes

71
00:06:06,170 --> 00:06:10,700
something from the stack, it knows that it should play the back animation. So that's what's happening

72
00:06:10,700 --> 00:06:14,870
behind the scenes, you don't really need to worry about that and that's the good thing,

73
00:06:14,960 --> 00:06:20,330
I just want you to be aware of that, that React navigation is doing the heavy lifting for you there and

74
00:06:20,330 --> 00:06:27,980
manages this stack of screen and the according animations you need therefore under the hood for you.

75
00:06:28,120 --> 00:06:28,460
Okay,

76
00:06:28,520 --> 00:06:32,990
so that's allowing us to go back and forth or forth and back.

77
00:06:32,990 --> 00:06:39,260
Now your challenge for the next lecture where we will then do it together is that you also will do the

78
00:06:39,260 --> 00:06:44,270
same on the category meal screen and make sure that we can also go to the MealDetailScreen

79
00:06:44,270 --> 00:06:47,990
from there. Shouldn't be too hard, in the next lecture, we'll do it together.