1
00:00:02,710 --> 00:00:07,840
Now we had a look at basic navigation with navigate and navigate is your most important tool

2
00:00:08,020 --> 00:00:13,720
but actually when being inside of a screen, of a component loaded with the help of a stack navigator,

3
00:00:13,870 --> 00:00:15,950
you have alternatives to navigate.

4
00:00:15,970 --> 00:00:22,450
You also can use push instead of navigate, though that doesn't take a Javascript object but instead takes

5
00:00:22,450 --> 00:00:24,240
just the route name here,

6
00:00:24,250 --> 00:00:30,280
in this case category meals as a first argument and with that, you'll get the same behavior as before.

7
00:00:30,610 --> 00:00:33,200
The question of course is why would you then use this.

8
00:00:33,250 --> 00:00:37,960
Number one it's a bit shorter than navigate because you're not passing an object but that's not the

9
00:00:37,960 --> 00:00:39,440
primary reason,

10
00:00:39,490 --> 00:00:47,880
instead using push here can be useful if you want to go to let's say a page where you already are on.

11
00:00:47,960 --> 00:00:49,100
Now let me show you what I mean.

12
00:00:49,120 --> 00:00:53,560
If I revert this and I navigate to categories here,

13
00:00:53,590 --> 00:00:59,650
so to the category screen which is the screen I'm already in. If I do that with navigate, what you'll see

14
00:00:59,800 --> 00:01:02,690
is that nothing happens if I tap this.

15
00:01:02,930 --> 00:01:10,760
Now if I use push instead and I therefore just pass categories as my first argument because that's

16
00:01:10,760 --> 00:01:16,490
how push works, you'll see that now this works and I can go to the same screen over and over again and

17
00:01:16,490 --> 00:01:19,810
it's pushed to the same stack over and over again.

18
00:01:19,820 --> 00:01:26,030
Now of course, you might wonder why would I want to push the screen I'm already on onto this again.

19
00:01:26,030 --> 00:01:32,150
Now in many apps you might not need this but let's say you're building an app like Dropbox where

20
00:01:32,150 --> 00:01:33,370
you have folders

21
00:01:33,380 --> 00:01:35,440
between which your users can navigate,

22
00:01:35,570 --> 00:01:38,330
if you're in a folder, you want to go to another folder.

23
00:01:38,330 --> 00:01:44,960
Now each folder is the same folder screen technically, just with different content loaded into it. In

24
00:01:44,960 --> 00:01:50,720
such a case, you might want to go from folder A to B which uses the same component, the same screen in

25
00:01:50,720 --> 00:01:56,540
the end but with different content, in such a case you could use push to still be able to push that new

26
00:01:56,540 --> 00:02:02,580
screen which is the same screen onto the stack and load the same screen with different content,

27
00:02:02,600 --> 00:02:05,860
this would be one scenario where you could need this. In this app,

28
00:02:05,870 --> 00:02:11,720
we don't need it so there's no need for push but you have this in scenarios where navigate wouldn't

29
00:02:11,720 --> 00:02:13,100
take you to that screen,

30
00:02:13,100 --> 00:02:15,830
push always will when inside of a stack

31
00:02:15,830 --> 00:02:23,630
navigator. Here however, I will revert this to navigate which takes an object with a route name which then

32
00:02:23,630 --> 00:02:31,800
points at categories because here, we absolutely don't need push, that is category meals though. So this

33
00:02:31,800 --> 00:02:33,330
will do for this app,

34
00:02:33,330 --> 00:02:36,370
now you also have other explicit navigation options,

35
00:02:36,420 --> 00:02:39,600
let's say from the category meal screen, you want to be able to go back.

36
00:02:39,840 --> 00:02:45,330
Well of course, we are able to go back with the help of this back button but it's also not that untypical

37
00:02:45,360 --> 00:02:51,140
that in some apps, you have some other thing your users can do where you want to take them back then,

38
00:02:51,150 --> 00:02:55,890
for example let's say you're on a page where you can set up some configuration and when you click

39
00:02:55,890 --> 00:03:01,180
the save button, you want to save that configuration and you also want to leave the screen.

40
00:03:01,290 --> 00:03:07,410
Now for this scenario, you might want to be able to trigger a back navigation manually and don't wait

41
00:03:07,410 --> 00:03:13,260
for the user to press the back button because that might force the user to press a save button first

42
00:03:13,260 --> 00:03:17,040
and then go back manually which is not the best user experience.

43
00:03:17,070 --> 00:03:24,210
So here, I will kind of simulate this by just having a go back button here in our screen,

44
00:03:24,210 --> 00:03:30,090
so in our jsx code and when we press this, I want to be able to go back, I manually want to trigger

45
00:03:30,090 --> 00:03:31,790
a back navigation.

46
00:03:31,950 --> 00:03:37,740
You can do this with the help of the navigation prop because there, you have a go back method you can

47
00:03:37,740 --> 00:03:41,030
call and this does just what it sounds like.

48
00:03:41,230 --> 00:03:46,380
If we save this and I go to the meals, if I click go back, we play the back navigation.

49
00:03:46,380 --> 00:03:51,960
Technically, this pops off the screen we're on and goes back to the previous screen in the stack

50
00:03:51,960 --> 00:03:58,860
therefore. As an alternative to go back, if you're in a stack navigator, you also have pop which does

51
00:03:58,860 --> 00:04:01,740
what the name implies, it pops off the current screen on the stack

52
00:04:02,010 --> 00:04:08,730
and since you always see the topmost screen on your device, this also plays the back navigation,

53
00:04:08,730 --> 00:04:14,240
so this is an alternative to going back. Difference is that pop can only be used if you're in a stack

54
00:04:14,240 --> 00:04:14,980
navigator,

55
00:04:15,090 --> 00:04:19,770
go back is also available in other navigators which we'll use later in this module.

56
00:04:22,340 --> 00:04:27,000
Sometimes, you'll also want to go back all the way to your parent component,

57
00:04:27,140 --> 00:04:34,730
let's say here in the MealDetailScreen. There we can also add a button and on this button

58
00:04:34,730 --> 00:04:39,390
here, I want to go back to my categories

59
00:04:39,390 --> 00:04:49,090
let's say and therefore, I will add onPress and in this function here, I can use props navigation pop,

60
00:04:49,090 --> 00:04:49,360
right,

61
00:04:49,360 --> 00:04:56,860
because this takes us back. Well the problem with that of course is, it takes me back but only to the

62
00:04:56,860 --> 00:04:59,230
screen before this screen, so to the screen.

63
00:04:59,230 --> 00:05:03,250
I came from. I want to go back to the categories screen though,

64
00:05:03,250 --> 00:05:06,040
so I want to skip two screens at the same time.

65
00:05:06,250 --> 00:05:08,450
For this you have pop to top,

66
00:05:08,560 --> 00:05:14,260
this is another method you can call which simply pops of all screens from the stack and takes you back

67
00:05:14,470 --> 00:05:15,970
to your root screen.

68
00:05:16,390 --> 00:05:21,100
So if you click this, we get the back animation and we're back on our root screen which in this case

69
00:05:21,220 --> 00:05:22,720
is the category screen,

70
00:05:22,720 --> 00:05:27,570
so that's an alternative here. Now with that,

71
00:05:27,580 --> 00:05:33,780
there's only one last possible navigation action you might sometimes need. Let's say on the categories screen,

72
00:05:34,050 --> 00:05:41,880
you want to go to category meals but you don't want to add it to the stack but you want to instead replace

73
00:05:41,940 --> 00:05:47,790
your current component in the stack with it, so that there is still only one screen in the stack but

74
00:05:47,790 --> 00:05:49,570
that screen is then a new page,

75
00:05:49,620 --> 00:05:54,630
that also means that you won't be able to go back on the new page because the stack would be empty thereafter

76
00:05:54,630 --> 00:05:56,820
which means your app closes.

77
00:05:56,820 --> 00:06:00,990
So in case you want to do that, you can use replace. Replace

78
00:06:01,020 --> 00:06:09,150
also just like push takes just an identifier like this and replace also takes you to the new screen,

79
00:06:09,150 --> 00:06:15,240
it plays no forward animation though, instead it instantly jumps there and you get no back button automatically

80
00:06:15,240 --> 00:06:19,030
because the stack is empty otherwise, this is the only screen.

81
00:06:19,200 --> 00:06:24,540
This could be used for example on a login screen where a user did sign in and once signed in, the user

82
00:06:24,540 --> 00:06:26,990
shouldn't be able to go back to the login screen,

83
00:06:27,030 --> 00:06:32,430
well then you could simply replace the login screen with your you are logged in screen with the user

84
00:06:32,430 --> 00:06:34,370
profile or anything like that.

85
00:06:34,620 --> 00:06:39,930
If you still try to go back, nothing happens because you can't go back, there's nothing else in the

86
00:06:39,930 --> 00:06:44,390
stack. Therefore of course, replace is absolutely not what we need in this app,

87
00:06:44,430 --> 00:06:51,600
I just wanted to introduce this here, though we will see more available patterns and how you go back

88
00:06:51,630 --> 00:06:56,810
and forth between pages and when you might want to replace or switch between screens like this throughout

89
00:06:56,830 --> 00:07:02,610
this module, just wanted to introduce it already at this point, still here, I will go back to navigate

90
00:07:02,910 --> 00:07:10,680
with the route name pointing at category meals. And with that, you had an overview of some of the basic

91
00:07:10,800 --> 00:07:16,230
navigation methods that allow you to go back and forth between your screens. As I mentioned, we'll of

92
00:07:16,230 --> 00:07:22,500
course see many patterns in action throughout this module, for now this is it and I'd say with that out

93
00:07:22,500 --> 00:07:30,180
of the way, it's time to actually add some meat to this application, make sure it's a more realistic application

94
00:07:30,330 --> 00:07:33,030
and not just a dummy application like it currently is.