Good evening everyone and welcome into my new article React Native Login Screen Tutorial.
Where we are going to explore the process of making a login screen in react native.


let’s get started

Concept UI

Most modern apps login screen, will usually have a Logo image or text.
Input texts for the email or username and password.
A login Button to submit the authentication.
And complementary actions such as forgot password, and Signup.

Our final result will look like this.

React Native Login Screen Tutorial final result

Let’s Get Started

Let’s get started by creating a new react native project either using Expo or React Native CLI.
With both approaches, you will usually get a starting code like this.

React Native Login Screen Tutorial Start screen
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I will get started by removing the Text view inside our root view in the render Method.

We will int into a React Native stateful component by adding a simple state properties to hold the email and password of from our UI

  state={
    email:"",
    password:""
  }

One this I will change on the root view container style is the background, everything else looks good.

  container: {
    flex: 1,
    backgroundColor: '#003f5c',
    alignItems: 'center',
    justifyContent: 'center',
  }

For the UI side let’s start by working on the Logo Text.

It’s a simple TextView, you can also add an image there. Both options are perfect.

<View style={styles.inputView} >

Logo text style

  logo:{
    fontWeight:"bold",
    fontSize:50,
    color:"#fb5b5a",
    marginBottom:40
  }

For the textInput fields, I am going to make a view then add them inside,
This way we can have styling separate.

And also room to add icons or indicators etc, I am not adding any for this tutorial for simplicity.

Each input item will look like this.

        <View style={styles.inputView} >
          <TextInput  
            style={styles.inputText}
            placeholder="Email..." 
            placeholderTextColor="#003f5c"
            onChangeText={text => this.setState({email:text})}/>
        </View>

React native securetextentry for passwords

For the Password textInput add the prop secureTextEntry to have the stars hiding the password instead of plain text.
Also, change the onChangeText property to save the text to password state property instead of email

Add this style to the input view

  inputView:{
    width:"80%",
    backgroundColor:"#465881",
    borderRadius:25,
    height:50,
    marginBottom:20,
    justifyContent:"center",
    padding:20
  }

and the textInput style 

  inputText:{
    height:50,
    color:"white"
  }

Now lets add the Forgot password View,

It’s a simple Text inside a button to have the press functionality, you cannot add bare text.

        <TouchableOpacity>
          <Text style={styles.forgot}>Forgot Password?</Text>
        </TouchableOpacity>

Forgot text style 

  forgot:{
    color:"white",
    fontSize:11
  }

Same thing goes for the signup text. just changing the text size

        <TouchableOpacity>
          <Text style={styles.loginText}>Signup</Text>
        </TouchableOpacity>

And finally the Login Button.

        <TouchableOpacity style={styles.loginBtn}>
          <Text style={styles.loginText}>LOGIN</Text>
        </TouchableOpacity>

It’s style is a bit different and mostly centralized around the button.

  loginBtn:{
    width:"80%",
    backgroundColor:"#fb5b5a",
    borderRadius:25,
    height:50,
    alignItems:"center",
    justifyContent:"center",
    marginTop:40,
    marginBottom:10
  },

Now out app looks like this.

React Native Login Screen Tutorial final result

And there you have it a simple elegant React Native Login Screen tutorial.

 I have prepared both a github project and an Expo.io if you would like to work on the project or test it.