This video is available to students only

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 its mode to contained so it will act as primary button.

  • 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.

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.

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


This page is a preview of Creating a React Native Login

Start a new discussion. All notification go to the author.