Skip to content

2
2021-090 frontend
Commit 68b4e0ce authored by IT18111170-Silva S.H.I's avatar IT18111170-Silva S.H.I
Browse files
Options

Update:signUp page UI

parent 7d9255ab
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 87 deletions
screen/SignIn.js
View file @ 68b4e0ce
import React from 'react'; import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native'; import { StyleSheet, Button, TextInput, View, Text, TouchableOpacity, ImageBackground } from 'react-native';
import { MaterialIcons } from '@expo/vector-icons'; import { Entypo } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';
export function SignIn({ navigation }) { export function SignIn({ navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground source={require('../assets/loginex.jpg')} style={styles.images}> <ImageBackground source={require('../assets/loginex.jpg')} style={styles.images}>
<View style={styles.secondContainer}> <View style={styles.secondContainer}>
<View style={styles.SectionStyle}> <View style={styles.SectionStyle}>
<Text style={styles.text}> <Text style={styles.text}>
HELLO HELLO
...@@ -17,10 +14,10 @@ export function SignIn({ navigation }) { ...@@ -17,10 +14,10 @@ export function SignIn({ navigation }) {
<Text style={styles.text1}> <Text style={styles.text1}>
Sign In to your Account Sign In to your Account
</Text> </Text>
<View style={styles.textinputicon}> <View style={styles.textinputicon}>
<MaterialIcons name="email" size={30} color="white" /> <Entypo name="user" size={30} color="white" />
<TextInput <TextInput
style={styles.input1} style={styles.input1}
// onChangeText={(UserEmail) => // onChangeText={(UserEmail) =>
// setUserEmail(UserEmail) // setUserEmail(UserEmail)
...@@ -40,7 +37,7 @@ export function SignIn({ navigation }) { ...@@ -40,7 +37,7 @@ export function SignIn({ navigation }) {
<View style={styles.SectionStyle}> <View style={styles.SectionStyle}>
<View style={styles.textinputicon}> <View style={styles.textinputicon}>
<FontAwesome name="user-secret" size={30} color="white" /> <Entypo name="lock" size={30} color="white" />
<TextInput <TextInput
style={styles.input1} style={styles.input1}
// onChangeText={(UserPassword) => // onChangeText={(UserPassword) =>
...@@ -56,7 +53,6 @@ export function SignIn({ navigation }) { ...@@ -56,7 +53,6 @@ export function SignIn({ navigation }) {
</View> </View>
</View> </View>
<View style={styles.buttons}> <View style={styles.buttons}>
<TouchableOpacity <TouchableOpacity
style={styles.buttonSub} style={styles.buttonSub}
activeOpacity={0.5} activeOpacity={0.5}
...@@ -64,13 +60,11 @@ export function SignIn({ navigation }) { ...@@ -64,13 +60,11 @@ export function SignIn({ navigation }) {
> >
<Text style={styles.buttonTextStyle}>LOGIN</Text> <Text style={styles.buttonTextStyle}>LOGIN</Text>
{/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */} {/* <ImageBackground source={require('../assets/loginex.jpg')} style={styles.imagebutton}/> */}
</TouchableOpacity> </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> <Text style={{color: 'white', textAlign: 'center'}}>Dont have an account</Text>
<TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}> <TouchableOpacity style={styles.buttonSignUp} title="Sign Up" onPress={() => navigation.navigate('SignUp')}>
<Text style={styles.buttonText}>Sign Up</Text> <Text style={styles.buttonText}>Sign Up</Text>
...@@ -83,7 +77,6 @@ export function SignIn({ navigation }) { ...@@ -83,7 +77,6 @@ export function SignIn({ navigation }) {
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
input: { input: {
borderWidth: 1, borderWidth: 1,
...@@ -97,8 +90,6 @@ const styles = StyleSheet.create({ ...@@ -97,8 +90,6 @@ const styles = StyleSheet.create({
marginLeft: 19, marginLeft: 19,
marginRight: 19, marginRight: 19,
backgroundColor: 'white', backgroundColor: 'white',
}, },
buttonSub: { buttonSub: {
width: "80%", width: "80%",
...@@ -111,7 +102,6 @@ const styles = StyleSheet.create({ ...@@ -111,7 +102,6 @@ const styles = StyleSheet.create({
marginBottom: 20, marginBottom: 20,
justifyContent: "center", justifyContent: "center",
borderRadius: 8, borderRadius: 8,
}, },
images: { images: {
height: '100%', height: '100%',
...@@ -172,7 +162,5 @@ const styles = StyleSheet.create({ ...@@ -172,7 +162,5 @@ const styles = StyleSheet.create({
justifyContent: "center", justifyContent: "center",
borderRadius: 8 borderRadius: 8
} }
}); });
screen/SignUp.js
View file @ 68b4e0ce
import React from 'react'; 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 { Formik } from 'formik';
import { Ionicons } from '@expo/vector-icons'; import { Ionicons } from '@expo/vector-icons';
import { Entypo } from '@expo/vector-icons';
export function SignUp({ navigation }) { export function SignUp({ navigation }) {
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Formik <ImageBackground source={require('../assets/signup.jpg')} style={styles.images}>
initialValues={{ name: '', email: '', password: '', district: ''}} <Formik
onSubmit={(values) => { initialValues={{ name: '', email: '', password: '', district: '' }}
console.log(values); onSubmit={(values) => {
}} console.log(values);
> }}
{props => ( >
<View style={styles.container}> {props => (
<View style={styles.iconView}> <View>
<Text style={styles.heading}> Sign Up </Text>
<Ionicons name="person-add" size={50} color="black" /> <View style={{alignSelf:'center', marginBottom:30}}>
</View> <Ionicons name="person-add" size={50} color="black" />
<Text style={styles.heading}> Sign Up </Text> </View>
<TextInput
style={styles.input}
placeholder='Name'
onChangeText={props.handleChange('name')}
value={props.values.title}
/>
<TextInput
style={styles.input}
placeholder='Email'
onChangeText={props.handleChange('email')}
value={props.values.title}
/>
<TextInput
style={styles.input}
multiline
placeholder='Password'
onChangeText={props.handleChange('password')}
value={props.values.body}
/>
<TextInput <View style={styles.container}>
style={styles.input} <View style={styles.iconView}>
placeholder='District' <Entypo name="lock" size={30} color="white" />
onChangeText={props.handleChange('district')} <TextInput
value={props.values.rating} style={styles.input}
/> placeholder='Name'
<View> 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
placeholder='Password'
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} >
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View>
<TouchableOpacity style = {styles.buttonSub} title="Sign Up" onPress={props.handleSubmit} >
<Text style={styles.buttonText}>Sign Up</Text>
</TouchableOpacity>
</View> </View>
</View> )}
)} </Formik>
</Formik> </ImageBackground>
</View> </View >
); );
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
input: { input: {
borderWidth: 1, borderWidth: 1,
borderColor: '#ddd', borderColor: '#ddd',
padding: 10, padding: 10,
paddingTop: 10, // paddingTop: 10,
fontSize: 18, fontSize: 15,
borderRadius: 6, borderRadius: 25,
marginTop: 20, marginTop: 20,
marginBottom: 10, marginBottom: 10,
marginLeft: 10,
marginRight: 19,
backgroundColor: 'white',
width: '75%',
height:40
}, },
heading: { heading: {
textAlign: 'center', textAlign: 'center',
color: '#333', color: 'black',
fontWeight: 'bold', fontWeight: 'bold',
padding: 10, padding: 10,
fontSize: 18, fontSize: 18,
...@@ -88,25 +117,34 @@ const styles = StyleSheet.create({ ...@@ -88,25 +117,34 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
color: '#333', color: '#333',
padding: 10, padding: 10,
marginTop: 20,
marginBottom: 10,
width: "100%", width: "100%",
justifyContent: 'flex-start',
alignContent: 'stretch',
}, },
buttonSub: { buttonSub: {
width: "90%", width: "85%",
padding: 10, padding: 10,
marginTop: 20, marginTop: 60,
marginLeft: 20, marginLeft: 30,
marginHorizontal: 10, marginHorizontal: 10,
backgroundColor: "#ff8000", backgroundColor: "#ff8000",
flexDirection: "row", flexDirection: "row",
marginBottom: 10, marginBottom: 10,
justifyContent: "center", justifyContent: "center",
borderRadius:10 borderRadius: 10,
marginRight: 10,
},
iconView: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
color: 'yellow'
}, },
iconView:{ images: {
alignSelf: 'center' 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