So let's work on porting our entire logic here in the App Navigator, we started with this dummy stack
here and that's nice, but ultimately not what we need.
Now it's up to you where you do that configuration.
But since we did it basically in the Shop Navigator file before, I will also keep on doing it there,
even with that new logic.
So what I'll do is an App Navigator.
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
here.
I'll leave the navigation container, though, and I'll read this import, though, ultimately will
change this a bit.
But now let's move on to Shop Navigator there.
First of all, we can delete this import from react.
Navigation will not need it.
Let's leave the rest for now, though.
Instead of that deleted import, we can import from attract navigation stack.
And also already from at drawer and from Stack, we imports create Stack Navigator from a drawer we
import creates drawer navigator.
Now we can scroll down and we can leave the default nav options here, actually, thankfully, the naming
and how you generally configure things and what you can configure did not really change just how you
apply.
The configuration changed.
And therefore, what definitely needs to change is this part here.
Our first Stack Navigator, I will for now duplicated and later deleted or commented out to have a side
by side comparison.
I will create a new constant which will name products Stack Navigator just so that we don't have a name
clash and that it's really obvious that this will hold a stack of pages, a stack of screens.
And we do that with create Stack Navigator with this function.
What I showed you before, this function takes no parameters anymore.
Instead, I will create a new constant here product navigator, so now we do have a name, but this
will be removed anyways and this is now a react component, a functional component.
And we could therefore also store it in a separate file just for this side by side comparison.
And because we had everything in this file before, I will now set up all these navigator components
with our navigation configuration here in this single file splitting it definitely is something you
could consider.
So here is our Products Navigator and there I will now return products.
Stack Navigator, Dot Navigator, as you learned, and in their products, Stack Navigator dot screen.
And we had three screens before, so I will replicate this two times.
So did we have three screens and there now we can configure them.
Let's assign a name to the first screen and that should be product overview.
Now the component that should be loaded there is our product overview screen component.
So basically what we mapped before as well.
Now for the second screen, the name is product detail, so what we had here and make sure you keep
those names so that the entire navigation logic you have in your app, because that doesn't have to
be changed so that this still works.
And here, the component that should be loaded when we want to reach that screen is the product detailed
screen component, just as we had it down there.
Let's reformat that.
And for the last screen, the name is Kaat, what we had here, and we want to go to the heart screen.
Just like this.
So now we set up this navigation stack with this new component based logic.
Now we can imported into the App Navigator and for dad, we just need to add an export keyword in front
of it so that this constant component gets exported here in this file.
And an App Navigator, we now don't import Shop Navigator, but we import the newly exported Products
Navigator.
We import that here and in our navigation container, we can now add the product navigator like this.
And we can get rid of that product or review screen import.
Now back to the Shop Navigator, let's have a look at those options next, the navigation options we
had here on this stack.
What do we do with that?
Well, we actually have two options here on our products, navigator, on the old navigator with the
old logic.
One is and this stack should have in the drawer, which we will add later.
The second are our default navigation options, which should be applied to all screens that are part
of this navigator.
And actually there then also is a third place where we configured things in the past, and that was
inside of the screens.
Let's have a look at our products or review screen ups in a shop folder there if we scroll down.
We had this navigation options property.
We added to the product's overview screen function object.
And that was a function where we configured things like the header title, but also what's on the left
and the right side of the header.
Now, with this new logic, you don't do that like this anymore.
Instead.
We can copy this entire.
Set up here, so all of that, we can copy it, we can comment it out here in the screen component and
go to the App Navigator component excuse me, to Shop Navigator component, where we set up our stack
navigation.
And now on the screen where we want to have those options, we can add a third Propp and S-T options,
property and two options.
You can pass exactly what you had in the component before, so you pass a function.
This is a function, right, which receives the NAF data.
Parameter and which then returns a configuration object, the concrete value for this parameter will
be fed in by react navigation and the configuration names we can set here, the things we can configure
haven't changed.
So we still can set up a header title, a header left.
So this all is exactly the same as you learn it.
It works in exactly the same way, thankfully.
Now we could do that here and Shop Navigator, but this, of course, would quickly become very, very
large if we had all the different screen specific configurations in here.
So it's actually not what I will do here.
Instead, I see two options.
One is that we actually do our set up off the products stack navigator's screen in the screen component.
The second is that we just keep our options there and that's the approach I will follow.
So back in Products Overview, I'll comment this back in.
But now in here, we no longer set this function here as a value for the navigation options prop, but
we simply export it as a constant.
A concern which we have to give a name and I'll name this screen options now, screen options, holsters,
function, and we export it by its name.
It does not clash with the component export because we do that with the default here.
So now we export this configuration function and then you shop navigator, we can do for imported.
So besides importing the products overview screen from that file, we can now also combine that with
a named import where we import the screen options function.
And then here.
Two options on this screen, I just pass a pointer at this function, don't execute it, just pointed
it, let's react navigation executed for you so that it can fit in the concrete value for this NAV data
parameter dysfunction once.
And with this, this screen is configured.
Now, if we save that, it clashes because we have this name clash down there, so in order to resolve
this, let's make sure we all support the other options.
Now, the draw specific option is something I'll have a look at later, once we added a draw for the
default navigation options.
The good news are we can still apply those.
We don't have to set up everything on a screen level if we have a shared configuration that affects
all screens of a navigator.
And how would you think we can set up such general options for all these free screens here?
Well, we set them up directly on the navigator there.
We also have a little screen options property.
So not named options, but screen options.
But these are the options which will be applied to every screen here and screen specific options will
be merged with these general options just as early in the course.
Now, here we pass our default nav options object, so this object up there, I just feed this as a
value to screen options and that's it.
Now we can comment about this product's navigator here and save everything.
Now, once we do that, we still can't see the result.
Because in this Shop Navigator file, we still got a lot of code that uses the old navigator or that
old navigator logic, and that is causing a problem here.
Now, in order to still see a result, I will temporarily comment this all out.
Just temporarily and safe again so that this rebuilds.
And you see, we now get an error.
Well, there is one thing we actually need to adjust in the product overview component in our screen
option steer Hadel left.
This now needs to be a function here which returns our Gests markup and does the same for header.
Right.
So we need to convert both into functions.
And you can simply do that by adding an empty parameter list.
And then the arrow here sidenote, you could accept the parameter here if you wanted to.
And that would be perhaps because this actually is now a react component to finding here.
A concrete value for props will be fed by react navigation and the values you can get from there can
be found in the official docs with this adjustment made if we now safety's.
It now restarts here.
And we now see that screen again now, definitely picking up our configuration, keep in mind, the
draw will not work because we haven't added or navigation yet.
So with all of that.
We learned how we can configure our components, our screens and the overall stack navigator with that
new logic, with that done, it's time to keep on porting.
Definitely feel free to do the next steps on your own and ports to screen specific options for the product
detail and the card screen.
And thereafter, we will move on to the next stack and then, of course, also soon to draw.