Tutorials React JS Creating Login Screen in React Native

Creating Login Screen in React Native

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

Total
19
Shares
guest
10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Yasir
Yasir
5 years ago

why did you use StatusBar ? also how to get the values from input when button clicked

Emircan Arıkök
Emircan Arıkök
4 years ago

lot of bugs….

Code Monkey
Code Monkey
4 years ago

I’m completely new to React (and honestly to JS for the most part as well) so there’s a couple of bugs, that I’m not sure are attributable to versioning changes.

1) The most noticeable one is that there is no formContainer Style which is referenced in Login.js – either add one (as a direct clone of the ‘container’ or just replace the reference with the ‘container’ style).

2) The items in the form (i.e. the textInputs and button) will appear squished in, and it took a while to figure out what allows the flex box to expand. In whichever container you used in (1) above add the following properties to the syles:
alignItems: ‘stretch’
flex:1

The idea is that the parent container for any component should be able to enclosed the component (obviously).

The other issues are just minor tag closures (which I can’t recall off hand)

Hiral Kahar
Hiral Kahar
4 years ago

Yes, i also didn’t get login form. I am new in react native. So please help to out of it

Adrian Albu
Adrian Albu
4 years ago

do you test the steps you propose? 🙂

Pmr
Pmr
3 years ago

Thank you !!!!

Fongoh Tayong
Fongoh Tayong
3 years ago

Link to source code on github will be appreciated.

nbcvnxcmnvb
nbcvnxcmnvb
3 years ago

heh!

Bob
Bob
3 years ago

You should not publish an article when you have not followed the steps you have provided. This is missing some very simple steps.

Mati
Mati
2 years ago

AWESOME!!!!!!

Previous Post
Bootstrap4 Tutorials

Creating Bootstrap4 Fixed NavBar with Shadow on Scroll

Next Post

10 Micro Metrics for Your Performance Reports

By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
10
0
Would love your thoughts, please comment.x
()
x