So we work with the Stack Navigator.
Now, what about the draw?
The logic is exactly the same.
We create our shop.
Draw navigator here, but calling creates draw navigator, and just like the Stack Navigator, this
function wants no argument.
Instead will set up or draw navigation in a component based approach.
For that, I'll create a shop navigator here and this will be a react component.
Again, you could have that in a separate file.
I'll keep it all one file to have it side by side with the old code and in their.
We return shop drawer navigator, dot navigator, same logic as before.
It doesn't matter that it's a drawer.
And in there we now have two different screens which can be loaded through the navigator and react.
Navigation will automatically make sure that a navigator is created, that we can open it with the exact
same code we use before.
It will not have to adjust that.
So here we now have our shop drawer navigator dot screen.
And just before we give that screen a name here, we have two products, for example, and that name
will then automatically be used inside of the drawer.
Navigator, though you could also override all of that if you want to.
And we need a component that is loaded when we click on that link in The Navigator and here that's still
the product navigator.
So just as before.
We can use our STAC navigator's, even though they're now using this component based approach as components
that should be created as part of another navigator, in this case, as part of the draw navigator.
We can still point at our Stack Navigator's as components here because they are components this year.
This is a component and the same is true for all our navigators we create here.
They're all react components which hold their specific navigation logic as components.
And the overall components, like the Products Navigator here, can be used in a draw navigator.
So replicates this twice so that we can also add our orders here with the orders navigator and admin
here with the admin navigator and make sure you have no errors in your names because we're using them
all over the app and that logic won't need to be adjusted.
So if you mess up the names here, other parts of the app will not work.
OK, so now we got this draw navigator's set up and now what about the configuration?
Now there are two things we need to consider.
For one, we have to configuration here for the draw content.
And second, we want to configure our different screens like the products navigator or the orders navigator
to have their own icons in the drawer.
Now, let's start with the icons.
Previously, we set up that I can directly in the configuration of the Stack Navigator, which we wanted
to use in a drawer.
Now, with the component based approach, we don't do that anymore.
Instead, we can just grab this part here.
We're actually the entire object, which we previously set up on the Stack Navigator and go down to
our drawer and now here on this screen to which it belongs.
So in this case, it belongs to the admin navigator.
So here on the admin screen, we again pass our options, just as we did a second ago on the Stack Navigator.
So here we now pass to the options for this screen.
And this could be a normal component or as it is in this case, a component with our stack navigation,
logic and two options.
We pass an object and there we can reuse that object we use before.
So an object with a draw, I can key where we have our ionic buttons and so on.
So this all works just as before.
One small adjustment, however, we now get props here as well, fadin by reac navigation and these
props will have a color key instead of draw a config active tint color.
And the color will always be the right color because reac navigation behind the scenes will control
whatever disaster currently active screen or not.
And it will adjust the value stored in that color prop to be evenly highlighted, ordinal and highlighted
color.
So that's a tiny adjustment we have to make here.
Well, and with that, we can copy the logic from the other navigator's as well, like from the order's
navigator, let's grab this object here, which we had in its navigation options, go down to the draw,
to the orders screen at the options, key passengers object and comments back in.
And important, we now get props which will have that color key just like this.
And last but not least, let's, of course, also do that for the products screen for the Products Navigator.
Here we have this object.
Let's grab it.
Let's go down to our drawer navigator.
And here's our products screen set up the options.
Kiya passed it in and adjusted as I just showed it.
So now we have our screen specific configuration here, you could say.
Now, what about the draw overall?
Because previously in the app, with the old REACT navigation version, we actually had our draw and
we configure the act of 10 color and also the content of the draw.
Well, you can still do that with that new approach.
We go to our draw navigator.
So where we set up the overall navigator and we configure it via props just before it's all about components
and props.
So here we now, however, have a different naming, we no longer have a content options and content
component instead, and you can find dozens of little docs we now have draw content and draw content
options.
However, the values are exactly the same in the end.
So we can grab our content options object here.
And past is into draw content options here.
And comment that in.
And for the draw content, it's also almost the same, we just wrap this component here.
Up to here, kopi, this.
And pass this here into your content and comment this in, however, now two important things U.S. dispatch
is not allowed here.
You should do this outside of here.
So, for example, here in the shop, Navigator Neednt is nested component and in addition.
It's no longer draw items, but draw item list.
Which we also need to import.
At the top.
From reactivations draw.
So here we import draw item list.
With that, however, if I scroll down, this should now be working again and this should now be our
working drawer.
So we got the shop navigator, we got all these stacked navigators, what's left now is that switch
navigator, which basically renders ever our start up screen or the off screen or the shop screen or
the respective navigation stacks, I should say.
Well, that's what we'll work on next.