1
00:00:02,500 --> 00:00:09,730
So we spent quite some time on migrating this to react navigation five now, and maybe it looks a bit

2
00:00:09,730 --> 00:00:10,900
overwhelming right now.

3
00:00:10,930 --> 00:00:15,670
So let me sum up the key changes we made here and the key changes.

4
00:00:15,700 --> 00:00:19,840
The key difference is react navigation five introduced.

5
00:00:19,990 --> 00:00:24,310
The biggest change is how we set up our screen configuration.

6
00:00:24,730 --> 00:00:31,030
Instead of having this registry like approach, we now use components to set up our configuration.

7
00:00:31,420 --> 00:00:34,120
But the pattern here is actually quite simple.

8
00:00:34,600 --> 00:00:40,750
You always create a navigator that could be a stack navigator, a draw navigator or also a tap navigator.

9
00:00:41,230 --> 00:00:43,600
And then you use that navigator.

10
00:00:43,900 --> 00:00:51,910
Does Navigator a component here as a route component for this set of screens that belongs to this navigator?

11
00:00:52,030 --> 00:00:57,670
The screens are then nested components in there and dare you provide a name and a component that should

12
00:00:57,670 --> 00:00:58,960
be loaded for that screen.

13
00:01:00,120 --> 00:01:06,150
Now, when it comes to navigating, you still navigate with the navigation prop and then the navigate

14
00:01:06,150 --> 00:01:11,120
function by identifying the screen by name, so that does not change at all.

15
00:01:11,130 --> 00:01:13,420
You also still pass Perrin's as before.

16
00:01:13,770 --> 00:01:18,960
The only important thing here or the one thing you should keep in mind is that the name you use here,

17
00:01:19,050 --> 00:01:23,300
of course, should be the name you also use here when you set up your screens.

18
00:01:23,610 --> 00:01:28,530
So that's the biggest change that you set up your configuration as components.

19
00:01:29,280 --> 00:01:35,670
Ultimately, you then can still Nestea different navigators into each other as we're doing it here where

20
00:01:35,670 --> 00:01:41,610
we have to draw a navigator, which also has STAC navigators as screens.

21
00:01:41,610 --> 00:01:42,990
That also doesn't change.

22
00:01:42,990 --> 00:01:44,480
It just looks different now.

23
00:01:45,030 --> 00:01:51,420
And what changed is where you configure things, screen wide configuration options.

24
00:01:51,420 --> 00:01:57,780
So options that affect all screens of a navigator are set up directly on the navigator component with

25
00:01:57,780 --> 00:01:58,740
the screen options.

26
00:01:58,740 --> 00:02:05,670
Prop and screen specific configuration is set up with the options prop on the screen component.

27
00:02:06,120 --> 00:02:11,910
Now where you manage that configuration, if you do it all in one big file or as we're doing it here,

28
00:02:12,060 --> 00:02:17,160
if you're doing it in the screen and you don't just export it so that you can use it when setting up

29
00:02:17,160 --> 00:02:18,960
the components is up to you.

30
00:02:20,070 --> 00:02:22,260
Now, that's all you need to keep in mind there.

31
00:02:22,590 --> 00:02:29,480
One thing that did change because of that is how you handle authentication or related cases.

32
00:02:29,760 --> 00:02:31,990
You don't have to switch navigator anymore.

33
00:02:32,130 --> 00:02:38,490
Instead, you control which navigators should be rendered by react and what's not rendered can't be

34
00:02:38,490 --> 00:02:40,440
effective, can't do anything.

35
00:02:40,650 --> 00:02:46,460
So if we don't render to Shop Navigator because we're not authenticate it, then there is no way a shop

36
00:02:46,470 --> 00:02:47,690
screen can be loaded.

37
00:02:48,060 --> 00:02:54,630
That's how we now control which screens are accessible here at the example of authentication.

38
00:02:54,930 --> 00:02:57,720
Also keeping order login in mind.

39
00:02:57,810 --> 00:03:01,610
So that's something where you have to switch to a new mental model.

40
00:03:01,890 --> 00:03:06,390
This is much more reactive than what we had to use before, though.

41
00:03:07,200 --> 00:03:12,510
And then we have one other big or important change and that is how we extract Perrin's.

42
00:03:12,510 --> 00:03:17,280
And when we need Perrin's, we extract Perens on this new route.

43
00:03:17,280 --> 00:03:18,990
Propp with the parents key.

44
00:03:19,530 --> 00:03:23,610
The parents key can be undefined if there are no parents received.

45
00:03:23,610 --> 00:03:30,390
And this component and parents should now really only be used to get data from component A to component

46
00:03:30,390 --> 00:03:38,100
B, so from screen to screen B, hackie work arounds as we needed to use them before in the added product

47
00:03:38,100 --> 00:03:40,170
screen are not needed anymore.

48
00:03:40,440 --> 00:03:47,400
If you needed to use Perm's to get data from inside to component into your screen options, you don't

49
00:03:47,400 --> 00:03:48,450
need to do that anymore.

50
00:03:48,750 --> 00:03:56,760
Instead, what you do now is you use the new set options function, which you can call directly on your

51
00:03:56,760 --> 00:03:58,080
navigation prop.

52
00:04:00,700 --> 00:04:01,440
Here it is.

53
00:04:01,840 --> 00:04:07,990
So we call set options on this navigation prop and then we can dynamically adjust the navigation options

54
00:04:08,110 --> 00:04:09,670
from inside the component.

55
00:04:10,630 --> 00:04:15,840
These are the key changes we had to make here and the key things that changed.

56
00:04:16,720 --> 00:04:19,840
Now, as always, the official talks are your friend.

57
00:04:19,840 --> 00:04:24,790
If you want to read about that again, if you want to dive into some other cases, which we haven't

58
00:04:24,790 --> 00:04:29,560
covered here, for example, if you want to learn how to work with TAPS, we're not doing this here.

59
00:04:29,560 --> 00:04:31,060
But the approach is very similar.

60
00:04:31,270 --> 00:04:36,340
You do it with a component based configuration, with a navigator and screens, and then the official

61
00:04:36,340 --> 00:04:42,130
docs are a really great place to dive into all the check out the announcement post for REAC Navigation

62
00:04:42,130 --> 00:04:46,660
five and the upgrade guide, which is also linked there.

63
00:04:46,690 --> 00:04:50,640
You find all these resources also attached to this lecture.

64
00:04:51,220 --> 00:04:56,350
And with that, it's up to you whether you want to use react navigation three or four or if you want

65
00:04:56,350 --> 00:04:58,450
to switch to five or later.

66
00:04:58,450 --> 00:05:01,000
Once we have new versions, it's up to you.

67
00:05:01,390 --> 00:05:07,900
The majority of projects out there in the wild will certainly still use version of three and four because

68
00:05:07,900 --> 00:05:13,840
these versions have been around for so long, new projects might switch to where you have five, but

69
00:05:13,840 --> 00:05:15,840
might also still use the older version.

70
00:05:15,970 --> 00:05:20,050
So I would argue that it's important to know both kinds of navigation.

71
00:05:20,410 --> 00:05:25,360
If you're working on your own project on your own, I would recommend that you switch to react navigation

72
00:05:25,360 --> 00:05:26,860
five right from the start.

73
00:05:27,130 --> 00:05:31,480
But if you like four or three batter, that's perfectly fine as well.

74
00:05:31,900 --> 00:05:38,020
React navigation three and four is fully stable and all the will be maintained and updated in the future

75
00:05:38,020 --> 00:05:39,610
by the react navigation team.

76
00:05:39,820 --> 00:05:41,170
So it's not going anywhere.

77
00:05:41,200 --> 00:05:45,340
It's not insecure to use it and it's up to you which version you want to use.