StackTips

Creating Login Screen in React Native

satish_kumar avtar

Written by

Satish,  21 min read,  3.85K views, updated on Sept. 17, 2023

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

In this article, we will show you how to create a Login Screen using React-Native that will work for both iOS and Android Platform.

Software Prerequisites

This example is developed in MacOS. Before you begin, make sure you have all the software prerequisites are installed on your development machine.

  • You need ‘Homebrew’ package management software to get all other dependency packages. Usually all modern macOS are preinstalled with home-brew. By any chance, if you don’t have it on your machine, install it using following command. Learn more from official Homebrew website here.
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • Install node.js if not installed already. To check if it is installed paste the following command in your terminal window.
$ node -v

If not installed, the following command will install the latest node version.

$ brew install node
  • Now we will install ‘Watchman’. Though it is strictly not required, this will make our development productive. Watchman is a tool by provided by Facebook, used for watching changes in the filesystem.
brew install watchman
  • Install React Native command line interface
$ npm install -g react-native-cli
  • Run the following command to cross check React-native version.
$ react-native -v
  • Check you have the latest SDK of iOS and Android available in your system.Download and install if you don’t have it already.
  • Make sure you have installed Visual Studio Code IDE, and relevant Plugins for React-Naive. Refer our beginners guide for more information on the Visual Studio Code IDE plugin installation.

Creating new React Native project

Now, we are ready to go by creating a new project by name DemoLogin via Terminal or iTerm, where we are using iTerm throughout in this article.

Open Terminal/iTerm

$ ~ mkdir ReactNativeApp
$ ~ cd ReactNativeApp
$ ReactNativeApp react-native init DemoLogin
$ DemoLogin Code .

Command Code . should open the project in VS code, if it’s not opening we need to configure the Path as below:

  • Launch VS Code.
  • Open the Command Palette (⇧⌘P) and type shell command to find the Shell Command: Install ‘code’ command in PATH command.

  • Restart the terminal for the new $PATH value to take effect. You’ll be able to type code . in any folder to start editing files in that folder.
  • Open index.ios.js delete all the code inside render function, and also remove the snippet inside the const styles. Anyways we are going to create everything form scratch.

Now let’s create a proper folder structure by creating new folder’s of required components, as of now we need a Login component and logo image to display on login screen src -> components -> images and Login as shown below.

Creating Login Component

Let’s create Login Component by creating new file inside Login Folder which we have created and name it as Login.js. Open Login.js and press Command Palette (⇧⌘P) and type ‘Change Language Mode’ and press 'enter', next type 'JavaScript React'

And type rnc for creating ‘React Native Class Component Template’

Replace 'MyClass' with 'Login' and save the file.

Next, Let’s import logo image to the ‘images’ folder which we created initially, You can just right click and Reveal in finder, Copy Paste the logo image. In this article we are using our StackTip logo. the final UI should look similar to the below image:

Let’s start creating UI of the LoginScreen, open 'Login.js' inside container view tag let’s add two more view containers and name them as 'loginContainer' and 'formContainer' and also set the styles as shown below

<View style={styles.container}>
        <View style={styles.loginContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} />
         </View>

            <View style={styles.formContainer}>
                   <LoginForm />
            </View>
       </View>

// define your styles
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#2c3e50',
    },
    loginContainer:{
        alignItems: 'center',
        flexGrow: 1,
        justifyContent: 'center'
    },
    logo: {
        position: 'absolute',
        width: 300,
        height: 100
    }

Now go to index.ios.js and import Login below import statement from react-native

import Login from './src/components/Login/Login';

And initialise the Login component inside render function, overall it’s should look something like this

import React, { Component } from 'react';
import { AppRegistry,StyleSheet,Text ,View} from 'react-native';
//import Login Component 
import Login from './src/components/Login/Login';

export default class DemoLogin extends Component {
  render() {
    return (
     <Login />
    );
  }
}

AppRegistry.registerComponent('DemoLogin', () => DemoLogin);

Let’s compile and check weather we have zero compilation error and logo image rendering properly as expected. We can compile in two ways one is via iTerm and another via VS Code Editor.

To compile via iTerm paste the following command, make sure your inside project folder.

react-native run-ios

To compile via VS Code Editor, open debug editor(⇧⌘D) and select Debug iOS in dropdown and click on run. If it compile successfully you should find something like

Next let’s create a form component for LoginScreen which contains two textfield(Email and Password) and Login Button. Create new file inside Login folder and name it as LoginForm.js and follow the same steps for creating component which we did for Login Component above and type rnc, replace MyClass with LoginForm.

Let’s create a TextFiled’s for Email and Password and a LoginButton, we should import TextInput inside and TouchableOpacity for LoginButton inside react-native.

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

Inside View container tag paste the following snippet, which contains properties for Textfield like keyboardType, returnKeyType, placeholder, placeholderTextColor ,onSubmitEditing, secureTextEntry for secure password. For Login button we can use either react-native Button component or TouchableOpacity, we will use TouchableOpacity in this article.

<TextInput style = {styles.input} 
               autoCapitalize="none" 
               onSubmitEditing={() => this.passwordInput.focus()} 
               autoCorrect={false} 
               keyboardType='email-address' 
               returnKeyType="next" 
               placeholder='Email or Mobile Num' 
               placeholderTextColor='rgba(225,225,225,0.7)'/>

<TextInput style = {styles.input}   
              returnKeyType="go" 
              ref={(input)=> this.passwordInput = input} 
              placeholder='Password' 
              placeholderTextColor='rgba(225,225,225,0.7)' 
              secureTextEntry/>

<TouchableOpacity style={styles.buttonContainer} 
                     onPress={onButtonPress}>
             <Text  style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity> 
// define your styles
const styles = StyleSheet.create({
    container: {
     padding: 20
    },
    input:{
        height: 40,
        backgroundColor: 'rgba(225,225,225,0.2)',
        marginBottom: 10,
        padding: 10,
        color: '#fff'
    },
    buttonContainer:{
        backgroundColor: '#2980b6',
        paddingVertical: 15
    },
    buttonText:{
        color: '#fff',
        textAlign: 'center',
        fontWeight: '700'
    }

Now we will import this Loginform component in Login.js, open Login.js file and paste the following line above class Login extends Component

import LoginForm from './LoginForm';

And initialise Loginform inside view formContainer tag,

 <View style={styles.formContainer}>
             <LoginForm />
  </View>

Compile and check everything is working fine as expected, and should look like

One thing we haven’t taken care is when you tap on Email or Password, the keyboard will overlay on the TextField as below

People who are form iOS background will know the pain to handle this use case in Native UITextfield, this can be achieved easily in react native by KeyboardAvoidingView. Let’s replace the view tag of container with keyboardavoidingview and set the behaviors as 'Padding' as shown below

class Login extends Component {
    render() {
        return (
        <KeyboardAvoidingView behavior="padding" style={styles.container}>

                <View style={styles.loginContainer}>
                    <Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo-dark-bg.png')} />
                  
                   </View>
               <View style={styles.formContainer}>
                   <LoginForm />
               </View>
           </KeyboardAvoidingView>
        );
    }
}

Now compile and check the magic happening on your simulator ?

if you want to check in Android we need to copy paste the contents form index.ios.js to index.android.js, that’s it…! this will work as champ..!

Cheers we ready with Login module, and can find the source here

Happy Coding..!

satish_kumar avtar

Satish

I am a self-driven software professional from Bangalore who lives with a desire to set new examples, something that can create a unique signature of my own. I strive to become a better programmer.

Related posts

Let’s be friends!

🙌 Stay connected with us on social media for the latest updates, exclusive content, and more. Follow us now and be part of the conversation!