Fixing bug when phone number has only 10 digits

src/app/components/forms/PhoneNumberFormField.js

@@ -1,25 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { useFormikContext } from "formik";
-
+import { unMask, mask } from "react-native-mask-text";
 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";
+// import { MaskedTextInput } from "react-native-mask-text";
 
 function PhoneNumberFormField({
   name,
   flex = 0,
-  maxLength = 0,
+  maxLength = 12,
   placeholder = "",
   paddingLeft = 16,
   paddingRight = 16,
 }) {
-  const { values, setFieldValue, errors, touched } = useFormikContext();
+  const {
+    values,
+    setFieldTouched,
+    setFieldValue,
+    errors,
+    touched,
+  } = useFormikContext();
+
+  var current_mask =
+    values[name].length >= 11 ? "(99) 99999-9999" : "(99) 9999-9999";
 
-  // console.log(values);
   return (
     <View flex={flex}>
       <View
@@ -28,14 +36,15 @@ function PhoneNumberFormField({
           paddingRight: paddingRight,
         }}
       >
-        <MaskedTextInput
-          mask="(99) 99999-9999"
-          placeholder={placeholder}
-          placeholderTextColor={colors.medium}
-          onChangeText={(_, rawText) => {
+        <TextInput
+          height={48}
+          onBlur={() => setFieldTouched(name)}
+          onChangeText={(val) => {
+            const rawText = unMask(val, current_mask);
             setFieldValue(name, rawText.substr(0, maxLength));
           }}
-          style={styles.container}
+          value={mask(values[name], current_mask)}
+          placeholder={placeholder}
           keyboardType="numeric"
         />
       </View>
@@ -47,19 +56,4 @@ function PhoneNumberFormField({
   );
 }
 
-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: 60,
-  },
-});
 export default PhoneNumberFormField;