1
00:00:02,430 --> 00:00:09,450
The majority of our files don't need to change, what we will need to change, though, is what's happening

2
00:00:09,450 --> 00:00:14,070
in the navigation files, in the navigation folder, in abcess.

3
00:00:14,070 --> 00:00:17,850
You might remember rendering the navigation container here.

4
00:00:18,120 --> 00:00:24,240
And the navigation container is just a custom component here where we in the end have our logic for

5
00:00:24,240 --> 00:00:29,340
checking whether the user is authenticated and then we render to Shop Navigator, which is our route

6
00:00:29,340 --> 00:00:32,040
navigator created here with React navigation.

7
00:00:32,520 --> 00:00:35,550
And that is where things have to change now.

8
00:00:36,380 --> 00:00:38,960
Now, let's start with the navigation container.

9
00:00:39,390 --> 00:00:45,660
We won't need this code here anymore where we manually navigate somewhere else if the user is authenticated,

10
00:00:46,140 --> 00:00:52,110
because you will see later that this will now be handled differently with this component based configuration.

11
00:00:52,740 --> 00:00:54,780
So you can delete use of fact here.

12
00:00:55,110 --> 00:00:56,820
Keep is off here, though.

13
00:00:57,090 --> 00:01:01,050
You can delete the ref here, however, and also delete that there.

14
00:01:01,890 --> 00:01:08,190
And when it comes to the imports here, we don't need the two hooks here anymore and we also don't need

15
00:01:08,220 --> 00:01:09,450
this import anymore.

16
00:01:09,720 --> 00:01:12,120
So we just have the shop navigator left.

17
00:01:12,810 --> 00:01:16,580
And that's also not really something we need here anymore.

18
00:01:17,070 --> 00:01:24,060
We're not adding a shop navigator as a component like this, where we then refer to the overall configuration

19
00:01:24,060 --> 00:01:30,360
from the Shop Navigator file, because that overall configuration is, of course, all set up with that

20
00:01:30,360 --> 00:01:37,740
old logic of having that global register like configuration, which is simply not working anymore with

21
00:01:37,740 --> 00:01:39,090
Riak Navigation five.

22
00:01:39,720 --> 00:01:45,630
Instead, we now need to migrate all of that to that new approach to this component based approach.

23
00:01:46,590 --> 00:01:49,590
And to do that, I want to start quite simple.

24
00:01:49,830 --> 00:01:57,420
In the navigation container, I will set up a new Stack Navigator, which is just a dummy navigator

25
00:01:57,420 --> 00:01:57,960
for now.

26
00:01:57,960 --> 00:02:04,230
So did you see how it generally works before we then later will actually well apply this to our real

27
00:02:04,230 --> 00:02:04,920
application?

28
00:02:06,810 --> 00:02:13,830
For that, let's say the import here from at react navigation slash native, and from there we need

29
00:02:13,830 --> 00:02:15,300
to import the navigation.

30
00:02:17,130 --> 00:02:23,490
The navigation container now that can be confusing because our own component here is all the named navigation

31
00:02:23,490 --> 00:02:24,040
container.

32
00:02:24,540 --> 00:02:31,890
So to avoid confusion here, I will rename our own component here to App Navigator or whatever you want

33
00:02:31,890 --> 00:02:32,550
to name it like.

34
00:02:32,730 --> 00:02:34,110
So I will rename it here.

35
00:02:34,260 --> 00:02:39,870
And also to avoid confusion, even though it's not technically required in the app component.

36
00:02:39,870 --> 00:02:40,290
An app.

37
00:02:40,440 --> 00:02:41,250
Yes, I will.

38
00:02:41,250 --> 00:02:43,740
Imported as App Navigator.

39
00:02:43,890 --> 00:02:51,480
I will rename the file to App Navigator and I will import from App Navigator here in the app component.

40
00:02:51,690 --> 00:02:55,130
So adjust the import path to include that new filename.

41
00:02:55,590 --> 00:02:58,440
And then here I render App Navigator.

42
00:02:59,010 --> 00:03:02,210
Now I just made these name changes to avoid confusion.

43
00:03:02,430 --> 00:03:08,540
The more important part happens inside of that App Navigator, which previously was our navigation container.

44
00:03:09,240 --> 00:03:12,120
Now we're importing navigation container from React Native.

45
00:03:12,120 --> 00:03:15,420
But that will be a different component than what we built in the past.

46
00:03:15,420 --> 00:03:18,390
It just shared the same name, which is why I renamed it.

47
00:03:19,290 --> 00:03:24,780
More important than this navigation container for the moment is that we import something from attract

48
00:03:24,780 --> 00:03:31,490
navigation stack and this is now a package which doesn't exist, which we haven't installed yet.

49
00:03:32,220 --> 00:03:34,380
So let's stop this process again.

50
00:03:34,380 --> 00:03:40,920
And with be installed Ashtar safe, let's install at react navigation logs stack.

51
00:03:41,580 --> 00:03:45,870
So npm install Dashty safe at REAC navigation slash stack.

52
00:03:46,140 --> 00:03:51,840
This will install us the stack navigation logic and we can also install another package already because

53
00:03:51,840 --> 00:03:59,100
we'll need it later and that's at risk navigation draw which will later give us to draw based navigation

54
00:03:59,130 --> 00:04:00,270
which will also need.

55
00:04:01,260 --> 00:04:04,050
So let's wait for these two installation commands to finish.

56
00:04:05,830 --> 00:04:10,480
And thereafter would then start we can bring up this expo server again.

57
00:04:11,820 --> 00:04:17,040
So now that we installed react navigation stack, we can import something from it and that something

58
00:04:17,040 --> 00:04:23,430
as did create Stack Navigator, now create Stack Navigator is a function we we already know, right

59
00:04:23,790 --> 00:04:27,930
in Shop Navigator, which still uses the old reac navigation.

60
00:04:28,680 --> 00:04:34,920
We also import to create Stack Navigator from navigation, or if you were using version four of this

61
00:04:34,920 --> 00:04:36,990
package from a separate package.

62
00:04:37,200 --> 00:04:42,840
But we also had create Stack Navigator in there and create a draw navigator and so on.

63
00:04:43,800 --> 00:04:53,220
Now we used to create Stack Navigator to create our configuration, set up our navigation registry for

64
00:04:53,220 --> 00:04:55,220
this part of our application.

65
00:04:55,230 --> 00:05:00,150
You could say so for the products overview of the product detail and the card screen, which we put

66
00:05:00,150 --> 00:05:01,740
together into one stack.

67
00:05:01,890 --> 00:05:08,010
And then we had multiple such stacks to compose them together in our draw navigator, which we ultimately

68
00:05:08,010 --> 00:05:11,100
then combined with the off screen in the Switch Navigator.

69
00:05:12,030 --> 00:05:16,200
Now back to our App Navigator, what do we do with create Stack Navigator here?

70
00:05:16,620 --> 00:05:25,080
It now works differently now we use it to create a new component with it, and I will name it my stack.

71
00:05:25,210 --> 00:05:31,110
The name is totally up to you, but you simply call creates a stack navigator like this and you're done.

72
00:05:31,320 --> 00:05:33,630
And this is now a huge change.

73
00:05:33,930 --> 00:05:38,760
You now don't pass any object to create Stack Navigator to configure it.

74
00:05:39,030 --> 00:05:42,780
Instead, it is a function that doesn't want an object.

75
00:05:42,810 --> 00:05:45,180
It is a function that needs no object.

76
00:05:46,720 --> 00:05:49,690
So what does it do then, what is my stack?

77
00:05:50,170 --> 00:05:58,480
My stack is now a react component and we use it as such here in the App Navigator, to be precise,

78
00:05:58,480 --> 00:06:04,600
we need to wrap all navigation logic with the navigation container component, which we're importing

79
00:06:04,600 --> 00:06:06,310
from react navigation native.

80
00:06:06,820 --> 00:06:14,710
You can think of that navigation container component basically as the component version of the app container,

81
00:06:15,220 --> 00:06:17,470
which we created with create app container.

82
00:06:17,470 --> 00:06:19,660
In the old setup right there.

83
00:06:19,660 --> 00:06:24,360
We had to wrap our finished navigator with create our container.

84
00:06:24,760 --> 00:06:31,680
Now we have to wrap our to be done component based navigation setup with navigation container.

85
00:06:32,260 --> 00:06:38,980
So in here we now set up our logic when it comes to which pages we want to be able to load.

86
00:06:39,760 --> 00:06:47,680
And here we now use my stack as a react component, but not like this, but instead here we need the

87
00:06:47,920 --> 00:06:49,700
DOT navigator component.

88
00:06:50,080 --> 00:06:58,630
So what my stack actually is, is it's an object with a navigator property and the value stored in that

89
00:06:58,630 --> 00:07:01,360
property is now a component.

90
00:07:02,480 --> 00:07:08,120
So now we can create that component and between the opening and closing tax of this component, we now

91
00:07:08,120 --> 00:07:10,700
put basically the different screens.

92
00:07:10,700 --> 00:07:12,960
We want to be part of that stack.

93
00:07:13,520 --> 00:07:20,240
So what we previously hear in Shop Navigator Hat, inside of this object, we passed to create Stack

94
00:07:20,240 --> 00:07:24,380
Navigator, this map of screen components and their names.

95
00:07:24,830 --> 00:07:29,200
That's what we're now setting up here between this opening and closing.

96
00:07:30,110 --> 00:07:36,540
You could therefore think that what we do is we add the products overview screen component, right?

97
00:07:36,890 --> 00:07:38,300
This is one of our components.

98
00:07:38,390 --> 00:07:41,690
We would add an import, which we haven't done here because this is wrong.

99
00:07:41,990 --> 00:07:43,430
But you could think that we do this.

100
00:07:43,820 --> 00:07:44,930
Well, almost.

101
00:07:45,770 --> 00:07:51,380
This would certainly be the screen we want to have as part of this navigator, but it wouldn't have

102
00:07:51,380 --> 00:07:51,990
a name.

103
00:07:52,340 --> 00:07:57,800
Now we need a name so that we can navigate to it, for example, so that we can trigger a navigation

104
00:07:57,810 --> 00:07:59,180
somewhere in our application.

105
00:07:59,330 --> 00:08:02,450
That's why we have a name here as well on the old setup.

106
00:08:03,650 --> 00:08:05,330
So instead we do something different.

107
00:08:05,450 --> 00:08:13,100
We again use my stack, this object up there, and now a second property, which it has the screen property,

108
00:08:13,520 --> 00:08:15,500
just like the navigator property.

109
00:08:15,740 --> 00:08:20,560
The screen property also holds a react component and hence we can render it like this.

110
00:08:21,200 --> 00:08:27,830
This is now a component which allows us to define a screen that should be part of that Stack Navigator

111
00:08:27,830 --> 00:08:28,100
here.

112
00:08:28,910 --> 00:08:34,460
And we configure it with help of props now because we're working with a component here.

113
00:08:34,460 --> 00:08:38,780
So configuration works with props, just as it's always the case.

114
00:08:38,780 --> 00:08:45,710
When we work with components to give this screen a name, we add a name Propp, and now we can use that

115
00:08:45,710 --> 00:08:53,510
name we use here products overview so we can add this name and to let react navigation to know which

116
00:08:53,510 --> 00:08:56,270
component to load when we target this name.

117
00:08:56,290 --> 00:09:02,150
When we do that with a navigation action, for example, we add a second prop, the component prop,

118
00:09:02,300 --> 00:09:09,500
and this should hold a pointer at the component we want to load when we want to go to this screen with

119
00:09:09,500 --> 00:09:10,080
this name.

120
00:09:10,850 --> 00:09:13,850
So for this, I'm going to import.

121
00:09:14,760 --> 00:09:23,700
Products overview screen here from our screens folder to shop subfolder and then products overview screen.

122
00:09:23,850 --> 00:09:28,710
So now we do need it and I passed is here now important.

123
00:09:29,010 --> 00:09:30,810
We don't create the component here.

124
00:09:30,810 --> 00:09:32,070
We just point at it.

125
00:09:32,070 --> 00:09:35,880
We just use its name, which is exported from that file.

126
00:09:36,870 --> 00:09:41,940
And with this we now have our first little stack set up here.

127
00:09:42,720 --> 00:09:46,220
Now let's comment about this import from Shop Navigator.

128
00:09:46,230 --> 00:09:47,790
We don't need it any more at the moment.

129
00:09:48,300 --> 00:09:52,170
Let's save everything and launched this on Android, let's say.

130
00:09:52,740 --> 00:09:58,260
And when you do that, it builds the JavaScript bundle and opens this up on the Android device.

131
00:09:58,260 --> 00:10:01,050
And what you'll see is our product overview screen.

132
00:10:01,380 --> 00:10:02,790
Of course, it looks a bit different.

133
00:10:02,790 --> 00:10:04,770
Of course, it's missing the header buttons.

134
00:10:04,770 --> 00:10:07,110
It's missing the entire header configuration.

135
00:10:07,320 --> 00:10:13,740
The title is all the wrong, but that makes sense because we're now not using the old navigator where

136
00:10:13,740 --> 00:10:16,980
we had all this configuration, but the new one.

137
00:10:17,250 --> 00:10:20,910
And this is just to prove that it works and how it works.

138
00:10:21,510 --> 00:10:24,180
Now with this knowledge in mind.

139
00:10:24,720 --> 00:10:32,190
Let's now leave this tiny example here and let's actually port our entire navigation setup here to this

140
00:10:32,190 --> 00:10:32,910
new logic.