Fixing padding bug from FormField in login screen

src/app/components/forms/FormField.js

@@ -33,6 +33,75 @@ function IncreaseDecreaseButtons({ content }) {
   );
 }
 
+function RenderPluviometerInput({
+  name,
+  setFieldTouched,
+  setFieldValue,
+  otherProps,
+  width,
+  values,
+}) {
+  console.log(name == "pluviometer");
+  const [fieldVal, setFieldVal] = useState(values[name]);
+
+  useEffect(() => {
+    setFieldValue(name, fieldVal, true);
+  }, [fieldVal]);
+
+  const increase = () => {
+    setFieldVal((Number(fieldVal) + 1).toString());
+  };
+
+  const decrease = () => {
+    setFieldVal((Number(fieldVal) - 1).toString());
+  };
+
+  return (
+    <View
+      style={{
+      flexDirection: "row",
+      }}
+    >
+      <View style={{flex: 1,alignSelf: "stretch"}}>
+      <TextInput
+        onBlur={() => setFieldTouched(name)}
+        onChangeText={(val) => {
+          setFieldVal(val);
+        }}
+        width={width}
+        value={fieldVal.toString()}
+        {...otherProps}/>
+      </View>
+
+      <TouchableOpacity
+        onPress={() => {
+          increase();
+        }}
+        style={{
+          paddingLeft: 4,
+          paddingBottom: 8,
+          paddingRight: 1.5,
+        }}
+      >
+        <IncreaseDecreaseButtons content={"+"} />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={() => {
+          decrease();
+        }}
+        style={{
+          paddingLeft: 1.5,
+          paddingBottom: 8,
+          paddingRight: 16,
+        }}
+      >
+        <IncreaseDecreaseButtons content={"-"} />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
 function AppFormField({
   name,
   width,
@@ -43,88 +112,41 @@ function AppFormField({
     values,
     setFieldTouched,
     setFieldValue,
+    handleChange,
     errors,
     touched,
   } = useFormikContext();
 
-  const [pluv, setPluv] = useState(0);
-
-  console.log(values);
-  console.log(pluv);
-
-  useEffect(() => {
-    setFieldValue("pluviometer", Number(pluv), true);
-  }, [pluv]);
-
-  const increase = () => {
-    setPluv((Number(pluv) + 1).toString());
-  };
-
-  const decrease = () => {
-    setPluv((Number(pluv) - 1).toString());
-  };
-
   return (
     <View>
       <View
         style={{
-          flex: 1,
-          flexDirection: "row",
           paddingLeft: 16,
           paddingRight: increaseDecreaseButtons ? 0 : 16,
         }}
       >
-        <View
-          style={{
-            alignSelf: "stretch",
-            flex: 1,
-          }}
-        >
-          <TextInput
-            onBlur={() => setFieldTouched(name)}
-            onChangeText={(val) => {
-              setPluv(val);
-            }}
-            width={width}
-            value={pluv}
-            {...otherProps}
-          />
-        </View>
-
-        {increaseDecreaseButtons && (
-          <>
-            <TouchableOpacity
-              onPress={() => {
-                increase();
-              }}
-              style={{
-                paddingLeft: 4,
-                paddingBottom: 8,
-                paddingRight: 1.5,
-              }}
-            >
-              <IncreaseDecreaseButtons content={"+"} />
-            </TouchableOpacity>
-
-            <TouchableOpacity
-              onPress={() => {
-                decrease();
-              }}
-              style={{
-                paddingLeft: 1.5,
-                paddingBottom: 8,
-                paddingRight: 16,
-              }}
-            >
-              <IncreaseDecreaseButtons content={"-"} />
-            </TouchableOpacity>
-          </>
-        )}
+          {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 }}>
-        <ErrorMessage error={errors[name]} visible={touched[name]} />
-      </View>
+        <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,33 +58,42 @@ export default function LoginScreen(props) {
           handleSubmit(name, password, setLoginFailed)
         }
       >
-        <assets.AppLogoTitle
-          preserveAspectRatio="xMidYMid meet"
-          width={300}
-          height={30}
-          alignSelf="center"
-          marginBottom={dimensions.spacing.big_padding}
-        />
+        <View>
+          <assets.AppLogoTitle
+            preserveAspectRatio="xMidYMid meet"
+            width={300}
+            height={30}
+            alignSelf="center"
+            marginBottom={dimensions.spacing.big_padding}
+          />
 
-        <ErrorMessage error="Email ou senha inválidos" visible={loginFailed} />
-        <FormField
-          maxLength={12}
-          name="name"
-          keyboardType="numeric"
-          numberOfLines={1}
-          placeholder="Número de telefone celular"
-        />
+          <ErrorMessage
+            error="Email ou senha inválidos"
+            visible={loginFailed}
+          />
 
-        <FormField
-          maxLength={12}
-          name="password"
-          secureTextEntry={true}
-          numberOfLines={1}
-          placeholder="Senha"
-        />
+          <View style={{ paddingVertical: 24 }}>
+            <FormField
+              maxLength={12}
+              name="name"
+              keyboardType="numeric"
+              numberOfLines={2}
+              placeholder="Número de telefone celular"
+            />
+          </View>
 
-        <SubmitButton title="entrar" backgroundColor={colors.primary} />
+          <View style={{ paddingBottom: 24 }}>
+            <FormField
+              maxLength={12}
+              name="password"
+              secureTextEntry={true}
+              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",
   },
 });