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;