Creating the login screen
Creating the login screen
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 itsmode
tocontained
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 ourStack
. Remember to change thename
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.
Loading...