1
00:00:02,320 --> 00:00:09,460
So let's work on porting our entire logic here in the App Navigator, we started with this dummy stack

2
00:00:09,460 --> 00:00:13,300
here and that's nice, but ultimately not what we need.

3
00:00:13,860 --> 00:00:16,530
Now it's up to you where you do that configuration.

4
00:00:16,540 --> 00:00:22,300
But since we did it basically in the Shop Navigator file before, I will also keep on doing it there,

5
00:00:22,300 --> 00:00:23,630
even with that new logic.

6
00:00:24,310 --> 00:00:26,460
So what I'll do is an App Navigator.

7
00:00:26,500 --> 00:00:34,190
I'll actually get rid of that my stack here and I'll get rid of this import and I'll get rid of this

8
00:00:34,190 --> 00:00:34,440
here.

9
00:00:34,450 --> 00:00:41,320
I'll leave the navigation container, though, and I'll read this import, though, ultimately will

10
00:00:41,320 --> 00:00:42,150
change this a bit.

11
00:00:42,700 --> 00:00:45,280
But now let's move on to Shop Navigator there.

12
00:00:45,280 --> 00:00:48,570
First of all, we can delete this import from react.

13
00:00:48,670 --> 00:00:50,500
Navigation will not need it.

14
00:00:51,070 --> 00:00:53,500
Let's leave the rest for now, though.

15
00:00:54,880 --> 00:01:00,010
Instead of that deleted import, we can import from attract navigation stack.

16
00:01:00,910 --> 00:01:09,730
And also already from at drawer and from Stack, we imports create Stack Navigator from a drawer we

17
00:01:09,730 --> 00:01:11,410
import creates drawer navigator.

18
00:01:12,670 --> 00:01:19,890
Now we can scroll down and we can leave the default nav options here, actually, thankfully, the naming

19
00:01:20,080 --> 00:01:25,810
and how you generally configure things and what you can configure did not really change just how you

20
00:01:25,810 --> 00:01:26,460
apply.

21
00:01:26,470 --> 00:01:27,790
The configuration changed.

22
00:01:28,510 --> 00:01:32,690
And therefore, what definitely needs to change is this part here.

23
00:01:32,740 --> 00:01:41,860
Our first Stack Navigator, I will for now duplicated and later deleted or commented out to have a side

24
00:01:41,860 --> 00:01:42,940
by side comparison.

25
00:01:43,600 --> 00:01:49,810
I will create a new constant which will name products Stack Navigator just so that we don't have a name

26
00:01:49,810 --> 00:01:54,850
clash and that it's really obvious that this will hold a stack of pages, a stack of screens.

27
00:01:55,510 --> 00:02:00,080
And we do that with create Stack Navigator with this function.

28
00:02:00,100 --> 00:02:04,480
What I showed you before, this function takes no parameters anymore.

29
00:02:05,480 --> 00:02:12,890
Instead, I will create a new constant here product navigator, so now we do have a name, but this

30
00:02:12,890 --> 00:02:18,740
will be removed anyways and this is now a react component, a functional component.

31
00:02:18,740 --> 00:02:24,020
And we could therefore also store it in a separate file just for this side by side comparison.

32
00:02:24,020 --> 00:02:29,330
And because we had everything in this file before, I will now set up all these navigator components

33
00:02:29,330 --> 00:02:34,820
with our navigation configuration here in this single file splitting it definitely is something you

34
00:02:34,820 --> 00:02:35,510
could consider.

35
00:02:36,530 --> 00:02:41,000
So here is our Products Navigator and there I will now return products.

36
00:02:41,000 --> 00:02:49,430
Stack Navigator, Dot Navigator, as you learned, and in their products, Stack Navigator dot screen.

37
00:02:49,940 --> 00:02:54,830
And we had three screens before, so I will replicate this two times.

38
00:02:54,830 --> 00:02:58,760
So did we have three screens and there now we can configure them.

39
00:02:59,330 --> 00:03:03,130
Let's assign a name to the first screen and that should be product overview.

40
00:03:03,920 --> 00:03:09,090
Now the component that should be loaded there is our product overview screen component.

41
00:03:09,170 --> 00:03:11,840
So basically what we mapped before as well.

42
00:03:13,550 --> 00:03:21,260
Now for the second screen, the name is product detail, so what we had here and make sure you keep

43
00:03:21,260 --> 00:03:26,750
those names so that the entire navigation logic you have in your app, because that doesn't have to

44
00:03:26,750 --> 00:03:28,970
be changed so that this still works.

45
00:03:29,900 --> 00:03:36,260
And here, the component that should be loaded when we want to reach that screen is the product detailed

46
00:03:36,260 --> 00:03:38,740
screen component, just as we had it down there.

47
00:03:39,350 --> 00:03:40,400
Let's reformat that.

48
00:03:41,340 --> 00:03:50,010
And for the last screen, the name is Kaat, what we had here, and we want to go to the heart screen.

49
00:03:50,880 --> 00:03:51,660
Just like this.

50
00:03:52,610 --> 00:03:57,390
So now we set up this navigation stack with this new component based logic.

51
00:03:57,950 --> 00:04:03,650
Now we can imported into the App Navigator and for dad, we just need to add an export keyword in front

52
00:04:03,650 --> 00:04:08,480
of it so that this constant component gets exported here in this file.

53
00:04:08,990 --> 00:04:18,770
And an App Navigator, we now don't import Shop Navigator, but we import the newly exported Products

54
00:04:18,770 --> 00:04:19,340
Navigator.

55
00:04:20,720 --> 00:04:27,620
We import that here and in our navigation container, we can now add the product navigator like this.

56
00:04:29,010 --> 00:04:31,770
And we can get rid of that product or review screen import.

57
00:04:33,770 --> 00:04:40,550
Now back to the Shop Navigator, let's have a look at those options next, the navigation options we

58
00:04:40,550 --> 00:04:41,950
had here on this stack.

59
00:04:42,290 --> 00:04:43,730
What do we do with that?

60
00:04:45,100 --> 00:04:51,790
Well, we actually have two options here on our products, navigator, on the old navigator with the

61
00:04:51,790 --> 00:04:52,660
old logic.

62
00:04:53,200 --> 00:04:59,770
One is and this stack should have in the drawer, which we will add later.

63
00:05:00,340 --> 00:05:05,950
The second are our default navigation options, which should be applied to all screens that are part

64
00:05:06,130 --> 00:05:07,150
of this navigator.

65
00:05:07,540 --> 00:05:12,850
And actually there then also is a third place where we configured things in the past, and that was

66
00:05:12,850 --> 00:05:14,020
inside of the screens.

67
00:05:14,260 --> 00:05:21,200
Let's have a look at our products or review screen ups in a shop folder there if we scroll down.

68
00:05:21,700 --> 00:05:24,940
We had this navigation options property.

69
00:05:24,940 --> 00:05:28,150
We added to the product's overview screen function object.

70
00:05:28,660 --> 00:05:33,760
And that was a function where we configured things like the header title, but also what's on the left

71
00:05:33,760 --> 00:05:34,990
and the right side of the header.

72
00:05:35,920 --> 00:05:40,090
Now, with this new logic, you don't do that like this anymore.

73
00:05:40,570 --> 00:05:41,260
Instead.

74
00:05:42,160 --> 00:05:44,470
We can copy this entire.

75
00:05:45,600 --> 00:05:52,590
Set up here, so all of that, we can copy it, we can comment it out here in the screen component and

76
00:05:52,590 --> 00:05:58,170
go to the App Navigator component excuse me, to Shop Navigator component, where we set up our stack

77
00:05:58,170 --> 00:05:58,800
navigation.

78
00:05:59,100 --> 00:06:06,210
And now on the screen where we want to have those options, we can add a third Propp and S-T options,

79
00:06:06,210 --> 00:06:08,760
property and two options.

80
00:06:08,760 --> 00:06:15,370
You can pass exactly what you had in the component before, so you pass a function.

81
00:06:15,480 --> 00:06:18,660
This is a function, right, which receives the NAF data.

82
00:06:21,310 --> 00:06:27,340
Parameter and which then returns a configuration object, the concrete value for this parameter will

83
00:06:27,340 --> 00:06:34,480
be fed in by react navigation and the configuration names we can set here, the things we can configure

84
00:06:34,480 --> 00:06:35,590
haven't changed.

85
00:06:35,600 --> 00:06:38,390
So we still can set up a header title, a header left.

86
00:06:38,500 --> 00:06:41,310
So this all is exactly the same as you learn it.

87
00:06:41,310 --> 00:06:44,020
It works in exactly the same way, thankfully.

88
00:06:44,980 --> 00:06:51,070
Now we could do that here and Shop Navigator, but this, of course, would quickly become very, very

89
00:06:51,100 --> 00:06:57,300
large if we had all the different screen specific configurations in here.

90
00:06:57,580 --> 00:06:59,670
So it's actually not what I will do here.

91
00:07:00,370 --> 00:07:02,590
Instead, I see two options.

92
00:07:03,130 --> 00:07:09,630
One is that we actually do our set up off the products stack navigator's screen in the screen component.

93
00:07:10,150 --> 00:07:14,240
The second is that we just keep our options there and that's the approach I will follow.

94
00:07:14,650 --> 00:07:17,650
So back in Products Overview, I'll comment this back in.

95
00:07:19,820 --> 00:07:27,050
But now in here, we no longer set this function here as a value for the navigation options prop, but

96
00:07:27,050 --> 00:07:31,160
we simply export it as a constant.

97
00:07:32,210 --> 00:07:40,730
A concern which we have to give a name and I'll name this screen options now, screen options, holsters,

98
00:07:40,730 --> 00:07:43,400
function, and we export it by its name.

99
00:07:43,760 --> 00:07:48,200
It does not clash with the component export because we do that with the default here.

100
00:07:49,350 --> 00:07:56,670
So now we export this configuration function and then you shop navigator, we can do for imported.

101
00:07:57,120 --> 00:08:03,450
So besides importing the products overview screen from that file, we can now also combine that with

102
00:08:03,450 --> 00:08:08,300
a named import where we import the screen options function.

103
00:08:08,940 --> 00:08:09,780
And then here.

104
00:08:10,710 --> 00:08:17,580
Two options on this screen, I just pass a pointer at this function, don't execute it, just pointed

105
00:08:17,580 --> 00:08:23,970
it, let's react navigation executed for you so that it can fit in the concrete value for this NAV data

106
00:08:23,970 --> 00:08:25,500
parameter dysfunction once.

107
00:08:27,080 --> 00:08:31,100
And with this, this screen is configured.

108
00:08:32,770 --> 00:08:38,050
Now, if we save that, it clashes because we have this name clash down there, so in order to resolve

109
00:08:38,050 --> 00:08:41,030
this, let's make sure we all support the other options.

110
00:08:41,410 --> 00:08:47,020
Now, the draw specific option is something I'll have a look at later, once we added a draw for the

111
00:08:47,020 --> 00:08:48,610
default navigation options.

112
00:08:48,820 --> 00:08:51,310
The good news are we can still apply those.

113
00:08:51,520 --> 00:08:56,800
We don't have to set up everything on a screen level if we have a shared configuration that affects

114
00:08:56,800 --> 00:08:58,540
all screens of a navigator.

115
00:08:58,960 --> 00:09:04,390
And how would you think we can set up such general options for all these free screens here?

116
00:09:05,230 --> 00:09:08,690
Well, we set them up directly on the navigator there.

117
00:09:09,250 --> 00:09:13,360
We also have a little screen options property.

118
00:09:13,360 --> 00:09:15,370
So not named options, but screen options.

119
00:09:15,610 --> 00:09:21,310
But these are the options which will be applied to every screen here and screen specific options will

120
00:09:21,310 --> 00:09:24,850
be merged with these general options just as early in the course.

121
00:09:25,770 --> 00:09:32,940
Now, here we pass our default nav options object, so this object up there, I just feed this as a

122
00:09:32,940 --> 00:09:35,650
value to screen options and that's it.

123
00:09:36,300 --> 00:09:40,290
Now we can comment about this product's navigator here and save everything.

124
00:09:41,280 --> 00:09:44,250
Now, once we do that, we still can't see the result.

125
00:09:45,290 --> 00:09:51,950
Because in this Shop Navigator file, we still got a lot of code that uses the old navigator or that

126
00:09:51,950 --> 00:09:54,630
old navigator logic, and that is causing a problem here.

127
00:09:55,370 --> 00:09:59,960
Now, in order to still see a result, I will temporarily comment this all out.

128
00:10:00,900 --> 00:10:04,920
Just temporarily and safe again so that this rebuilds.

129
00:10:06,150 --> 00:10:07,930
And you see, we now get an error.

130
00:10:08,670 --> 00:10:14,310
Well, there is one thing we actually need to adjust in the product overview component in our screen

131
00:10:14,310 --> 00:10:16,470
option steer Hadel left.

132
00:10:16,830 --> 00:10:24,180
This now needs to be a function here which returns our Gests markup and does the same for header.

133
00:10:24,180 --> 00:10:24,620
Right.

134
00:10:25,020 --> 00:10:27,510
So we need to convert both into functions.

135
00:10:27,630 --> 00:10:30,300
And you can simply do that by adding an empty parameter list.

136
00:10:30,300 --> 00:10:34,740
And then the arrow here sidenote, you could accept the parameter here if you wanted to.

137
00:10:35,040 --> 00:10:41,040
And that would be perhaps because this actually is now a react component to finding here.

138
00:10:41,250 --> 00:10:47,190
A concrete value for props will be fed by react navigation and the values you can get from there can

139
00:10:47,190 --> 00:10:51,480
be found in the official docs with this adjustment made if we now safety's.

140
00:10:52,670 --> 00:10:54,320
It now restarts here.

141
00:10:56,050 --> 00:11:02,530
And we now see that screen again now, definitely picking up our configuration, keep in mind, the

142
00:11:02,530 --> 00:11:06,130
draw will not work because we haven't added or navigation yet.

143
00:11:07,380 --> 00:11:09,750
So with all of that.

144
00:11:10,720 --> 00:11:17,290
We learned how we can configure our components, our screens and the overall stack navigator with that

145
00:11:17,290 --> 00:11:21,580
new logic, with that done, it's time to keep on porting.

146
00:11:21,760 --> 00:11:28,450
Definitely feel free to do the next steps on your own and ports to screen specific options for the product

147
00:11:28,450 --> 00:11:30,040
detail and the card screen.

148
00:11:30,340 --> 00:11:35,200
And thereafter, we will move on to the next stack and then, of course, also soon to draw.