Enable/Disable password view

src/app/components/forms/PasswordFormField.js

@@ -1,50 +1,57 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import ErrorMessage from "./ErrorMessage";
 import { useFormikContext } from "formik";
-import { View, TextInput, StyleSheet } from "react-native";
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TouchableNativeFeedback,
+} 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();
+function PasswordFormField({
+  name,
+  flex = 0,
+  paddingLeft = 16,
+  paddingRight = 16,
+  ...otherProps
+}) {
+  const { values, setFieldTouched, errors, touched } = useFormikContext();
   const [fieldVal, setFieldVal] = useState(values[name]);
-
+  const [hidePswd, setHidePswd] = useState(true);
 
   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}
-      />
+    <View flex={flex} paddingLeft={paddingLeft} paddingRight={paddingRight}>
+      <View style={styles.container}>
+        <TextInput
+          flex={1}
+          onBlur={() => setFieldTouched(name)}
+          onChangeText={(val) => {
+            setFieldVal(val);
+          }}
+          value={fieldVal.toString()}
+          style={defaultStyles.text}
+          height={48}
+          secureTextEntry={hidePswd}
+          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>
+        <TouchableNativeFeedback onPress={() => setHidePswd(!hidePswd)}>
+          <MaterialCommunityIcons
+            name={hidePswd ? "eye-off" : "eye"}
+            size={25}
+            color={defaultStyles.colors.medium}
+            style={styles.icon}
+          />
+        </TouchableNativeFeedback>
       </View>
+      {/* <View style={{ paddingHorizontal: 2 }}> */}
+      <ErrorMessage error={errors[name]} visible={touched[name]} />
+      {/* </View> */}
+    </View>
   );
 }
 
@@ -59,11 +66,10 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     padding: 5,
     paddingLeft: 10,
-    marginHorizontal: 16
   },
   icon: {
     marginRight: 10,
-    alignItems: "flex-end"
+    alignItems: "flex-end",
   },
 });
 

src/app/screens/RegisterScreen.js

@@ -34,9 +34,10 @@ import {
 import { AuthContext } from "../auth/context";
 import authStorage from "../auth/storage";
 import ConfirmationModal from "../components/ConfirmationModal";
+import PasswordFormField from "../components/forms/PasswordFormField";
 
 const phoneRegex = RegExp(
-  /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
+  /^\(?[\(]?([0-9]{2,3})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
 );
 
 const validationSchema = Yup.object().shape({
@@ -396,18 +397,17 @@ export default function RegisterScreen(props) {
                 flex={1}
                 maxLength={12}
                 name="number"
-                placeholder="Digite o número de telefone celular"
+                placeholder="(DDD) XXXXX-XXXX"
                 paddingRight={2}
               />
             </View>
             <Text style={styles.labelStyle}>Senha:*</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIconsCustom name="lock" />
-              <FormField
+              <PasswordFormField
                 flex={1}
-                maxLength={12}
+                maxLength={20}
                 name="password"
-                secureTextEntry={true}
                 placeholder="Digite a senha"
                 paddingRight={2}
               />
@@ -415,11 +415,10 @@ export default function RegisterScreen(props) {
             <Text style={styles.labelStyle}>Confirmar senha:*</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIconsCustom name="lock" />
-              <FormField
+              <PasswordFormField
                 flex={1}
-                maxLength={12}
+                maxLength={20}
                 name="confirmPassword"
-                secureTextEntry={true}
                 placeholder="Repita a senha"
                 paddingRight={2}
               />