Update:signUp page UI

screen/SignIn.js

 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
     }
-
-
 });
 

screen/SignUp.js

 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