React-Native Login Screen

Beware we're going to use many custom components.

Today, we'll design a basic login screen to get comfortable with basic and advanced RN components and a few checks to go with it.

Things we'll cover:

We'll add following things to our screen:

• logo
• TextFields
• Password Field with password icon
• Ombre Button
• Forgot Password

Additionally we'll see how to:

• Change TextFields style on active and viceversa
• Check if Fields are empty of filled
• Pop login screen from stack so user can't go back to it.
• Navigate to other home screen.
• Set login token so next timer user get backs to your app they don't see login screen AGAIN.

We should have something like this by end:

Okay let's get coding:

First go ahead and make a new file in your Screens folder and name it LoginScreen.js. If YDK what screen folder is go ahead and read RN hierarchy and make sure you start coding clean.

It's efficient to use functional components for separate screens, so we're gonna declare our function in our file after some basic imports:

import React, { Component } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
function LoginScreen() 
{
const [validity, setValidity] = React.useState(true);
const [email, setEmail] = React.useState();
const [password, setPassword] = React.useState();
return(
<View style={{flex:1, backgroundColor: 'white',
alignItems: 'center',justifyContent: 'center', }}>
//all your design goes here
<View>)

}
export default LoginScreen;
 

We defined a function and declared some states to handle our inputs and their validity. Furthermore we returned a simple view which later will display all it's content in center of screen.

<Image
style={styles.imageStyle}
source={require('images/RN.png')}
/>

First we're going to display our logo or any such thing on top of our login screen, we'll just add Image component and pass our image to it, you'll see I've used absolute path in our image source you can read further about it here or you can just use relative path like '../assets/images/RN.png'

<View style={styles.textViewStyle}>
<Text style={styles.welcomeText}>
Welcome Back! Log in to your account
</Text>
</View>

A simple welcome message. Now we can get to basic thing that is TextInputs, if you want onfocus and onBlur effects on text inputs you can make a custom component for that, just look into it to save some length here

TextInput import and use it like so:

<TextInput
onChangeText={(value) => setEmail(value)}
focus={true}
style={{ marginTop: 20 }}
placeholder={String.EMAIL} />
<TextInput
onChangeText={(value) => setPassword(value)}
placeholder={String.PASSWORD}
secure={true}
style={{ marginTop: 20 }}
/>

We called custom component and passed it some prop according to our needs and we're good to go.

Now to add an Ombre Button

<OmbreButton text={String.LOGIN} style={{ marginTop: 28, marginBottom: 10 }} onPress={handleClick} />

To add error message on invalidity or mismatch:

{
!validity &&
< Text style={{
width: '85%',
fontFamily: Font.INTER_SEMIBOLD, fontSize: FontSize.VERY_SMALL, color: Color.ERROR_RED, marginTop: '2%'
}}>Invalid Credentials</Text>
}

We'll check our state if it's updated by button and contains false we'll show our error message.

<TouchableOpacity
activeOpacity={0.5}
onPress={() => navigation.navigate('ResetPwd')}>
<Text style={styles.forgetPassword}>Forgot Password</Text>
</TouchableOpacity>

And to top it off we'll add Forgot Password Text and onClick of it you can navigate to Reset Password screen.

Now to handle click of login button:

const handleClick = () => {
if (!(/\S/.test(email)) || email === undefined)
 setValidity(false)
}
//you can call apis and check if credentials are correct or display an error
const profileData = {
name: 'Swair AQ',
designation: 'Graphics',
url: 'https://pickaface.net/gallery/avatar/Benjohnsone54fbec7a167c5.png',
};
AsyncStorage.setItem('UserDetails', JSON.stringify(profileData));

You can set user information in async storage to use throughout app or do any such functionalities.

AsyncStorage.setItem('Login', '1');

Than we'll set our login token to true/1 so, we can check it next time before pushing our Login screen to stack, for further information, read this.

navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [{
name: 'HomeScreen',
},],}) );

And at the end we'll reset our stack navigator to pop login screen and set main screen as Home Screen instead of login so user can never navigate back to Login screen before loggin' out.

Here's you screen stylesheet:

const styles= 
StyleSheet.create({
logoImage: {
flex: 1,alignItems: 'center',justifyContent: 'center',
},
imageStyle: {
width: 100, height: 100, marginTop: 110.39,
},
textViewStyle: {
width: 300, height: 20, justifyContent: 'center', alignSelf: 'center', alignContent: 'center', marginTop: 86.9, marginRight: 16,
},
welcomeText: {
fontFamily: Font.INTER_MEDIUM, fontSize: 16, color: '#707070', textAlign: 'left',
},
inputText: {
width: 312, height: 49, marginTop: 20, marginLeft: 28,
marginRight: 28,
},
forgetPassword: {
width: 130, height: 21, marginTop: 20, textAlign: 'center',
fontFamily: Font.INTER_MEDIUM, color: '#4285CD',
},
})

Phew, that was a long one but I hope you understood something. If you don't understand or find any troubles following please comment down below so we can figure it together.