Scribd
Upload
53 views3 pages

App

This document defines a React Native login screen component. The component handles user input validation and state for a username and password field. It renders a header, two text inputs for username and password, and a submit button. When the submit button is pressed, it navigates to a HelloWorldApp screen defined elsewhere. Styles are defined using React Native StyleSheet to layout and style the various elements of the login screen.

Uploaded by

Naveen Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
53 views3 pages

App

This document defines a React Native login screen component. The component handles user input validation and state for a username and password field. It renders a header, two text inputs for username and password, and a submit button. When the submit button is pressed, it navigates to a HelloWorldApp screen defined elsewhere. Styles are defined using React Native StyleSheet to layout and style the various elements of the login screen.

Uploaded by

Naveen Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

import React, { Component } from 'react';

import { Text, View, TouchableHighlight, Button,Image, StyleSheet, TextInput} from


'react-native';

import HelloWorldApp from'./signin';


import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from '@react-navigation/stack';
//import LinearGradient from 'react-native-linear-gradient';

class login extends Component{


constructor(){
super()
this.state={
name:'',
namevalidate:true,
pass:'',
passvalidate:true
}

}
alph=/^[a-zA-Z]+$/
validate(text,type){
if(type=='username'){
if(this.alph.test(text.trim()))
{
this.setState({
namevalidate:true,
})
}
else{
this.setState({
namevalidate:false,
})
}
}

if(type=='pass'){
if(this.alph.test(text.trim()))
{
this.setState({
passvalidate:true,
})
}
else{
this.setState({
passvalidate:false,
})
}
}
}

render(){
return(
<View style={styles.container}>
<View style={styles.header}><Text style={styles.txt_header}>welcome</Text>
<Image style={styles.stretch}
source={require('./assets/logo.jpg')}></Image></View>
<View style={styles.footer}>
<TextInput style={[styles.input,!this.state.namevalidate?
styles.error:null]} secureTextEntry={false}
placeholder="e n t e r u s e r n a m e. . ."
onChangeText={(text)=>this.validate(text,'username')}

></TextInput>
<TextInput style={[styles.input,!this.state.passvalidate?
styles.error:null]} secureTextEntry={true}
placeholder="enter passsword..."
onChangeText={(text)=>this.validate(text,'pass')}
/>
<Button style={styles.input}
title="submit"
onPress={()=>navigation.navigate('navigater')}
></Button>

</View>

</View>

);
}
}

function hello({navigation}) {

return(
{
navigater:HelloWorldApp
}
)

const styles=StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#009387'
},
header:{
flex: 2,
justifyContent: 'flex-end',
paddingBottom:50,
fontSize:30,
paddingVertical: 50,
paddingTop:100
},
stretch: {
width: 200,
height: 200,
left:80,
resizeMode: 'stretch',
},
footer:{
flex: 4,
backgroundColor: '#fff',
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingTop:100

},
input:{
height:50,
justifyContent:'center',
borderColor:'black',
borderWidth: 1,
paddingBottom :10,
margin: 12,

},
txt_header:{
fontSize:40,
fontWeight:'bold',
paddingHorizontal: 20,

},
error:{
borderWidth:3,
borderColor:'red'
}

})
export default login;

You might also like