So we spent quite some time on migrating this to react navigation five now, and maybe it looks a bit
overwhelming right now.
So let me sum up the key changes we made here and the key changes.
The key difference is react navigation five introduced.
The biggest change is how we set up our screen configuration.
Instead of having this registry like approach, we now use components to set up our configuration.
But the pattern here is actually quite simple.
You always create a navigator that could be a stack navigator, a draw navigator or also a tap navigator.
And then you use that navigator.
Does Navigator a component here as a route component for this set of screens that belongs to this navigator?
The screens are then nested components in there and dare you provide a name and a component that should
be loaded for that screen.
Now, when it comes to navigating, you still navigate with the navigation prop and then the navigate
function by identifying the screen by name, so that does not change at all.
You also still pass Perrin's as before.
The only important thing here or the one thing you should keep in mind is that the name you use here,
of course, should be the name you also use here when you set up your screens.
So that's the biggest change that you set up your configuration as components.
Ultimately, you then can still Nestea different navigators into each other as we're doing it here where
we have to draw a navigator, which also has STAC navigators as screens.
That also doesn't change.
It just looks different now.
And what changed is where you configure things, screen wide configuration options.
So options that affect all screens of a navigator are set up directly on the navigator component with
the screen options.
Prop and screen specific configuration is set up with the options prop on the screen component.
Now where you manage that configuration, if you do it all in one big file or as we're doing it here,
if you're doing it in the screen and you don't just export it so that you can use it when setting up
the components is up to you.
Now, that's all you need to keep in mind there.
One thing that did change because of that is how you handle authentication or related cases.
You don't have to switch navigator anymore.
Instead, you control which navigators should be rendered by react and what's not rendered can't be
effective, can't do anything.
So if we don't render to Shop Navigator because we're not authenticate it, then there is no way a shop
screen can be loaded.
That's how we now control which screens are accessible here at the example of authentication.
Also keeping order login in mind.
So that's something where you have to switch to a new mental model.
This is much more reactive than what we had to use before, though.
And then we have one other big or important change and that is how we extract Perrin's.
And when we need Perrin's, we extract Perens on this new route.
Propp with the parents key.
The parents key can be undefined if there are no parents received.
And this component and parents should now really only be used to get data from component A to component
B, so from screen to screen B, hackie work arounds as we needed to use them before in the added product
screen are not needed anymore.
If you needed to use Perm's to get data from inside to component into your screen options, you don't
need to do that anymore.
Instead, what you do now is you use the new set options function, which you can call directly on your
navigation prop.
Here it is.
So we call set options on this navigation prop and then we can dynamically adjust the navigation options
from inside the component.
These are the key changes we had to make here and the key things that changed.
Now, as always, the official talks are your friend.
If you want to read about that again, if you want to dive into some other cases, which we haven't
covered here, for example, if you want to learn how to work with TAPS, we're not doing this here.
But the approach is very similar.
You do it with a component based configuration, with a navigator and screens, and then the official
docs are a really great place to dive into all the check out the announcement post for REAC Navigation
five and the upgrade guide, which is also linked there.
You find all these resources also attached to this lecture.
And with that, it's up to you whether you want to use react navigation three or four or if you want
to switch to five or later.
Once we have new versions, it's up to you.
The majority of projects out there in the wild will certainly still use version of three and four because
these versions have been around for so long, new projects might switch to where you have five, but
might also still use the older version.
So I would argue that it's important to know both kinds of navigation.
If you're working on your own project on your own, I would recommend that you switch to react navigation
five right from the start.
But if you like four or three batter, that's perfectly fine as well.
React navigation three and four is fully stable and all the will be maintained and updated in the future
by the react navigation team.
So it's not going anywhere.
It's not insecure to use it and it's up to you which version you want to use.