Design Eye-catching  Login Screen -React Native Tutorial

Design Eye-catching Login Screen -React Native Tutorial

Hello, Friends today I am starting a new React Native tutorial series with my this first post Design Eye-catching Login Screen in React Native. In this tutorial, we learn how to make a login screen step by step process.

Before starting this tutorial I want to share some instructions that if you are going to start your first project from this React Native tutorial and you have not done your development environment setup please go through this link for the same React Native Development Environment Setup. If you are done with your environment setup then let’s start the tutorial.

Project Explanation

In this project, we create a login screen in react native as we see in many apps for authentication. The following are some main basic components which we use in this app for designing the login screen.

  • TextInput – To get the user credential input like Username and Password.
  • Text – To create a login button view for authentication submission, to create a signup text view, and also to make a logo.

Create A New Project

Before Implementing the following code first create a new project open the command prompt => select your project location where you want to create application => then run this command => npx react-native init YourProjectName

After the successful compilation runs your application and implements the following steps.

Structure Of Code

The following image is showing the project structure. Here I have created a parent folder “src” to hold our all child folders and components. To store all of our application screens created another folder “screens” inside the src parent folder.

Packages Using in this Project

In this application, I am using the additional package “React Navigation” for navigation from one screen to another. All packages which are using in this application is given below

  "dependencies": {
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3"
  },

Create a Login Screen

Create a SignIn.js file inside the screens folder.

Ok, let’s start to write the code for the login screen. First, we create a basic React Native Class Component Template like this:

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View,TextInput} from 'react-native';

export default class SignIn extends React.Component {

  render() {
    return (
      <SafeAreaView style={styles.container}>
      </SafeAreaView>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#3a6979',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

After this now add the state properties to manage or handle our username and password input by the user.

constructor(props) {
    super(props);
    this.state = {
      username: "",
      password:""
    };
  }

Now we work on our main UI content like logo, text input, button, etc. Inside the SafeAreaView firstly change our status bar color using the “StatusBar” react-native component to make UI more attractive.

<StatusBar barStyle="light-content" backgroundColor="#3a6979" />

Use the “Text” component to create your application logo. Here you can also use the “Image” component to make an image icon logo.

<Text style={{color:'#13a187',fontSize:40,fontWeight:'bold'}}>TechSolPoint</Text>

To get the credential input from the user we create two text input field one for username and another for the password. Insert each field into a view to style this field properly.

 <View style={styles.inputView} >
          <TextInput  
            style={styles.inputText}
            placeholder="Username..." 
            placeholderTextColor = "#3a6979"
            onChangeText={text => this.setState({username:text})}/>
 </View>

 <View style={styles.inputView} >
          <TextInput  
            style={styles.inputText}
            placeholder="Password..." 
            placeholderTextColor="#3a6979"
            onChangeText={text => this.setState({password:text})}/>
 </View>

Add this following Code in StyleSheet to style the text input field 

 inputView:{
    width:"85%",
    backgroundColor:'rgba(82, 52, 52, 0.4)',
    borderRadius:25,
    height:50,
    marginBottom:10,
    marginTop:20,
    justifyContent:"center",
    padding:20
  },
  inputText:{
    height:50,
    color:"white"
  },

Login button is the most important part of the login screen to trigger the login action. So start to create a login button I am here using  “Text” and “TouchableOpacity” to design a login button you can normally use the “Button” component instead of this.

 <TouchableOpacity style={styles.loginBtn}>
          <Text style={{color:'#fff',fontWeight:'bold',fontSize:20}}>LOGIN</Text>
 </TouchableOpacity>

Lastly, add a Signup option. To make it clickable put the text inside the “TouchableOpacity”.

<TouchableOpacity>
          <Text style={{color:'#fff',fontSize:20,fontWeight:'bold'}}>Signup</Text>
</TouchableOpacity>

Complete Code of SignIn.js

import React from 'react';
import { SafeAreaView, StyleSheet, Text, View, Dimensions,TextInput, TouchableOpacity, StatusBar } from 'react-native';
const wid = Dimensions.get('window').width;
export default class SignIn extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      username: "",
      password:""
    };
  }

  render() {
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#3a6979" />
      <Text style={{color:'#13a187',fontSize:40,fontWeight:'bold'}}>TechSolPoint</Text>
      <View style={styles.inputView} >
          <TextInput  
            style={styles.inputText}
            placeholder="Username..." 
            placeholderTextColor = "#3a6979"
            onChangeText={text => this.setState({username:text})}/>
        </View>

        <View style={styles.inputView} >
          <TextInput  
            style={styles.inputText}
            placeholder="Password..." 
            placeholderTextColor="#3a6979"
            onChangeText={text => this.setState({password:text})}/>
        </View>

        <TouchableOpacity style={styles.loginBtn}>
          <Text style={{color:'#fff',fontWeight:'bold',fontSize:20}}>LOGIN</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={{color:'#fff',fontSize:20,fontWeight:'bold'}}>Signup</Text>
        </TouchableOpacity>

      </SafeAreaView>
    );
  }
  
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#3a6979',
    justifyContent: 'center',
    alignItems: 'center',
  },
  inputView:{
    width:"85%",
    backgroundColor:'rgba(82, 52, 52, 0.4)',
    borderRadius:25,
    height:50,
    marginBottom:10,
    marginTop:20,
    justifyContent:"center",
    padding:20
  },
  inputText:{
    height:50,
    color:"white"
  },
  loginBtn:{
    width:"85%",
    backgroundColor:"#13a187",
    borderRadius:25,
    height:50,
    alignItems:"center",
    justifyContent:"center",
    marginTop:40,
    marginBottom:10
  },
 
});

Complete Code of App.js

Here I am using ‘react-navigation’ and ‘react-navigation-stack’ to implement a navigation from App.js to SignIn screen when application launch.

import React from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SignIn from './src/screens/SignIn';

class App extends React.Component {
  render() {
    return (
      <SignIn/>
    );
  }
}

const AppNavigator = createStackNavigator(
  {
    First: { screen: SignIn },
  },
  {
    defaultNavigationOptions: {
      header: null
    }
  }
);


export default createAppContainer(AppNavigator);

Final Result Screenshot

login screen in react native tutorial

I hope this tutorial helpful for you and if any query and suggestion in your mind then feel free to inform us via comment.

This Post Has 2 Comments

  1. Saurya

    Really helpful post. I like the login screen, simple and cool

  2. Ronit

    you post are really interesting and helpful.

Leave a Reply