Update:signUp page UI

parent 7d9255ab
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
export function SignIn({ navigation }) {
return (
<View style={styles.container}>
<ImageBackground source={require('../assets/loginex.jpg')} style={styles.images}>
<View style={styles.secondContainer}>
<View style={styles.SectionStyle}>
<Text style={styles.text}>
HELLO
......@@ -17,10 +14,10 @@ export function SignIn({ navigation }) {
<Text style={styles.text1}>
Sign In to your Account
</Text>
<View style={styles.textinputicon}>
<MaterialIcons name="email" size={30} color="white" />
<Entypo name="user" size={30} color="white" />
<TextInput
style={styles.input1}
// onChangeText={(UserEmail) =>
// setUserEmail(UserEmail)
......@@ -40,7 +37,7 @@ export function SignIn({ navigation }) {
<View style={styles.SectionStyle}>
<View style={styles.textinputicon}>
<FontAwesome name="user-secret" size={30} color="white" />
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input1}
// onChangeText={(UserPassword) =>
......@@ -56,7 +53,6 @@ export function SignIn({ navigation }) {
</View>
</View>
<View style={styles.buttons}>
<TouchableOpacity
style={styles.buttonSub}
activeOpacity={0.5}
......@@ -64,13 +60,11 @@ export function SignIn({ navigation }) {
>
<Text style={styles.buttonTextStyle}>LOGIN</Text>
{/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
</TouchableOpacity>
<View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center',}}>
<View style={{flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',}}>
<Text style={{color: 'white', textAlign: 'center'}}>Dont have an account</Text>
<TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text>
......@@ -83,7 +77,6 @@ export function SignIn({ navigation }) {
)
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
......@@ -97,8 +90,6 @@ const styles = StyleSheet.create({
marginLeft: 19,
marginRight: 19,
backgroundColor: 'white',
},
buttonSub: {
width: "80%",
......@@ -111,7 +102,6 @@ const styles = StyleSheet.create({
marginBottom: 20,
justifyContent: "center",
borderRadius: 8,
},
images: {
height: '100%',
......@@ -172,7 +162,5 @@ const styles = StyleSheet.create({
justifyContent: "center",
borderRadius: 8
}
});
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity } from 'react-native';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { Formik } from 'formik';
import { Ionicons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
export function SignUp({ navigation }) {
return (
<View style={styles.container}>
<ImageBackground source={require('../assets/signup.jpg')} style={styles.images}>
<Formik
initialValues={{ name: '', email: '', password: '', district: ''}}
initialValues={{ name: '', email: '', password: '', district: '' }}
onSubmit={(values) => {
console.log(values);
}}
>
{props => (
<View style={styles.container}>
<View style={styles.iconView}>
<View>
<Text style={styles.heading}> Sign Up </Text>
<View style={{alignSelf:'center', marginBottom:30}}>
<Ionicons name="person-add" size={50} color="black" />
</View>
<Text style={styles.heading}> Sign Up </Text>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input}
placeholder='Name'
onChangeText={props.handleChange('name')}
value={props.values.title}
/>
</View>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input}
placeholder='Email'
onChangeText={props.handleChange('email')}
value={props.values.title}
/>
</View>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input}
multiline
......@@ -42,44 +59,56 @@ export function SignUp({ navigation }) {
onChangeText={props.handleChange('password')}
value={props.values.body}
/>
</View>
</View>
<View style={styles.container}>
<View style={styles.iconView}>
<Entypo name="lock" size={30} color="white" />
<TextInput
style={styles.input}
placeholder='District'
onChangeText={props.handleChange('district')}
value={props.values.rating}
/>
<View>
</View>
</View>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<View>
<TouchableOpacity style={styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</View>
</ImageBackground>
</View >
);
}
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
paddingTop: 10,
fontSize: 18,
borderRadius: 6,
// paddingTop: 10,
fontSize: 15,
borderRadius: 25,
marginTop: 20,
marginBottom: 10,
marginLeft: 10,
marginRight: 19,
backgroundColor: 'white',
width: '75%',
height:40
},
heading: {
textAlign: 'center',
color: '#333',
color: 'black',
fontWeight: 'bold',
padding: 10,
fontSize: 18,
......@@ -88,25 +117,34 @@ const styles = StyleSheet.create({
flex: 1,
color: '#333',
padding: 10,
marginTop: 20,
marginBottom: 10,
width: "100%",
justifyContent: 'flex-start',
alignContent: 'stretch',
},
buttonSub: {
width: "90%",
width: "85%",
padding: 10,
marginTop: 20,
marginLeft: 20,
marginTop: 60,
marginLeft: 30,
marginHorizontal: 10,
backgroundColor: "#ff8000",
flexDirection: "row",
marginBottom: 10,
justifyContent: "center",
borderRadius:10
borderRadius: 10,
marginRight: 10,
},
iconView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
color: 'yellow'
},
iconView:{
alignSelf: 'center'
}
images: {
height: '100%',
justifyContent: 'center'
},
container: {
},
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment