Checking password integrity and phone number mask

src/app/components/forms/PhoneNumberFormField.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from "react";
+import { useFormikContext } from "formik";
+
+import TextInput from "../TextInput";
+import ErrorMessage from "./ErrorMessage";
+import { View, Text, StyleSheet } from "react-native";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import colors from "../../config/colors";
+import defaultStyles from "../../config/styles";
+import { MaskedTextInput } from "react-native-mask-text";
+
+function PhoneNumberFormField({
+  name,
+  flex = 0,
+  maxLength = 0,
+  placeholder = "",
+  paddingLeft = 16,
+  paddingRight = 16,
+}) {
+  const { values, setFieldValue, errors, touched } = useFormikContext();
+
+  // console.log(values);
+  return (
+    <View flex={flex}>
+      <View
+        style={{
+          paddingLeft: paddingLeft,
+          paddingRight: paddingRight,
+        }}
+      >
+        <MaskedTextInput
+          mask="(99) 99999-9999"
+          placeholder={placeholder}
+          placeholderTextColor={colors.medium}
+          onChangeText={(_, rawText) => {
+            setFieldValue(name, rawText.substr(0, maxLength));
+          }}
+          style={styles.container}
+          keyboardType="numeric"
+        />
+      </View>
+
+      <View style={{ paddingRight: paddingRight, paddingLeft: paddingLeft }}>
+        <ErrorMessage error={errors[name]} visible={touched[name]} />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    ...defaultStyles.shadow,
+    ...defaultStyles.text,
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: colors.white,
+    borderRadius: 6,
+    borderColor: colors.grayBG,
+    borderWidth: 1,
+    padding: 5,
+    paddingLeft: 12,
+    height: 68,
+  },
+});
+export default PhoneNumberFormField;

src/app/screens/RegisterScreen.js

@@ -39,6 +39,7 @@ import PasswordFormField from "../components/forms/PasswordFormField";
 import constants from "../config/constants";
 import CheckBox from "../components/forms/CheckBox";
 import defaultStyles from "../config/styles";
+import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -296,16 +297,11 @@ export default function RegisterScreen(props) {
   const authContext = useContext(AuthContext);
   const _moment = moment();
   const [date, setDate] = useState(_moment);
-  const [singUpFailed, setSingUpFailed] = useState(false);
   const [scroll, setScroll] = useState();
   const [showLog, setShowLog] = useState({ show: false, message: "" });
 
   const comparePassword = (password, confirmPassword) => {
-    if (password !== confirmPassword) {
-      setSingUpFailed(true);
-    } else {
-      setSingUpFailed(false);
-    }
+    return password !== confirmPassword;
   };
 
   const automaticLogin = async (form) => {
@@ -399,15 +395,30 @@ export default function RegisterScreen(props) {
           consent: false,
         }}
         onSubmit={(form, actions) => {
-          comparePassword(form.password, form.confirmPassword);
-
-          fieldsAreNotInUse(form, actions).then((isNotUsed) => {
-            if (isNotUsed) {
-              handleSubmit(form);
-            } else {
-              scroll.scrollTo({ x: 0, y: 0, animated: true });
-            }
-          });
+          console.log(form);
+          const psw_match = comparePassword(
+            form.password,
+            form.confirmPassword
+          );
+
+          if (psw_match) {
+            actions.setFieldError(
+              "confirmPassword",
+              "As senhas não correspondem"
+            );
+            scroll.scrollTo({ x: 0, y: 0, animated: true });
+
+          } else {
+            fieldsAreNotInUse(form, actions).then((isNotUsed) => {
+              if (isNotUsed) {
+                console.log("abobrinha");
+                // handleSubmit(form);
+              } else {
+                console.log("scrolll");
+                scroll.scrollTo({ x: 0, y: 0, animated: true });
+              }
+            });
+          }
         }}
         validationSchema={validationSchema}
       >
@@ -446,12 +457,12 @@ export default function RegisterScreen(props) {
             <Text style={styles.labelStyle}>Número do telefone:*</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIconsCustom name="phone" />
-              <FormField
+              <PhoneNumberFormField
                 flex={1}
-                maxLength={12}
                 name="number"
-                placeholder="(DD) XXXXX-XXXX"
                 paddingRight={2}
+                maxLength={11}
+                placeholder="(DD) XXXXX-XXXX"
               />
             </View>
             <Text style={styles.labelStyle}>Senha:*</Text>
@@ -476,10 +487,6 @@ export default function RegisterScreen(props) {
                 paddingRight={2}
               />
             </View>
-            <ErrorMessage
-              error="As senhas não correspondem"
-              visible={singUpFailed}
-            />
             <Text style={styles.labelStyle}>Data de nascimento:</Text>
             <View style={styles.iconField}>
               <MaterialCommunityIconsCustom name="calendar-today" />