React Native Login Screen Design

Abhishek Sharma
3 min readJan 30, 2021

--

In this post i am going to show you how to make login screen design using react native for both platforms android and ios. As we all know that in today’s world almost every app which are published in play store and app store have Login and Register screens. Both screens are very important for building mobile apps. So today we are focusing on making login screen design.

lets start!

step 1:- Lets create a react native project with name DemoApp. open a terminal of your mac and type a command:-

react-native init DemoApp

This command will create a project in your home directory with name DemoApp. It will take some time to create a project depending on your internet speed.

Now open the project in your editor. I am using visual studio code. once you opened the project it seems like this:-

This is the basic structure of a newly created react native project.

step 2:- create new javascript file with name LoginScreen.

Now open file LoginScreen and paste the code: —

import React, {Component} from ‘react’

import {SafeAreaView, Text} from ‘react-native’

export default class LoginScreen extends Component {

constructor(props) {

super(props);

this.state = {

};

}

render() {

return (

<SafeAreaView style={{ flex: 1, alignItems: ‘center’, justifyContent: ‘center’}}>

<Text>Login</Text>

</SafeAreaView>

)

}

}

step 3:- open App.js file and replace the existing code with this code:-

import React, {Component} from ‘react’

import LoginScreen from ‘./LoginScreen’

export default class App extends Component {

render() {

return (

<LoginScreen />

)

}

}

Now our basic setup is done.

Go to VS Code Terminal -> click on New Terminal

and run the command: — react-native run-ios

If you want to run the project in android then use this command: —

react-native run-android

After running the app you can see your login screen in your simulator or in your real device:-

lets make login screen design little bit more attractive.

step 4:- Open your file LoginScreen.js and paste the code inside render function: —

<SafeAreaView style={{ flex: 1, justifyContent: ‘center’}}>

<View style={styles.input}>

<TextInput

style={{ flex: 1, height: 40, color: ‘black’ }}

placeholder={“Email”}

placeholderTextColor={“#808080”}

underlineColorAndroid=”transparent”

autoCapitalize=’none’

/>

</View>

<View style={styles.input}>

<TextInput

style={{ flex: 1, height: 40, color: ‘black’ }}

placeholder={“Password”}

placeholderTextColor={“#808080”}

underlineColorAndroid=”transparent”

secureTextEntry={true}

/>

</View>

<TouchableOpacity style={{ height: 40, padding: 5, margin: 10, backgroundColor: ‘#4E261A’, borderRadius: 16, alignItems: ‘center’, justifyContent: ‘center’ }}>

<Text style={{ color: ‘white’, fontSize: 17, fontWeight: ‘bold’, marginLeft: 5, marginRight: 5 }}>Login</Text>

</TouchableOpacity>

</SafeAreaView>

and add this style to the bottom of LoginScreen file.

const styles = StyleSheet.create({

input: {

shadowOffset: {

width: 0,

height: 1,

},

shadowOpacity: 0.25,

shadowRadius: 1,

elevation: 1,

marginTop: 10,

marginLeft: 10,

marginRight: 10,

height: 40,

paddingLeft: 8,

paddingRight: 8,

padding: 2,

borderRadius: 10,

backgroundColor: “#FFFFFF”,

textAlign: ‘left’,

borderWidth: 1,

borderColor: “#808080”,

…Platform.select({

ios: {

marginBottom: 10

}

})

},

});

and also update this import at the top of LoginScreen file.

import {SafeAreaView, Text, View, TextInput, StyleSheet, TouchableOpacity, Platform} from ‘react-native’

Now again run the command: — react-native run-ios

and you can see the login screen in your simulator and in your real device.

My updated login screen.

As you see with react native how easily we can build designs.

that’s it for this post. In my next post i will show how you can implement the login functionality and how to get the email and password values entered by the users.

--

--

Abhishek Sharma
Abhishek Sharma

Written by Abhishek Sharma

Software Engineer and Entrepreneur

No responses yet