Lecture # 19 – ReactNative Login

Manager
By Dr. Sidra Sultana
Introduction
 We will build a simple android project user registration
and login using email and password.
 In this project we need two pages or activities.
 One is Login Page and Second is the Sign up Page.
 The user need to sign up a valid email address and
password and then will use it to login to the application.
 For the database part we will use the local database of the
app which is the SQLite.
SQLite
 “SQLite is an in-process library that implements a self-
contained, serverless, zero-configuration, transactional
SQL database engine. The code for SQLite is in the public
domain and is thus free for use for any purpose,
commercial or private. SQLite is the most widely
deployed database in the world with more applications
than we can count, including several high-profile projects”
– SQLite.org
Step 1
 Create a fresh react native project.
 Choose the folder you want to save your project.
 //Use to install react native
 npm install -g react-native-cli
 npm install -g yarn
  //Creating project
 react-native init nameofapp
Step 1 cont’d
 If you’re successful making the project you will see
something like this in the command prompt.
Step 2
 Create a new folder ‘src‘ for source.
 Under ‘src‘, let’s create another folder for ‘pages‘ where
we will put our js files.
 Create a Login.js and Signup.js files under ‘pages‘.
 Create a ‘components‘ folder under source to use one file
for login and sign up page then create the Form.js file
under components.
 And lastly create Routes.js file for navigation under
‘src‘.
Step 2 cont’d
Step 3
 Head on to Form Acitivity.
 Now add AppRegistry, StyleSheet, Text, View, TextInput,
TouchableOpacity, AsyncStorage and Keyboard
component in import block.
 import React, { Component } from 'react';
 import { StyleSheet, Text, View, TextInput,
TouchableOpacity, AsyncStorage, Keyboard } from 'react-
native';
Step 4
 We need Navigator for redirection to other screens.
 Here we use React native Router Flux.
 Just run it again in the Node.js command prompt.
 //Run in Node.js
 npm install --save react-native-router-flux

 //After installing in the Node.js, import inside the project

after react components
 import {Actions} from 'react-native-router-flux';
Step 5
 Create a class activity for Form, one js file for login and
sign up.
 export default class Form extends Component {

 }
Step 6
 Creating constructor with props in Form class
 export default class Form extends Component {
 constructor(props){
 super(props);
 this.state={
 email:'',
 password: ''
 }
 }
Step 7
 Create SaveData function in Form Activity
 We need to get the input email and password from textInput using
state.
 And then use the details to save upon signing up.
 saveData =async()=>{
 const {email,password} = this.state;

 //save data with asyncstorage

 let loginDetails={
 email: email,
 password: password
 }
Step 7 cont’d
 if(this.props.type !== 'Login'){
 AsyncStorage.setItem('loginDetails', JSON.stringify(loginDetails));
 Keyboard.dismiss();
 alert("You successfully registered. Email: " + email + ' password: ' + 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('Go in!');
 }
Step 7 cont’d
 else
 {
 alert('Email and Password does not exist!');
 }
 }

 }catch(error)
 {
 alert(error);
 }
 }
 }
 Step 8
 Create ShowData function to show registered email and
password.
 showData = async()=>{
 let loginDetails = await AsyncStorage.getItem('loginDetails');
 let ld = JSON.parse(loginDetails);
 alert('email: '+ ld.email + ' ' + 'password: ' + ld.password);
 }
Step 9
 Add render’s return block in your Form Activity. Set a Container View, inside that
Container view place two TextInput and one TouchableOpacity component. Calling
the SaveData function on touchableOpacity onPress. Passing props (property) will
determine if you click Sign up or Login button.
 render() {
 return(
 <View style={styles.container}>
 <TextInput style={styles.inputBox}
 onChangeText={(email) => this.setState({email})}
 underlineColorAndroid='rgba(0,0,0,0)'
 placeholder="Email"
 placeholderTextColor = "#002f6c"
 selectionColor="#fff"
 keyboardType="email-address"
 onSubmitEditing={()=> this.password.focus()}/>
Step 9 cont’d
 <TextInput style={styles.inputBox}
 onChangeText={(password) => this.setState({password})}
 underlineColorAndroid='rgba(0,0,0,0)'
 placeholder="Password"
 secureTextEntry={true}
 placeholderTextColor = "#002f6c"
 ref={(input) => this.password = input}
 />
 <TouchableOpacity style={styles.button}>
 <Text style={styles.buttonText}
onPress={this.saveData}>{this.props.type}</Text>
 </TouchableOpacity>
 </View>
 )
 }
Step 10
 Add CSS Styling.
 const styles = StyleSheet.create({
 container: {
 justifyContent: 'center',
 alignItems: 'center',
 },
 inputBox: {
 width: 300,
 backgroundColor: '#eeeeee',
 borderRadius: 25,
 paddingHorizontal: 16,
 fontSize: 16,
 color: '#002f6c',
 marginVertical: 10
 },
Step 10 cont’d
 button: {
 width: 300,
 backgroundColor: '#4f83cc',
 borderRadius: 25,
 marginVertical: 10,
 paddingVertical: 12
 },
 buttonText: {
 fontSize: 16,
 fontWeight: '500',
 color: '#ffffff',
 textAlign: 'center'
 }
 });
Step 11
 Create Login Activity.
 Add StyleSheet, Text, View, and TouchableOpacity
component in import block.
 Then add Route navigation and Form Activity component.
 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 '../components/Form';
Step 12
 Create a class activity for Login (same as the Form)
 export default class Login extends Component {

 }
Step 13
 Create Sign up function inside the class to call Sign up
Activity.
 signup() {
 Actions.signup()
 }
Step 14
 Add render’s return block in your Login Activity.
 render() {
 return(
 <View style={styles.container}>
 <Text>{'\n'}</Text>
 <Text>{'\n'}</Text>
 <Form type="Login"/>
 <View style={styles.signupTextCont}>
 <Text style={styles.signupText}>Dont have an account yet? </Text>
 <TouchableOpacity onPress={this.signup}><Text
style={styles.signupButton}>Signup</Text></TouchableOpacity>
 </View>
 </View>
 )
 }
 Step 15
Complete Source Code of Login Activity
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 '../components/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}>Dont have an account yet? </Text>
 <TouchableOpacity onPress={this.signup}><Text
style={styles.signupButton}>Signup</Text></TouchableOpacity>
 </View>
 </View>
 )
 }
Step 15 cont’d
const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: 'white',
 },
 signupTextCont: {
 flexGrow: 1,
 justifyContent: 'center',
 alignItems: 'flex-end',
 paddingVertical: 16,
 flexDirection: 'row',
 },
 signupText: {
 color: '#12799f',
 fontSize:16,
 },
 signupButton: {
 color: '#12799f',
 fontSize:16,
 fontWeight: '500',
 }
});
Step 16
 Create Signup Activity.
 Add StyleSheet, Text, View, and TouchableOpacity component in import
block.
 Then add Route navigation and Form Activity component.
 import React, { Component } from 'react';
 import {
 StyleSheet,
 Text,
 View,
 TouchableOpacity
 } from 'react-native';
 import Form from '../components/Form';
 import {Actions} from 'react-native-router-flux';
Step 17
 Create a class activity for Signup (same as the Form)
 export default class Signup extends Component {

 }
Step 18
 Create GoBack function to return to Login Page upon
click of Sign In text.
 goBack() {
 Actions.pop()
 }
Step 19
 Add render’s return block in your Signup Activity.
 render() {
 return(
 <View style={styles.container}>
 <Text>{'\n'}</Text>
 <Text>{'\n'}</Text>
 <Form type="Signup"/>
 <View style={styles.signupTextCont}>
 <Text style={styles.signupText}>Already have an account? </Text>
 <TouchableOpacity onPress={this.goBack}><Text
style={styles.signupButton}>Sign in</Text></TouchableOpacity>
 </View>
 </View>
 )
 }
Step 20
 Add CSS Styling again.
const styles = StyleSheet.create({ signupText: {
container: { color: '#12799f',
flex: 1, fontSize:16
justifyContent: 'center', },
alignItems: 'center', signupButton: {
backgroundColor: 'white' color: '#12799f',
}, fontSize:16,
signupTextCont: { fontWeight: '500'
flexGrow: 1, }
justifyContent: 'center', });
alignItems: 'flex-end',
paddingVertical: 16,
flexDirection: 'row'
},
Step 21
 Now we completed the Login and Sign up pages.
 We need to create a Route Navigation for redirection of
pages
 Go to Route.js file that we created in the project.
 Add components, class, render block and css styling.
 You just need to place the first page you want to show
upon on load of the app.
 I place first the login scene.
Step 22 cont’d
import React, { Component } from 'react';
import {Router, Stack, Scene} from 'react-native-router-flux';
import Login from './pages/Login';
import Signup from './pages/Signup';
export default class Routes extends Component {
 render() {
 return (
 <Router barButtonIconStyle ={styles.barButtonIconStyle}
 hideNavBar={false}
 navigationBarStyle={{backgroundColor: '#1565c0',}}
 titleStyle={{color: 'white',}}
 >
 <Stack key="root">
 <Scene key="login" component={Login} title="Login"/>
 <Scene key="signup" component={Signup} title="Sign up"/>
 </Stack>
 </Router>
 )
 }
}
const styles = {
 barButtonIconStyle: {
 tintColor: 'white'
 }
}
Step 23
 And last but not the least is the App.js file that is default file
of an react native project.
 We need to delete all the default contents and paste the code
below so the Login page will show upon loading of the app.
 We need to import the Route.js file.
 import React, { Component } from 'react';
 import {
 StyleSheet,
 View,
 StatusBar
 } from 'react-native';
Step 23 cont’d
import Routes from './src/Routes';
export default class App extends Component {
 render() {
 return (
 <View style={styles.container}>
 <StatusBar
 backgroundColor="#002f6c"
 barStyle="light-content"
 />
 <Routes/>
 </View>
 );
 }
}
const styles = StyleSheet.create({
 container: {
 flex: 1,
 }
});
Screenshot in Android Device
Screenshot in Android Device cont’d
Any Question?
 Thanks