I think one of the most natural next steps is what we're gonna cover in this new section which is authentication. So this is gonna cover quite a bit over these next few guides. We're going to continue to reinforce our knowledge on how to build out screens and components and how to style them. We're going to then start to get into how we can work with outside services.

So in order to create an account and to log into an app, that applications can't be a standalone entity. It has to make communication calls out to outside APIs. So you're gonna learn how to do that in React Native. You're gonna learn how to work with secure tokens and how to confirm if a user is who they really say they are and so you're gonna be learning quite a bit.

In this guide, we're gonna get started by creating our new screens, so we're gonna start to create some authentication screens. Let's get started on that, I'm going to open up the side here in the file system and let's go to our screens directory. I'm gonna right click on that, click New File and I'm gonna say auth/AuthScreen and then from there, I'll say .tsx

and the reason for that is because this authentication screen is gonna handle multiple types of authentication. We wanna give the ability to either have a user log in or to register and create an account. So it's gonna handle a couple different processes for us. In this guide though, we're really just gonna create the component and then add it to the routing system.

So now that you've created that, let's import React from react just like normal and then let's import a few basic things. So we're gonna import the View, Text and let's do TouchableOpacity components from react-native, and then from there, let's just say export default.

AuthScreen.tsx

import React from "react";
import {View, TouchableOpacity} from "react-native";

export default

Now, this is going to take some props in because we need to work with links and navigation and those kind of things but for right now, we're not even gonna worry about that, we'll add all of that in later, for now, let's just create a view. So we're gonna say return and then parens, make sure you don't do curly brackets here, and then let's create our View component inside of that, let's do text and we're just gonna say something like Login and then as a placeholder, I just want to put this here but we're eventually gonna switch it up as a placeholder. We'll say something like, and make sure you wrap this inside of a Text tag, say Already have an account? Register.

AuthScreen.tsx

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";

export default () => {
  return (
    <View>
      <Text>Login</Text>

      <TouchableOpacity>
        <Text>Already have an account? Register</Text>
      </TouchableOpacity>
    </View>
  );
};

So that's gonna be the start of how we're eventually going to allow users if they don't have an account to click Register which is pretty much the same type of feature you'd see on an application like Facebook or Twitter or anything like that. Okay, so we've created our AuthScreen. It's very basic. And right now, we don't have any way of getting to it.

So let's go to the router here and let's come here and this is where we're going to extend what we've been doing up until this point. So up until this point, when we add a new screen, we added it to the AppStack but these authentication screens are different. We don't wanna give users access to the AppStack until they have proven that they are authenticated. So we're gonna create another StackNavigator here.

So what we're gonna do is create a AuthStack, so short for authentication. It's gonna be another StackNavigator and then we're gonna add our new screen to that. So let's come down here and let's give ourselves a little bit of room just so it's easier to see. And now we're gonna create AuthStack and then from there, we're going to create a StackNavigator which, if you remember, is a function and it's a function that takes in a set of objects.

So the first object we're gonna give is we're just gonna call this our AuthScreen so just call it Auth and then this is gonna be mapped to our AuthScreen. Now, we need to import this, that's why we're getting an error right here. So let's come back up and right below all of these, we'll say import our AuthScreen from ../screens/auth. If you remember, you put it in that Auth directory and now we have this AuthScreen. So now we should not have an error. So we have our AuthStack.

router.tsx

import React from "react";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import FeedScreen from "../screens/FeedScreen";
import SearchScreen from "../screens/SearchScreen";
import AccountScreen from "../screens/AccountScreen";
import PostFormScreen from "../screens/PostFormScreen";
import AuthScreen from "../screens/auth/AuthScreen";

import HeaderLogo from "../components/images/HeaderLogo";

import { dark } from "../styles/colors";

const AuthStack = createStackNavigator(
  {
    Auth: AuthScreen
  }
)

Everything there should be working. Now, I wanna show you a couple customizations that we can do 'cause we have a little bit more time here. So we have our AuthScreen. I want the initial route so initial, and actually, let's see, initialRouteName and the reason why I'm getting an error, I hate those little windows that pop up, we need to mimic what we have here.

Notice the second argument. The first argument is the object, when the object with the mapping between the route name and the component that actually deals with that screen. And then after the second argument is another object and these are all of the options in the parameters. So I wasn't getting this initialRouteName because I needed to add an actual object, so let me delete that and use curly brackets and now I should get it. There we go, initialRouteName and for this, we just want this to be Auth, just like that.

router.tsx

const AuthStack = createStackNavigator(
  {
    Auth: AuthScreen
  },
  {
    initialRouteName: "Auth"
  }
)

And you can see I'm really just following the same example that we did in the AppStack but hopefully, this is good because this is kinda giving you some reinforcement learning on what we're doing and hopefully now it's a little bit less fuzzy on how the navigator works. For the initialRouteName, we're going to just say Auth and then I wanna show you something else that's kinda cool.

So we can customize the top navigation bar. I don't want that logo up at the very top of all of these authentication screens. So I'm gonna say defaultNavigationOptions and inside of here, I'm just gonna say header is gonna be null,

router.tsx

const AuthStack = createStackNavigator(
  {
    Auth: AuthScreen
  },
  {
    initialRouteName: "Auth",
    defaultNavigationOptions: {
      header: null
    }
  }
);

and so what that's gonna do is inside of our AppStack, by default, each of these screens are always going to have this type of set of navigation option. So it's gonna have those header logos and any options we put in there it's gonna have.

But in our AuthStack, this is gonna be different. Here, it's not gonna have any header whatsoever so that's a really neat way of being able to customize different layouts right inside of the application.

With all of that in place, now let's come down here and we want to add Auth to our AppContainer. So right after where it says App: AppStack, I wanna say Auth and that's going to be our AuthStack

router.tsx

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

Now, just to test this out, we're eventually gonna extend this even further but just to test it out, let's just say that we want our AuthStack to be the initialRouteName so I'm gonna hit save here and let's see if what we need to do, if we come to the simulator and hit Refresh and there you go. So that's actually, sometimes the auto save, whenever you are doing that, it doesn't actually go and reconfigure the routing, it's more of a quick refresh. Many times you'll see you make a change like that, you need to come to the simulator and hit Command + R which is gonna reload it. If you are using your phone, then you can just quit out of the Expo app, open it up again and it should be working.

So we have a little bit of a warning here. This is not an error. Any time you see yellow, it's not an error, it's just a warning. We'll take a look at that in a second but the important thing to see is up here at the top is we have our log in and it has all those text options and if you wanna see it a little bit more, we can add some styles to the View. So I can say style equals and let's just give it a marginTop. We're eventually gonna add all of our own custom styles. We'll just say marginTop: 100 and you can see all of that's working.

So with that, let's actually click on this warning just to see what it's telling us. It says Warning. Deprecation in navigationOptions. Header null will be removed in a future version. Use header shown false instead.

Okay, that's a really helpful warning. I can tell you from experience, about a decade, 15-ish years ago, warnings were not this good. They didn't tell you the code to write. They just told you your code wasn't working which was never really fun. So let's open up the router and let's just fix that right now.

So I'm gonna come over here. It says change that to say header shown is false. So we can just come over here and I'm gonna click out of this. So header shown is false, and change that to false.

router.tsx

InitialRouteName: "Auth",
defaultNavigationOptions: {
  headerShown: false
}

Hit Save and let's see? Yes, our warning is gone. So all of that is working beautifully.

So as you can see, we've built an entire, in just a few minutes, we've built an entire new section of our application. We've given the ability to have multiple AppStacks. We now have an authentication stack that is gonna control all of the authentication screens that we're gonna be building out and this is completely separate now from the application stack and you're gonna see, in not too long, how we're gonna update this workflow so it's gonna switch between all of them quite seamlessly.

Resources

• Source code