In this lesson we are going to add the login screen to our app.

This screen contains two inputs and a submit button.

We start by creating a LoginScreen.js file and copying the content from the screen that we already have.

• We change the text in <Header/> and remove the <Paragraph/> component completely since we don't need it here.

• We can leave the <Login/> button but we need to change its mode to contained so it will act as primary button.

export default function LoginScreen() {

  return (

    <Background>

      <Logo />

      <Header>Welcome.</Header>

      <Button mode="contained">Login</Button>

    </Background>

  );

}

• We need to export our screen in index.js file to use it in our Stack. Remember to change the name prop to not run into any errors while running the app.

export { default as LoginScreen } from "./LoginScreen";

<NavigationContainer>

  <Stack.Navigator

    initialRouteName="StartScreen"

    screenOptions={{

      headerShown: false,

    }}

  >

    <Stack.Screen name="StartScreen" component={StartScreen} />

    <Stack.Screen name="LoginScreen" component={LoginScreen} />

  </Stack.Navigator>

</NavigationContainer>

After this is done, we can run our app. Our current screen is StartScreen, created in the previous lesson. Right now the Login button does nothing because we didn't add the onPress method to it. Let's fix that.

As I mentioned in the lesson dedicated to react-navigation, each screen is provided with a prop called navigation. We can use it to navigate to LoginScreen.

<Button

  mode="outlined"

  onPress={() => {

    navigation.navigate("LoginScreen");

  }}

>

  Login

</Button>

Now, let's add inputs to our screen. Luckily for us, we already created a <TextInput/> component that we can use.