1 files changed, 18 insertions, 2 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx
index 0110fb74..c49792f9 100644
--- a/src/components/friends/InviteFriendTile.tsx
+++ b/src/components/friends/InviteFriendTile.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {
   StyleSheet,
   Text,
@@ -18,6 +18,7 @@ interface InviteFriendTileProps {
 
 const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => {
   const [invited, setInvited] = useState<boolean>(false);
+  const [formatedPhoneNumber, setFormattedPhoneNumber] = useState<string>('');
   const {profile} = useSelector((state: RootState) => state.user);
   const handleInviteFriend = async () => {
     const response = await inviteFriendService(
@@ -31,6 +32,21 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => {
     }
   };
 
+  useEffect(() => {
+    const formatPhoneNumer = () => {
+      const unformatted_number: string = item.phoneNumber;
+      const part_one: string = unformatted_number.substring(2, 5);
+      const part_two: string = unformatted_number.substring(5, 8);
+      const part_three: string = unformatted_number.substring(
+        8,
+        unformatted_number.length,
+      );
+      const temp = '(' + part_one + ')' + part_two + '-' + part_three;
+      setFormattedPhoneNumber(temp);
+    };
+    formatPhoneNumer();
+  });
+
   return (
     <TouchableWithoutFeedback>
       <View style={styles.container}>
@@ -50,7 +66,7 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => {
               color: '#6C6C6C',
               letterSpacing: normalize(0.1),
             }}>
-            {item.phoneNumber}
+            {formatedPhoneNumber}
           </Text>
         </View>
         <TouchableOpacity