Fixing padding bug from FormField in login screen

src/app/components/forms/FormField.js

@@ -33,66 +33,46 @@ function IncreaseDecreaseButtons({ content }) {
   );
 }
 
-function AppFormField({
+function RenderPluviometerInput({
   name,
-  width,
-  increaseDecreaseButtons = false,
-  ...otherProps
-}) {
-  const {
-    values,
   setFieldTouched,
   setFieldValue,
-    errors,
-    touched,
-  } = useFormikContext();
-
-  const [pluv, setPluv] = useState(0);
-
-  console.log(values);
-  console.log(pluv);
+  otherProps,
+  width,
+  values,
+}) {
+  console.log(name == "pluviometer");
+  const [fieldVal, setFieldVal] = useState(values[name]);
 
   useEffect(() => {
-    setFieldValue("pluviometer", Number(pluv), true);
-  }, [pluv]);
+    setFieldValue(name, fieldVal, true);
+  }, [fieldVal]);
 
   const increase = () => {
-    setPluv((Number(pluv) + 1).toString());
+    setFieldVal((Number(fieldVal) + 1).toString());
   };
 
   const decrease = () => {
-    setPluv((Number(pluv) - 1).toString());
+    setFieldVal((Number(fieldVal) - 1).toString());
   };
 
   return (
-    <View>
     <View
       style={{
-          flex: 1,
       flexDirection: "row",
-          paddingLeft: 16,
-          paddingRight: increaseDecreaseButtons ? 0 : 16,
-        }}
-      >
-        <View
-          style={{
-            alignSelf: "stretch",
-            flex: 1,
       }}
     >
+      <View style={{flex: 1,alignSelf: "stretch"}}>
       <TextInput
         onBlur={() => setFieldTouched(name)}
         onChangeText={(val) => {
-              setPluv(val);
+          setFieldVal(val);
         }}
         width={width}
-            value={pluv}
-            {...otherProps}
-          />
+        value={fieldVal.toString()}
+        {...otherProps}/>
       </View>
 
-        {increaseDecreaseButtons && (
-          <>
       <TouchableOpacity
         onPress={() => {
           increase();
@@ -118,11 +98,53 @@ function AppFormField({
       >
         <IncreaseDecreaseButtons content={"-"} />
       </TouchableOpacity>
-          </>
+    </View>
+  );
+}
+
+function AppFormField({
+  name,
+  width,
+  increaseDecreaseButtons = false,
+  ...otherProps
+}) {
+  const {
+    values,
+    setFieldTouched,
+    setFieldValue,
+    handleChange,
+    errors,
+    touched,
+  } = useFormikContext();
+
+  return (
+    <View>
+      <View
+        style={{
+          paddingLeft: 16,
+          paddingRight: increaseDecreaseButtons ? 0 : 16,
+        }}
+      >
+          {name != "pluviometer" ? (
+            <TextInput
+              onBlur={() => setFieldTouched(name)}
+              onChangeText={handleChange(name)}
+              width={width}
+              {...otherProps}
+            />
+          ) : (
+            <RenderPluviometerInput
+              name={name}
+              setFieldTouched={setFieldTouched}
+              setFieldValue={setFieldValue}
+              otherProps={otherProps}
+              width={width}
+              values={values}
+            />
           )}
       </View>
 
-      <View style={{ paddingLeft: 16 }}>
+        <View style={{ paddingHorizontal: 16}}>
           <ErrorMessage error={errors[name]} visible={touched[name]} />
         </View>
     </View>

src/app/screens/LoginScreen.js

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import { StyleSheet, View, Text } from "react-native";
+import { StyleSheet, View } from "react-native";
 import * as Yup from "yup";
 import {
   Form,
@@ -10,7 +10,6 @@ import {
 import Screen from "../components/Screen";
 import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
-import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import login from "../api/auth";
 import jwdDecode from "jwt-decode";
 import { AuthContext } from "../auth/context";
@@ -59,6 +58,7 @@ export default function LoginScreen(props) {
           handleSubmit(name, password, setLoginFailed)
         }
       >
+        <View>
           <assets.AppLogoTitle
             preserveAspectRatio="xMidYMid meet"
             width={300}
@@ -67,25 +67,33 @@ export default function LoginScreen(props) {
             marginBottom={dimensions.spacing.big_padding}
           />
 
-        <ErrorMessage error="Email ou senha inválidos" visible={loginFailed} />
+          <ErrorMessage
+            error="Email ou senha inválidos"
+            visible={loginFailed}
+          />
+
+          <View style={{ paddingVertical: 24 }}>
             <FormField
               maxLength={12}
               name="name"
               keyboardType="numeric"
-          numberOfLines={1}
+              numberOfLines={2}
               placeholder="Número de telefone celular"
             />
+          </View>
 
+          <View style={{ paddingBottom: 24 }}>
             <FormField
               maxLength={12}
               name="password"
               secureTextEntry={true}
-          numberOfLines={1}
+              numberOfLines={2}
               placeholder="Senha"
             />
+          </View>
 
             <SubmitButton title="entrar" backgroundColor={colors.primary} />
-
+        </View>
         {/* <TouchableNativeFeedback
           onPress={() => {
             props.navigation.navigate("Register");
@@ -103,7 +111,6 @@ export default function LoginScreen(props) {
 
 const styles = StyleSheet.create({
   containter: {
-    padding: 10,
     justifyContent: "center",
   },
 });