Adding phone mask in AccountScreen

src/app/screens/AccountScreen.js

@@ -9,17 +9,21 @@ import { MaterialCommunityIcons } from "@expo/vector-icons";
 import colors from "../config/colors";
 import ConfirmationModal from "../components/ConfirmationModal";
 import utils from "../config/utils";
+import { mask } from "react-native-mask-text";
 
 function UserHeader({ name, fone }) {
   const index  = utils.hashPhoneNumber(fone) % assets.avatar.length || 2
   const Avatar = assets.avatar[index];
+  
+  const _mask = fone?.length >= 12 ? "(999) 99999-9999" : "(99) 99999-9999";
+  const fone_mask = mask(fone, _mask);
 
   return (
     <View style={{ flexDirection: "row", alignItems: "center", justifyContent: name ? "flex-start" : "center" }}>
       <Avatar width={60} height={60}/>
       <View style={{ marginLeft: 16 }}> 
         <Text style={[styles.text, { fontWeight: "bold" }]}>{name}</Text>
-        <Text style={styles.text}>{fone}</Text>
+        <Text style={styles.text}>{fone ? fone_mask : ""}</Text>
       </View>
     </View>
   );