EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

React Native Login Screen

By Rahul DubeyRahul Dubey

Home » Software Development » Software Development Tutorials » React Native Tutorial » React Native Login Screen

React Native Login Screen

Introduction to React Native Login Screen

A login screen can be defined as a screen that requires a set of credentials that are used to authenticate the user. Logging is the process of authenticating a user and providing him/her the access to his/her account. Login Screen majorly consists of User ID or User Name and password. Login Screen can also include fingerprint, biometric identifier, passcode, PIN number, or Retina Scan. React Native provides the best platform to create Login Screen because of the availability of a wide variety of templates available for the same. Login Screens developed are the best user experience and are very easy to use.

Syntax

1. Importing Login Screen in React Native

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

Transition-property: value of property to be applied;

2. Creating Login Screen Component

Syntax:

<LoginScreen spinnerEnable spinnerVisibility source={source}
switchValue={switchValue}
onPressSettings={() => alert("Settings Button is clicked")} onPressLogin={() => alert("Login Button is clicked")} onSwitchValueChange={switchValue => setSwitchValue(switchValue)} usernameOnChangeText={username => setUsername(username)} passwordOnChangeText={password => alert("Password is: ", password)}
>
<View
style={{
position: "relative", alignSelf: "center", marginTop: 65
}}
>
<Text style={{ color: "white", fontSize: 29 }}>{switchValue}</Text>
</View>
</LoginScreen>

Examples

Below are the examples with Register Button:

Components of TabPages Folder

1. Form.js

Code:

import React, { Component } from 'react';
import { StyleSheet
, Text
, View
, TextInput
, TouchableOpacity
, AsyncStorage
, Keyboard } from 'react-native';
import {Actions} from 'react-native-router-flux';
export default class Form extends Component {
constructor(props){ super(props); this.state={
email:'', password: ''
}
}
saveData =async()=>{
const {email,password} = this.state;
let loginDetails={ email: email, password: password
}
if(this.props.type !== 'Login')
{
AsyncStorage.setItem('loginDetails', JSON.stringify(loginDetails));
Keyboard.dismiss();
alert("You have registered successfully. " + 'Your credentials are:- User-ID: ' + email + ' P.W.:' + password);
this.login();
}
else if(this.props.type == 'Login')
{
try{
let loginDetails = await AsyncStorage.getItem('loginDetails');
let ld = JSON.parse(loginDetails);
if (ld.email != null && ld.password != null)
{
if (ld.email == email && ld.password == password)
{
alert('Welcome Back !');
}
else
{
alert('Mentioned Email and Password doesnot
exist!');
}
}
}catch(error)
{
alert(error);
}
}
}
showData = async()=>{
let loginDetails = await AsyncStorage.getItem('Login Details Are'); let ld = JSON.parse(loginDetails);
alert('email: '+ ld.email + ' ' + 'password: ' + ld.password);
}
render() {
return(
<View style={styles.container}>
<TextInput style={styles.inputBox} onChangeText={(email) => this.setState({email})} underlineColorAndroid='rgba(0,0,0,0)' placeholder="User ID"
placeholderTextColor = "#850c22" selectionColor="#fff" keyboardType="email-address"
onSubmitEditing={()=> this.password.focus()}/>
<TextInput style={styles.inputBox} onChangeText={(password) => this.setState({password})} underlineColorAndroid='rgba(0,0,0,0)' placeholder="Enter Password"
secureTextEntry={true}
placeholderTextColor = "#850c22" ref={(input) => this.password = input}
/>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText} onPress={this.saveData}>{this.props.type}</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({ container: {
justifyContent: 'center', alignItems: 'center',
},
inputBox: {
width: 299, backgroundColor: '#ede8e8', borderRadius: 24,
paddingHorizontal: 15,
fontSize: 15,
color: '#991172',
marginVertical: 9
},
button: {
width: 299,
backgroundColor: '#b8236b', borderRadius: 24,
marginVertical: 9,
paddingVertical: 11
},
buttonText: {
fontSize: 15,
fontWeight: '500', color: '#ffffff', textAlign: 'center'
}
});

2. Login.js

Code:

import React, { Component } from 'react'; import { StyleSheet
, Text
, View
, TextInput
, TouchableOpacity
, AsyncStorage
, Keyboard } from 'react-native';
import {Actions} from 'react-native-router-flux';
import Form from './Form';
export default class Login extends Component {
signup() {
Actions.signup()
}
render() {
return(
<View style={styles.container}>
<Text>{'\n'}</Text>
<Text>{'\n'}</Text>
<Form type="Login"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Not a User? </Text>
<TouchableOpacity onPress={this.signup}><Text style={styles.signupButton}>Register here</Text></TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff',
},
signupTextCont: { flexGrow: 1,
justifyContent: 'center', alignItems: 'flex-end', paddingVertical: 15, flexDirection: 'row',
},
signupText: { color: '#bd157a', fontSize:15,
},
signupButton: { color: '#700d49', fontSize:15,
fontWeight: '500',
}
});

3. Signup.js

Code:

render() {
return(
<View style={styles.container}>
<Text>{'\n'}</Text>
<Text>{'\n'}</Text>
<Form type="Register"/>
<View style={styles.signupTextCont}>
<Text style={styles.signupText}>Do have an account?
</Text>
<TouchableOpacity onPress={this.goBack}><Text style={styles.signupButton}>Log in</Text></TouchableOpacity>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center', alignItems: 'center', backgroundColor: '#ffffff'
},
signupTextCont: { flexGrow: 1,
justifyContent: 'center', alignItems: 'flex-end', paddingVertical: 15, flexDirection: 'row'
},
signupText: { color: '#c7226c', fontSize:15
},
signupButton: { color: '#c7226c', fontSize:15, fontWeight: '500'
}
});

4. Routes.js (Router)

Code:

import React, { Component } from 'react'; import {Router
, Stack
, Scene} from 'react-native-router-flux';
import Login from './Login'; import Signup from './Signup';
export default class Routes extends Component { render() {
return (
<Router barButtonIconStyle ={styles.barButtonIconStyle} hideNavBar={false} navigationBarStyle={{backgroundColor: '#b51271',}} titleStyle={{color: '#ffffff',}}
>
<Stack key="root">
<Scene key="login" component={Login} title="Login Page"/>
<Scene key="signup" component={Signup} title="Register
here"/>
</Stack>
</Router>
)
}
}
const styles = { barButtonIconStyle: {
tintColor: '#ffffff'
}
}

Popular Course in this category
React JS Redux Training (1 Course, 5 Projects)1 Online Courses | 5 Hands-on Projects | 18+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,487 ratings)
Course Price

View Course

Related Courses

5. App.js

Code:

import React, { Component } from 'react'; import {
StyleSheet, View, StatusBar
} from 'react-native';
import Routes from './pages/TabPages/Routes';
export default class App extends Component   { render() {
return (
<View style={styles.container}>
<StatusBar backgroundColor="#6e052f"
barStyle="light-content"
/>
<Routes/>
</View>
);
}
}
const styles = StyleSheet.create({ container: {
flex: 1,
}
});

Output:

  • Image 1 shows the Login Screen and Image 2 shows the Register Screen that will appear when you click Register here button in the bottom of Login Screen.
  • Image 3 shows the pop-up window that will appear when you successfully register with the email ID and password.
  • Image 4 shows the pop-up window that will appear when you Login with your registered email ID.
  • Image 5 shows the pop-up window that will appear when you try Login with the wrong credentials.

React Native Login Screen Example 1

Image 1 and Image 2

Image 3 and Image 4 Example 2

Image 3 and Image 4

React Native Login Screen Example 3

Image 5

Conclusion

On the basis of the above discussion, we got to know about importing a Login Screen and creating a Login Screen component. The example that we had created is a basic cum advanced example of creating a Login Screen. So, with the help of this example, one can create basic Login Screen as well as the advance Login Screen with a separate screen for registration as created in the example. The Login Screen that we have created is very easy to use and React Native provides the best platform in creating advanced Login Screens.

Recommended Articles

This is a guide to React Native Login Screen. Here we discuss the Introduction and its top Examples along with Code Implementation. You can also go through our other suggested articles to learn more –

  1. React Native AsyncStorage
  2. React Native Progress Bar
  3. React Native Template
  4. React Native Navigation

React JS Redux Training (1 Course, 4 Projects)

1 Online Courses

5 Hands-on Projects

18+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
React Native Tutorial
  • Basic
    • What is React Native?
    • React Versions
    • React Constructor
    • React Native Architecture
    • React Native Libraries
    • React Components Libraries
    • React Native Components
    • React Component Library
    • React Component Lifecycle
    • React Native Framework
    • React Higher Order Component
    • React Ternary Operator
    • React Native Charts
    • React Native Layout
    • React Native Grid
    • React Native Fetch
    • React Native Modal
    • React Native SVG
    • Button in React Native
    • React List Components
    • React Native Element
    • React Native FlatList
    • React Native SectionList
    • react native dropdown
    • React Native Menu
    • React Native State
    • React State Management
    • React Native Tabs
    • React Native Tab Bar
    • React Format
    • React-Native Switch
    • React Native Firebase
    • React Native Flexbox
    • React Native StatusBar
    • React Native ScrollView
    • React Native ListView
    • React Native TextInput
    • React Native Table
    • React-Native Border Style
    • React Native Search Bar
    • React-Native StyleSheet
    • React Native Vector Icons
    • React Native Login Screen
    • React Native Splash Screen
    • React Native Image Picker
    • React Native Navigation
    • React Native Swift
    • React Controlled Input
    • React Fragment
    • React Native Color
    • React Portals
    • React Refs
    • React shouldComponentUpdate()
    • React ComponentDidMount()
    • React componentWillUpdate()
    • React Native Orientation
    • React Native Animation
    • React Native Form
    • React Props
    • React Native Linear Gradient
    • React Native AsyncStorage
    • React Error Boundaries
    • React Native Progress Bar
    • React-Native Calendar
    • React Native Linking
    • React Native DatePicker
    • React Native Image
    • React Native Drawer
    • React Native Drawer Navigation
    • React Native Fonts
    • React Native Overlay
    • React Native OneSignal
    • React Native Template
    • React Native Router
    • React Router Transition
    • React Dispatcher
    • React Native Redux
    • React JSX
    • React native keyboardavoidingview
    • React Native Permissions
    • React Redux Connect
    • React Native Material
    • React Native Gesture Handler
    • React Native Theme
    • React Native Accessibility
    • React Native Justify Content
    • MobX React Native
    • React Native Authentication
    • React Native UUID
    • React Native Geolocation
    • React Native Debugger
    • React Native Carousel
    • React Native Local Storage
    • React Native TypeScript
    • React Bootstrap
    • React Native SQLite
    • React Native Interview Questions
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - React JS Redux Training (1 Course, 4 Projects) Learn More