Initiam implementation of enabling/disabling secure password

src/app/components/forms/PasswordFormField.js

@@ -0,0 +1,70 @@
+import React, {useState} from "react";
+import ErrorMessage from "./ErrorMessage";
+import { useFormikContext } from "formik";
+import { View, TextInput, StyleSheet } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import colors from "../../config/colors";
+import defaultStyles from "../../config/styles";
+
+function PasswordFormField({ name, ...otherProps }) {
+  const {
+    values,
+    setFieldTouched,
+    setFieldValue,
+    handleChange,
+    errors,
+    touched,
+  } = useFormikContext();
+  const [fieldVal, setFieldVal] = useState(values[name]);
+
+
+  return (
+    <View>
+    <View style={styles.container}>
+      <TextInput
+        flex={1}
+        onBlur={() => setFieldTouched(name)}
+        onChangeText={(val) => {
+          setFieldVal(val);
+        }}
+        value={fieldVal.toString()}
+        style={defaultStyles.text}
+        height={48}
+        placeholderTextColor={colors.medium}
+        {...otherProps}
+      />
+
+      <MaterialCommunityIcons
+        name={"eye"}
+        size={20}
+        color={defaultStyles.colors.medium}
+        style={styles.icon}
+      />
+    </View>
+      <View style={{ paddingHorizontal: 16 }}>
+        <ErrorMessage error={errors[name]} visible={touched[name]} />
+      </View>
+      </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...defaultStyles.shadow,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 6,
+    borderColor: colors.grayBG,
+    borderWidth: 1,
+    padding: 5,
+    paddingLeft: 10,
+    marginHorizontal: 16
+  },
+  icon: {
+    marginRight: 10,
+    alignItems: "flex-end"
+  },
+});
+
+export default PasswordFormField;

src/app/screens/LoginScreen.js

@@ -17,6 +17,7 @@ import assets from "../config/assets";
 import Button from "../components/Button";
 import { TouchableNativeFeedback } from "react-native-gesture-handler";
 import { login, userPersonalData } from "../api/auth";
+import PasswordFormField from "../components/forms/PasswordFormField";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -124,10 +125,9 @@ export default function LoginScreen(props) {
           </View>
 
           <View style={{ paddingBottom: 24 }}>
-            <FormField
+            <PasswordFormField
               maxLength={12}
               name="password"
-              secureTextEntry={true}
               placeholder="Senha"
             />
           </View>