1
00:00:02,230 --> 00:00:10,660
Now, what did change between version four and version five with reality navigation in the past were

2
00:00:10,660 --> 00:00:17,110
with these older versions, so with REACT navigation, which are free and for which we use in this course,

3
00:00:17,590 --> 00:00:23,770
we had this way of setting up routes that were of setting up screens we could go to.

4
00:00:24,340 --> 00:00:31,540
We set up such a registry like configuration in a file where we basically mapped our different screens

5
00:00:31,540 --> 00:00:37,510
to identifiers and then we could work with these identifiers from anywhere in the application to go

6
00:00:37,510 --> 00:00:38,780
to a specific screen.

7
00:00:39,520 --> 00:00:45,370
Now, when it came to configuring these different screens, we could do that directly in the screen

8
00:00:45,370 --> 00:00:53,260
component or also globally on the Stack Navigator, for example, with the default navigation options.

9
00:00:53,620 --> 00:00:57,910
Now, this approach of navigating around works just fine, as you see in this course.

10
00:00:58,330 --> 00:01:02,050
And there isn't necessarily something wrong with it, though.

11
00:01:02,050 --> 00:01:08,020
We also had some occasions where we definitely saw that it could be tricky at times.

12
00:01:08,050 --> 00:01:08,440
Right.

13
00:01:08,440 --> 00:01:15,070
If you wanted to update Hattar buttons in the header of a component dynamically, you had to abuse Purim's

14
00:01:15,070 --> 00:01:15,700
to do that.

15
00:01:15,910 --> 00:01:20,460
And that was not ideal and definitely a bit tricky to wrap your head around.

16
00:01:20,830 --> 00:01:26,530
Nonetheless, you can definitely use Riak navigation versions free and fair and you can keep using those

17
00:01:26,530 --> 00:01:27,040
versions.

18
00:01:27,820 --> 00:01:33,370
But with the release of React Navigation Version five, things changed a bit.

19
00:01:33,370 --> 00:01:37,420
And we now set up Rawat's and we navigate around a bit differently.

20
00:01:38,050 --> 00:01:44,320
Now there basically is one super big change between version four and five, which I'll cover in this

21
00:01:44,320 --> 00:01:44,890
module.

22
00:01:45,340 --> 00:01:53,140
We now don't set up our different Rawat's or our different screenname mappings in this registry like

23
00:01:53,160 --> 00:01:54,580
way we see on the left.

24
00:01:55,000 --> 00:02:00,580
But now instead we set everything up as a component tree, you could say.

25
00:02:00,850 --> 00:02:06,220
So now we have a component based configuration of our different Rawat's.

26
00:02:06,220 --> 00:02:11,980
We can go to all of our different parts of the application, go to and what looks a bit messy here on

27
00:02:11,980 --> 00:02:19,280
the slide will look way cleaner later in this module when we put our project to that set up.

28
00:02:19,960 --> 00:02:27,970
Now, whilst this certainly is a big change and a big mental model switch we have to make because we

29
00:02:27,970 --> 00:02:31,380
set up our navigation configuration in a totally different way.

30
00:02:31,390 --> 00:02:34,570
Now, it offers some nice advantages.

31
00:02:34,570 --> 00:02:41,140
As you will see, it's actually closer to the react way of building apps where you basically want to

32
00:02:41,140 --> 00:02:45,430
use components everywhere to express what the result should look like.

33
00:02:45,580 --> 00:02:48,550
And you then let react figure out the way to get there.

34
00:02:48,670 --> 00:02:55,480
And if we set up our screen configuration in such a component based way, then we actually just define

35
00:02:55,480 --> 00:03:00,210
our end result and we let react and react navigation, figure out the way to get there.

36
00:03:00,580 --> 00:03:03,130
So that's actually a good mental model to have.

37
00:03:03,130 --> 00:03:05,260
But of course, that's one we have to get used to.

38
00:03:05,980 --> 00:03:10,270
And therefore, without further ado, let's dive in and let's put our application.

39
00:03:10,550 --> 00:03:12,640
However, there is one thing I want to say.

40
00:03:13,120 --> 00:03:14,530
React navigation.

41
00:03:14,650 --> 00:03:20,320
This package with the words three and four is still super important.

42
00:03:20,800 --> 00:03:25,870
Of course, react navigation, version five and so on is the future of react navigation.

43
00:03:25,870 --> 00:03:34,480
But the vast majority of project you will find out there of react native projects will use react navigation

44
00:03:34,480 --> 00:03:36,070
in versions three and four.

45
00:03:36,220 --> 00:03:42,880
So you have to know those versions as well, which is why the overall course still uses D versions with

46
00:03:42,880 --> 00:03:43,630
this module.

47
00:03:43,630 --> 00:03:45,220
I also show you version five.

48
00:03:45,220 --> 00:03:50,800
So did you have the full toolkit and you were able to work on any react native project, no matter which

49
00:03:50,800 --> 00:03:52,930
version of navigation it uses?