We've had a few longer guides leading up to this. So I want to give you a little bit of a break and so what we're going to be doing in this guide is we're going to add our auth loading screen to the routing engine and there's really only one thing I want you to focus on in this guide. And, that is working with the routing engine and react navigation and having the ability to work with standalone screens and stacks.

So let's open up our router file here and as if you remember, we have a create switch navigator which essentially allows us to group our navigation stacks into right now two separate groups. One of the groups is our auth stack, which is really at this moment just one screen and then the other one is our application stack. That is our main one. That is the one that's going to have all of the content. It's going to have our forms, it's going to have our feed, everything like that.

Now in the way that react navigation works is pretty cool in that you can have app stacks and stack navigators. You can have them work right alongside standalone screens. So the only reason you need to create an app stack is if you want to create a grouping of multiple types of screens. Now you may, your first question may be why do we have auth stack here with only one screen? and that's a great question. The main reason why I did it that way is I wanted to show you how I personally would build out an application like this. In a full application, the auth stack would have all of the screens that a user would see if they were not logged in.

So a great example would be this screen loads up and imagine that they have forgotten their password. That's a very common thing that you'd need to build out. You might have a link down here at the bottom that says, I forgot my password, can I reset it? And then you would have over here a reset password or request a new password screen and that would be inside of the auth stack. So that's why I separated them out.

Now the really neat thing that we can do is if we have a different type of screen, one that doesn't belong to a stack, we can still use it right here and that's what we're going to do in this guide. So I'm first going to import our auth loading screen and if you remember where it's at, I put it inside of the screens auth directory. So we can actually just copy this line here and I'm going to say this is our auth loading screen and then make sure that you update the path to the file.

router.tsx

import AuthLoadingScreen from "../screens/auth/AuthLoadingScreen";

And down below here, what I can do inside of create switch navigator, remember that that is a function that takes in a couple objects as arguments. And so the very first one is your list of all of the screens you want inside. So here I can say auth loading and then have that mapped to our auth loading screen.

Now, the other thing I want to do is I now want to make the auth loading screen our initial route name. So what this means is that instead of always going to the login screen or to our auth screen, now we're going to give our application the ability to have dynamic behavior. We're going to give it the ability to check to see is the user logged in. If so, then I want you to show them this one screen. If not show them this other screen.

router.tsx

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack
    },
    {
      initialRouteName: "AuthLoadingScreen"
    }
  )
);

So I'm going to hit save here and the way that you can test this out to see if it's working is by opening up the auth loading screen here and let's just put in a console log statement. So here I can say console log in say in check, log in, in the auth loading screen.

AuthLoadingScreen.tsx

console.log("In check login in the auth loading screen");

Okay, so I can hit save here and now if I open up the terminal, let me go clear that out there. Some a few warnings there. Now if I open up the simulator and hit refresh, sometimes this has been happening to me. I'm not sure if it's going to happen to you or not. But sometimes when I've been hitting refresh, it hasn't actually been doing anything. The way to fix that just quit out of the simulator and open up Google Chrome again and you can either run it again or open it back up on your phone. I think this is an issue that's happening just on this current version I'm on right now.

So I'm going to let that open up and open the simulator and you can see that that's working. It says in check login in the auth loading screen. So all of that's working.

And then if you open up visual studio code once again, what that is telling us to notice how the user now says a no, that's good because that means that this code's working. Remember we said that we want to set the current user to know if there is no login, if there is no token.

So the just one last refresher just because I know this is a lot, this is a lot of stuff that maybe you've never done before and so I want to make sure it's as clear as possible. So we're going to keep on going through it until it is. And so what's happening here is now our routing engine is saying instead of pointing to the auth stack, I want you to first look at this component, this auth loading component. There is no view, there's nothing to see there. All that we're doing is we're checking if the user is logged in. We first check to see is there a token on the device called memipedia secure token. If there is, awesome. We're going to do some stuff in here. But this isn't being triggered because we haven't set that token yet. So instead we're saying we want to make sure that the current user is cleared out and then also navigate them to that auth screen and all of that is working really nicely.

So great job if you're going through all of this and all of this is working for you. In the next guide, what we're going to do is we're going to actually add in the API call here. Now, it's not going to work yet because we're not setting this token anywhere, but it's still, if I were building this app, that's the next step I would follow is I create a API call and I would say, is this user working? Is this user logged in? And then from there we are going to still redirect down here after we've completed that step, the last thing we're going to do is we're going to be able to, inside of our auth component in our auth screen, we are going to come here and we're going to say when the user token, when we get it back, we're actually going to save that to the device. So when we save it to the device, when we get to this step, it's going to fall right in line here. It's going to be able to say, okay, yes, we do have that token. Now let's go call the server. Let's see if it's still valid.

Resources

• Source code