As we're just discussing right now whenever we refresh the application we see the sign up screen for
a fraction of a second which is just not quite ideal.
So here's how we're going to fix this.
We're essentially going to go back to understanding this flow right here.
So when our application first starts up we want to check to see if there is a token until we actually
have an answer to that question.
We really don't want to show anything to the user whatsoever.
So in other words we don't want to show the sign up screen by default.
Instead we want to show kind of a loading screen of sorts or even just an empty screen.
And then once we have an actual answer to that question then we can decide to go to tracklist or over
to sign up one of the other.
So how are we going to show an empty screen.
Will it really just comes back to our app dot J.S. file.
So inside of app dot J.S. remember right now the first screen that shows up is the sign up screen and
that's only because it's essentially listed out first in sight of all these different navigators.
So we could instead just add in a new alternative screen to show by default right here and make that
the default screen that appears whenever the application first starts up.
Then inside of that screen component we can add in some code to do that try local sign in and inside
there we can really just not return any J.S. sex at all.
Or alternatively we could show a loading spinner or something like that.
And so we can make sure that we just have some kind of loading screen.
And until we understand whether or not we have a token we're not going to show the sign up screen or
the track list for that matter so let's create a new screen component inside of our screens directory.
The entire goal this thing is going to be to just answer that question and do not show anything until
we have an answer to it.
Okay.
So inside my screens directory I'm gonna make a new file called Resolve off screen Dot.
J.S. we could have just as easily called it something like loading screen or initial screen or something
like that.
I call that resolve off because essentially we're trying to resolve the user's current authentication
status.
So I think that this name makes a decent amount of sense at least to me.
OK.
So inside of here we'll show a react component but it's not going to really return any jazz sax or any
content.
So I'm going to first get some imports here.
We're going to import react use effect and use context brim react.
We're also going to get our context as off context from the context of context.
File then I'll make my component resolve off screen inside of here.
I don't only want to show any content whatsoever.
So remember if we ever have a component and we don't want it to show anything we can't return no again
if we wanted to we could alternatively return a spinner or something like that.
But even showing a spinner would be a little bit disorienting to a user because at the end of the day
we can resolve our authentication status in like a fraction of a second.
So if we showed a spinner on the screen it would still be a little bit disorienting to the user because
they would see that spinner for just like half a second and then it would go away.
So honestly I think that not showing anything from the resolve off screen kind of makes a lot of sense
OK.
Then inside of here we're going to do exactly what we're just doing inside of these sign up screen so
we're going to use use effect.
We're going to try to sign in locally so in other words check to see if we've got a token inside of
async storage when we call try local sign in.
Remember we've got the navigate function called inside there.
So as long as we just call try local sign in from this component it's going to essentially take care
of everything for us.
It'll put the token into our state object and then navigate to the appropriate screen.
So all we have to do is from inside of here is call that action function.
So we first have to get access to it.
That's why we imported use context and off context so I'll get my tri local sign in action function
room use context off context well then define use effect going to once again put in an empty array as
a second argument and then inside of here we will call tri local sign in.
And then finally let's do an export default resolve off screen
okay.
Let's save this now and then going to go back over to my sign up screen and clean up some of the code
around checking our authentication status so we had inside of here.
So it's no longer up to these sign up screen to figure out what the current authentication status is.
Instead it's all up to the resolve of the screen.
So inside of sign up screen I'm going to delete the U.S. fact I'm going to delete the try local sign
in and we can also delete the use effect import at the top as well OK so we can then save that file
and then finally we're going to make sure that by default whenever application first starts up we showed
the resolve off screen.
So to do so we can go back to app J.S. inside of here we can import resolve off screen from source screens
resolve off screen and then to make sure that we showed that component will add it to the very top of
our top level stack navigator so we could say resolve off is resolved.
Off screen remember we can alternatively throw this property right here anywhere inside this navigator
and then just throw in a second argument to our stack navigator with the defaults or initial root name
option.
That's another way we can approach this as well.
Right now we're just really relying on the fact that resolve authors listed first and that's why it's
can be shown up by default or display by default whenever the application first starts up.
So it's entirely possible that we might one day kind of like change the order of keys inside of here
and then we would back to you back to having the log inflow show by default.
So maybe adding in that initial root named property would be the best way to handle this.
Nonetheless let's just test it out like this for right now.
OK.
Let's save this and I can make sure that I can see my device so I can see the refresh and now we don't
have a flash of the log in screen or the succeeding thing.
This sign up screen anymore because by default in the application first starts up we're gonna show resolve
off that's completely empty.
So we see nothing until we very shortly later see the tracklist screen because that's what we're navigating
to.
So it looks like this is working out pretty well.
I'll try it out on Android and over here looks like I'm not signed up.
So let me authenticate really quickly I'll go to sign in and then use a real account very quickly
whoops.
Hit the wrong button there my mistake
sign in.
So now I'm authenticated.
I've got my token inside of async storage so I'll do a quick refresh and now when I come back in I'm
going to get kicked directly to the trackless screen.
Perfect.
All right.
So now if we ever want to get back to our authentication screen we need the ability to actually at blog
out.
So let's make sure that we very quickly take care of that account screen and give ourselves the ability
to log out of our application so we can still really test the entire full app case.
Let's take a quick pause right here and tackle the account screen in the next video.