Improve forms

Endurance-Soft · May 4, 2024 · adeda7b · adeda7b
1 parent 91404ef
commit adeda7b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/src/components/InputField.js b/src/components/InputField.js
@@ -3,7 +3,7 @@ import { Text, TextInput, StyleSheet, View } from 'react-native';
 import { theme } from "../assets/Theme";
 import { Controller } from 'react-hook-form';
 
-const InputField = ({ control, name, title, type = 'default', rules = {}, errors ={} }) => {
+const InputField = ({ control, name, title, type = 'default', rules = {}, errors ={}, height = 46 }) => {
 
   const [isFocused, setIsFocused] = useState(false);
 
@@ -18,7 +18,7 @@ const InputField = ({ control, name, title, type = 'default', rules = {}, errors
                 rules={rules}
                 render={({ field: { onChange, value } }) => (
                     <TextInput
-                        style={InputStyle}
+                        style={[InputStyle, { height }]}
                         onChangeText={onChange}
                         onFocus={() => setIsFocused(true)}
                         onBlur={() => setIsFocused(false)}
@@ -47,30 +47,26 @@ const styles = StyleSheet.create({
         paddingLeft: 10
     },
     input: {
-      height: 46,
-      width: "auto",
-      minWidth: 245,
-      padding: 10,
-      backgroundColor: theme.colors.white,
-      borderRadius: 10,
-      borderWidth: 2,
-      borderColor: theme.colors.otherWhite,
-      fontSize: 18,
-      fontWeight: "bold",
-
-    },
-    inputFocused:{
-        height: 46,
         width: "auto",
         minWidth: 245,
         padding: 10,
+        backgroundColor: theme.colors.white,
         borderRadius: 10,
+        borderWidth: 2,
+        borderColor: theme.colors.otherWhite,
         fontSize: 18,
         fontWeight: "bold",
-        borderWidth: 2,
-        borderColor: theme.colors.black,
-
-    },
+      },
+      inputFocused:{
+          width: "auto",
+          minWidth: 245,
+          padding: 10,
+          borderRadius: 10,
+          fontSize: 18,
+          fontWeight: "bold",
+          borderWidth: 2,
+          borderColor: theme.colors.black,
+      },
     error: {
         color: 'red',
         fontSize: 12,

diff --git a/src/screens/PayScreen.js b/src/screens/PayScreen.js
@@ -214,12 +214,14 @@ const PayScreen = ({ route }) => {
                             />}
                     </View>
                     <InputField
+                        height={80}
                         control={control}
                         name="reference"
                         title="Referencia"
                         type="default"
                     />
                     <InputField
+                        height={80}
                         control={control}
                         name="observations"
                         title="Observaciones"
@@ -256,13 +258,17 @@ const styles = StyleSheet.create({
     header: {
         flexDirection: "row",
         paddingHorizontal: 20,
+        paddingTop: 60,
         paddingVertical: 20,
         alignItems: "center",
+        backgroundColor:theme.colors.secondary,
+        borderRadius: 25,
+        elevation:5,
     },
     back: {
         justifyContent: "center",
         alignItems: "center",
-        backgroundColor: theme.colors.otherWhite,
+        backgroundColor: theme.colors.skyBlue,
         borderRadius: 20,
         width: 60,
         height: 60,
@@ -282,7 +288,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         justifyContent: "center",
         alignSelf: "center",
-        width: screenWidth - 240,
+        // width: screenWidth - 240,
     },
     button: {
         justifyContent: "center",
@@ -305,7 +311,12 @@ const styles = StyleSheet.create({
     formContainer: {
         flex: 1,
         marginHorizontal: 10,
-        marginVertical: 10,
+        // marginVertical: 10,
+        // backgroundColor:'red',
+        flexDirection: "column",
+        justifyContent: "space-between",
+        paddingTop: 40,
+        paddingBottom: 50,
     },
 });