Browse Source

Adding phone mask in AccountScreen

master
GabrielTrettel 3 years ago
parent
commit
35efc377d9
  1. 6
      src/app/screens/AccountScreen.js

6
src/app/screens/AccountScreen.js

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

Loading…
Cancel
Save