The majority of our files don't need to change, what we will need to change, though, is what's happening
in the navigation files, in the navigation folder, in abcess.
You might remember rendering the navigation container here.
And the navigation container is just a custom component here where we in the end have our logic for
checking whether the user is authenticated and then we render to Shop Navigator, which is our route
navigator created here with React navigation.
And that is where things have to change now.
Now, let's start with the navigation container.
We won't need this code here anymore where we manually navigate somewhere else if the user is authenticated,
because you will see later that this will now be handled differently with this component based configuration.
So you can delete use of fact here.
Keep is off here, though.
You can delete the ref here, however, and also delete that there.
And when it comes to the imports here, we don't need the two hooks here anymore and we also don't need
this import anymore.
So we just have the shop navigator left.
And that's also not really something we need here anymore.
We're not adding a shop navigator as a component like this, where we then refer to the overall configuration
from the Shop Navigator file, because that overall configuration is, of course, all set up with that
old logic of having that global register like configuration, which is simply not working anymore with
Riak Navigation five.
Instead, we now need to migrate all of that to that new approach to this component based approach.
And to do that, I want to start quite simple.
In the navigation container, I will set up a new Stack Navigator, which is just a dummy navigator
for now.
So did you see how it generally works before we then later will actually well apply this to our real
application?
For that, let's say the import here from at react navigation slash native, and from there we need
to import the navigation.
The navigation container now that can be confusing because our own component here is all the named navigation
container.
So to avoid confusion here, I will rename our own component here to App Navigator or whatever you want
to name it like.
So I will rename it here.
And also to avoid confusion, even though it's not technically required in the app component.
An app.
Yes, I will.
Imported as App Navigator.
I will rename the file to App Navigator and I will import from App Navigator here in the app component.
So adjust the import path to include that new filename.
And then here I render App Navigator.
Now I just made these name changes to avoid confusion.
The more important part happens inside of that App Navigator, which previously was our navigation container.
Now we're importing navigation container from React Native.
But that will be a different component than what we built in the past.
It just shared the same name, which is why I renamed it.
More important than this navigation container for the moment is that we import something from attract
navigation stack and this is now a package which doesn't exist, which we haven't installed yet.
So let's stop this process again.
And with be installed Ashtar safe, let's install at react navigation logs stack.
So npm install Dashty safe at REAC navigation slash stack.
This will install us the stack navigation logic and we can also install another package already because
we'll need it later and that's at risk navigation draw which will later give us to draw based navigation
which will also need.
So let's wait for these two installation commands to finish.
And thereafter would then start we can bring up this expo server again.
So now that we installed react navigation stack, we can import something from it and that something
as did create Stack Navigator, now create Stack Navigator is a function we we already know, right
in Shop Navigator, which still uses the old reac navigation.
We also import to create Stack Navigator from navigation, or if you were using version four of this
package from a separate package.
But we also had create Stack Navigator in there and create a draw navigator and so on.
Now we used to create Stack Navigator to create our configuration, set up our navigation registry for
this part of our application.
You could say so for the products overview of the product detail and the card screen, which we put
together into one stack.
And then we had multiple such stacks to compose them together in our draw navigator, which we ultimately
then combined with the off screen in the Switch Navigator.
Now back to our App Navigator, what do we do with create Stack Navigator here?
It now works differently now we use it to create a new component with it, and I will name it my stack.
The name is totally up to you, but you simply call creates a stack navigator like this and you're done.
And this is now a huge change.
You now don't pass any object to create Stack Navigator to configure it.
Instead, it is a function that doesn't want an object.
It is a function that needs no object.
So what does it do then, what is my stack?
My stack is now a react component and we use it as such here in the App Navigator, to be precise,
we need to wrap all navigation logic with the navigation container component, which we're importing
from react navigation native.
You can think of that navigation container component basically as the component version of the app container,
which we created with create app container.
In the old setup right there.
We had to wrap our finished navigator with create our container.
Now we have to wrap our to be done component based navigation setup with navigation container.
So in here we now set up our logic when it comes to which pages we want to be able to load.
And here we now use my stack as a react component, but not like this, but instead here we need the
DOT navigator component.
So what my stack actually is, is it's an object with a navigator property and the value stored in that
property is now a component.
So now we can create that component and between the opening and closing tax of this component, we now
put basically the different screens.
We want to be part of that stack.
So what we previously hear in Shop Navigator Hat, inside of this object, we passed to create Stack
Navigator, this map of screen components and their names.
That's what we're now setting up here between this opening and closing.
You could therefore think that what we do is we add the products overview screen component, right?
This is one of our components.
We would add an import, which we haven't done here because this is wrong.
But you could think that we do this.
Well, almost.
This would certainly be the screen we want to have as part of this navigator, but it wouldn't have
a name.
Now we need a name so that we can navigate to it, for example, so that we can trigger a navigation
somewhere in our application.
That's why we have a name here as well on the old setup.
So instead we do something different.
We again use my stack, this object up there, and now a second property, which it has the screen property,
just like the navigator property.
The screen property also holds a react component and hence we can render it like this.
This is now a component which allows us to define a screen that should be part of that Stack Navigator
here.
And we configure it with help of props now because we're working with a component here.
So configuration works with props, just as it's always the case.
When we work with components to give this screen a name, we add a name Propp, and now we can use that
name we use here products overview so we can add this name and to let react navigation to know which
component to load when we target this name.
When we do that with a navigation action, for example, we add a second prop, the component prop,
and this should hold a pointer at the component we want to load when we want to go to this screen with
this name.
So for this, I'm going to import.
Products overview screen here from our screens folder to shop subfolder and then products overview screen.
So now we do need it and I passed is here now important.
We don't create the component here.
We just point at it.
We just use its name, which is exported from that file.
And with this we now have our first little stack set up here.
Now let's comment about this import from Shop Navigator.
We don't need it any more at the moment.
Let's save everything and launched this on Android, let's say.
And when you do that, it builds the JavaScript bundle and opens this up on the Android device.
And what you'll see is our product overview screen.
Of course, it looks a bit different.
Of course, it's missing the header buttons.
It's missing the entire header configuration.
The title is all the wrong, but that makes sense because we're now not using the old navigator where
we had all this configuration, but the new one.
And this is just to prove that it works and how it works.
Now with this knowledge in mind.
Let's now leave this tiny example here and let's actually port our entire navigation setup here to this
new logic.