React Native Login Screen Example Code

Every mobile app will contain Login/Registration pages to registered users.

In this React Native Login Example code we are going to learn how to use ReactNative to create a mobile layouts.

Let's get started

Project setup

To create this Login example i have used VisualStudioCode IDE.
Let's open IDE and open terminal

To create a RecatNative project Run below command.

react-native init LoginScreens

This will create a ReactNative application
It will install all necessary react node modules for the project

In this Example i am using react native linear gradient to set gradient effect to the buttons.

To add react native linear gradient tun below commands

Add it to your project
First, install it with

npm install react-native-linear-gradient --save

Then we can try to link the project automatically:

$ react-native link react-native-linear-gradient

iOS Run

npm install react-native-linear-gradient --save

Then either:

Cocoapods
add the following line to your Podfile:

pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'

or:

Manually
Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-linear-gradient and add BVLinearGradient.xcodeproj.

Add libBVLinearGradient.a to Build Phases -> Link Binary With Libraries (Screenshot 1) (Screenshot 2).
Click on BVLinearGradient.xcodeproj in Libraries and go the Build Settings tab. Double click the text to the right of Header Search Paths and verify that it has $(SRCROOT)/../react-native/React - if it isn’t, then add it. This is so XCode is able to find the headers that the BVLinearGradient source files are referring to by pointing to the header files installed within the react-native node_modules directory.

Then:

Whenever you want to use it within React code now you can:
import LinearGradient from 'react-native-linear-gradient';
If you’re having trouble, you can point your package.json at github to see if the issue has been fixed. Simply change the dependency

"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",

to get the data right from github instead of npm and then npm install

For instance the podspec file does not contain the right data (author attributes etc…) in npm while it does in the github repo.

Android Run

npm install react-native-linear-gradient --save

Then:

in android/settings.gradle

include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

in android/app/build.gradle add:

dependencies {
...
implementation project(':react-native-linear-gradient')
}

and finally, in

android/app/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java for react-native < 0.29, or
android/app/src/main/java/com/{YOUR_APP_NAME}/MainApplication.java for react-native >= 0.29 add:
//...
import com.BV.LinearGradient.LinearGradientPackage; // <--- This!
//...
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new LinearGradientPackage() // <---- and This!
);
}

Let's update Login.js with below code

import React, {Component} from 'react';

import {

View,

TextInput,

Text,

ScrollView,

StyleSheet,

Image,

TouchableOpacity,

Alert,

} from 'react-native';

import LinearGradient from 'react-native-linear-gradient';

export default class LoginPage extends Component {

state = {

username: '',

password: '',

};

render() {

return (

colors={['#2ECC71', '#28B463']}

style={loginStyle.container}>

source={require('../images/login-logo.png')}

style={{

width: 120,

height: 120,

borderRadius: 300,

alignSelf: 'center',

}}

placeholder={'Mobile Number'}

style={loginStyle.textinput}

returnKeyType={'next'}

onChangeText={value => this.setState({username: value})}

onSubmitEditing={() => this.refs.secondTextInput.focus()}

keyboardType={'number-pad'}

maxLength={10}

ref="secondTextInput"

placeholder={'Password'}

secureTextEntry={true}

style={loginStyle.textinput}

onChangeText={value => this.setState({password: value})}

returnKeyType={'done'}

colors={['#17202A', '#2E4053']}

style={{

alignItems: 'center',

borderRadius: 30,

marginTop: 40,

}}>

onPress={() => {

const number = this.state.username;

const password = this.state.password;

if (number.length < 10) {

Alert.alert('Please enter valid mobile number');

return;

}

if (password.length < 6) {

Alert.alert('Password should be minimum 6 characters');

return;

}

Alert.alert(this.state.username + ' ' + this.state.password);

}}

style={{

width: '100%',

alignItems: 'center',

padding: 4,

borderRadius: 30,

}}>

style={{

color: 'white',

fontWeight: 'bold',

fontSize: 20,

}}>

onPress={() => {}}

style={{

width: '100%',

alignItems: 'center',

padding: 4,

marginTop: 30,

borderRadius: 30,

}}>

style={{

color: 'white',

fontWeight: 'bold',

fontSize: 18,

}}>

New User ?{' '}

);

}

const loginStyle = StyleSheet.create({

container: {

flex: 1,

flexDirection: 'column',

padding: 16,

textinput: {

borderColor: '#273746',

borderWidth: 1,

height: 40,

borderRadius: 30,

backgroundColor: 'white',

padding: 12,

marginTop: 16,

alignContent: 'center',

});

Output

React Native App Tutorial: Camping App Project

FAQ?

How to i make text underline in React Native?

We can make text under line by using applying style textDecorationLine: 'underline'

How to get text value from React Native TextInput component?

TextInput component has prop onChangeText, it will return current text value, we can get value from this.

onChangeText={value => this.setState({password: value})}

How to select next TextInput after pressing th ekeyboard actionNext button?

TextInput  has props like returnKeyType and onSubmitEditing

to set returnKeyType="next" and set focus of next TextInput on OnSubmitEditing

placeholder={'Mobile Number'}

style={loginStyle.textinput}

returnKeyType={'next'}

onChangeText={value => this.setState({username: value})}

onSubmitEditing={() => this.refs.secondTextInput.focus()}

keyboardType={'number-pad'}

maxLength={10}

ref="secondTextInput"

placeholder={'Password'}

secureTextEntry={true}

style={loginStyle.textinput}

onChangeText={value => this.setState({password: value})}

returnKeyType={'done'}

Conclusion: In this example we have successfully create React Native Login Screen with example code. In this simple example we have learned also how to use VisualStudioCode IDE.

Tags: react native login screen, react native linear gradient, react native linear gradient tutorial, login & signup UI in react native, login and signup screen in react native

React Native Login Screen Example Code

Subscribe For Daily Updates