So we're making good progress, we migrated all our navigators or almost all.
Now what about the switch navigator, NTR off navigator here?
Well, we deti off Navigator for sure.
It's a stack navigator which is responsible for the off screen.
And we.
Well, what about the switch navigator.
Well we won't need to switch Navigator anymore.
There is no at risk navigation switch package or anything like that, but I'll come back to that when
we need it.
So for now, let's create our off navigator or our off stack navigator here by calling.
Navigator by calling create.
Stack Navigator and export our constant off navigator here, which again is a react component, just
as before we return off Stack Navigator, Dot Navigator, and in there we have our off Stack Navigator
dot screen and the name of the screen is off as we have it here.
And the component we need is off screen.
So that's that now we got the devil nap options here, so the screen options on the navigator should
be the default knap options.
And for these screen specific options, let's have a look at the off screen.
And if we scroll to the bottom, we have some options here as well.
So let's export our screen options here just as we did it before.
Let's export it and then go to the Shop Navigator here.
And on that screen, let's set options two of the screen options, which we now all have to add as an
import at the very top from off screen, we import screen options as off screen options.
So let's start now, we also got the Start-Up screen, but if we have a closer look in the past, we
just pointed at that directly from inside our Switch Navigator, which leaves us with just one question.
What about this switch navigator?
Now, in the past, this would have been the first screen.
You see one you loaded because it's the top, most first screen in this configuration.
And then we had logic in that old navigation container we built earlier where we checked whether we
are authenticated.
And if that was not true, if we were not authenticated, we would redirect a user to that off screen.
Now, when would we reach the shop's screen?
Well, for that, let's have a look at the Start-Up screen.
There we see that we tried authenticating and here we would go to the shop screen eventually when automatically
logging us in succeeded.
That was the logic we wrote there.
Now, that's still some logic.
That makes a lot of sense.
We just need to adjust that for the new navigation package.
In the end, what we can see here is that any Start-Up screen we're trying to lock the user in, and
if we can't find user data stored on the device, we go to the off page.
If you find data, but the token is expired, we're not there.
We go to the off page.
If we do succeed with everything, though, and we have a valid token, then we instead go to the shop
page and we dispatch an action where we authenticate the user, which changes data and our redux store,
which sets the token and so on.
Initially, that token in our store is null.
Now.
We can use that what if we get rid of all these navigate calls here?
So we can delete them or just comment them out as I'm doing it here, so we get rid of all these navigation
actions instead, what happens if we return here?
Well, if we return here, then dysfunction execution stops.
Indiana, right?
It stops.
And what we definitely don't do is we definitely don't dispatch does action.
So we definitely don't set the token to anything.
It's still null.
That's always happening here unless we make it to the bottom, in which case we do have a token.
We dispatched us and to token is not null thereafter in our store.
So that token which we manage with redacts is ever null or it holds a value.
Now I want to adjust the redox store a bit the off part of it and your producer and I'll add a new piece
of data to this state, and that is the.
Did try the log in key, you can name it however you want and I'll set it to false initially here I
want to store whether we tried logging the user in or not.
Now, if we authenticate, so if we dispatch an action with that identifier, then I will set did try
to log in to true.
I will also add a new action here in actions of.
And for that, I'll add a new identifier up here, which will name set did try or A-L for all the login
set did try Al and create an action creator for that set.
Did try a.l.
Which takes no arguments and where I didn't return my action object, where the type is just set, did
try Al you could all to put it at the bottom of the file.
Doesn't matter.
Now, why am I doing that?
You'll see it in the second.
Let's go back to the reducers you off reducer and handle this in case the case set did trial.
Make sure you all to import this from actions off.
Now, any year we return a new piece of state where I copied the old state and where I said Detroit
ought to log into true.
So the token might still be not just set this to true.
Now, my idea is that I dispatched this action here in the Start-Up screen in all scenarios where we
previously went to the off screen.
So where we tried logging in, but where we didn't succeed.
So you're.
I will.
Dispatch.
Set did try Al, so make sure you access this on you all factions just like this and do it in these
two cases where we previously navigated to the off screen.
So now we have this new field and redux.
And why am I doing that?
Why is this helpful?
Well, because with react navigation five, there is no switch navigator anymore because we don't need
it anymore.
Since we now manage our entire route, set up wire components, we can just dynamically render components
to have them have an effect or not render them so in the App Navigator.
Where I render my Products Navigator, it's now time to add all these navigators be configured and then
decide which navigator should be rendered when.
So from the Shop Navigator, I now actually want to import.
This shop navigator here, which I'll export as a constant again.
And then here, an App Navigator, I import Shop Navigator, that's our draw navigator.
Keep that in mind.
And that's what I want to render here.
Shop Navigator.
So this is basically what I want to render if we are locked in.
That's our shop, right?
Obviously, that is what we mapped to this shop key in a switch navigator.
Now, we also need off Navigator and the Start-Up screen.
So here, an app navigator.
I'll import the off navigator.
And these are the only two navigators I need to import here.
Hence, you could remove the export statement on all the other navigators here in our Shop Navigator
file.
But what we also need to import into App Navigator is the Start-Up screen now, so let's import Start-Up
screen from.
Screens start up screen.
And now here we have to shop navigator, we have the off navigator as an alternative and we also have
the Start-Up screen.
Now will only render one of the free.
And and this is where we can now reuse redux, I'll copy use selector, because besides information
about the token, I'm also interested in learning about the did try all and field, which I added to
the off state here.
This new field added, I now get access to this here in my App Navigator file and stored in a ditch.
Try a log in constant.
Now I know I want to render to shop if is all this true and this is how we can do that.
If we are authenticated.
I always render to shop.
I don't care about anything else.
Now, I want to render the off navigator if is all of its faults, and we did try to log in yet because
if we haven't tried logging in automatically, then I actually want to render the Start-Up screen.
So if we're not authenticated and we did not try.
Our Autoblog, and yet, well, then we don't know whether the user might be authenticated or not.
So in that case, I want to render the Start-Up screen.
Now, I quickly want to pause there and make sure we're all on the same page and we all understand why
we're now using this instead of the switch navigator.
Now, first of all, there is no switch navigator anymore.
In fact, navigation five.
But why was it removed?
Well, since we now configure everything with components, we can use regular react tools to ever render
a component or not.
If you're not thinking about navigation, but a normal screen where you maybe have a text which you
only want to show conditionally, then you would use some state.
And then in jazz X, you would only sometimes render the text with a ternary expression, for example.
And we're doing the same here with our route configuration, with our screen configurations here, the
screen configuration setup we have here, our different navigators.
And to start up screen, these are indeed all just things that we should be aware of to bring something
onto the screen and react.
Navigation behind the scenes does the heavy lifting of interpreting our configuration and making sure
that the correct component gets rendered on the screen.
Now, if we use is off and did try to log in to control, which navigator is actually render able by
react by using such a ternary expression, then we ensure that if for example, is off is not true,
there is no way that Shop Navigator screens can be brought to the screen.
Why?
Because the Shop Navigator component, which holds our shop related route configuration, our screen
configuration, that component is only rendered if it's office.
True.
So there's no way for a shop related screen to be rendered to the screen if if off is false, really
make that comparison to normal text elements or normal boxes on a screen which you render conditionally.
We're doing the same here, but not with boxes and text, but instead with our entire navigation stack.
That's what we do here.
And with all that, if we save this and we rerun this on Android.
We end up on the off screen, and if I reload this.
And the rebels.
We again end up there.
Now, if I do try to log in here.
I now actually get a problem here, I get an error that navigate with a payload of shop was not handled.
Well, this now makes sense, if you think about it, we got no switch navigator anymore.
Instead, we just control which navigator we want to render, under which circumstances.
So why are we getting this?
Can you figure it out and fix it on your own?
Otherwise, we'll do it together.
We'll fix it together in the next lecture.