profile screen fixes

src/components/AvatarWithInitials/index.tsx

@@ -8,12 +8,14 @@ export const AvatarWithInitials = ({
   text,
   flag,
   size,
-  borderColor = Colors.FILL_LIGHT
+  borderColor = Colors.FILL_LIGHT,
+  fontSize = 22
 }: {
   text: string;
   flag: string;
   size: number;
   borderColor?: string;
+  fontSize?: number;
 }) => {
   const shadowProps = [
     { textShadowOffset: { width: -0.5, height: -0.5 } },
@@ -31,11 +33,13 @@ export const AvatarWithInitials = ({
   }));
 
   return (
-    <View style={[styles.container, { width: size, height: size, borderRadius: size / 2, borderColor }]}>
+    <View
+      style={[styles.container, { width: size, height: size, borderRadius: size / 2, borderColor }]}
+    >
       <Image style={styles.avatar} source={{ uri: flag }} />
       <View style={styles.initialsContainer}>
         {shadowProps.map((props, index) => (
-          <Text key={index} style={[styles.initials, props]}>
+          <Text key={index} style={[styles.initials, props, { fontSize }]}>
             {text}
           </Text>
         ))}

src/components/AvatarWithInitials/styles.tsx

@@ -23,7 +23,6 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     color: Colors.DARK_BLUE,
     fontWeight: 'bold',
-    fontSize: 22,
     textAlign: 'center'
   }
 });

src/screens/InAppScreens/ProfileScreen/Components/PersonalInfo.tsx

@@ -1,5 +1,5 @@
 import { FC, useState } from 'react';
-import { TouchableOpacity, View, Text, Image } from 'react-native';
+import { TouchableOpacity, View, Text, Image, Dimensions } from 'react-native';
 import { Series, usePostGetProfileRegions } from '@api/user';
 import { NavigationProp } from '@react-navigation/native';
 import Modal from 'react-native-modal';
@@ -20,6 +20,7 @@ import { InfoItem } from './InfoItem';
 import { Colors } from 'src/theme';
 import { API_HOST } from 'src/constants';
 import { NAVIGATION_PAGES } from 'src/types';
+import { AvatarWithInitials } from 'src/components';
 
 type PersonalInfoProps = {
   data: {
@@ -50,6 +51,10 @@ type PersonalInfoProps = {
   isFriend: 0 | 1;
 };
 
+const AVATAR_SIZE = 28;
+const AVATAR_MARGIN = 8;
+const SCREEN_PADDING_PERCENT = 0.05;
+
 export const PersonalInfo: FC<PersonalInfoProps> = ({
   data,
   userId,
@@ -125,6 +130,10 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
     );
   };
 
+  const screenWidth = Dimensions.get('window').width;
+  const availableWidth = screenWidth * (1 - 2 * SCREEN_PADDING_PERCENT);
+  const maxAvatars = Math.floor(availableWidth / (AVATAR_SIZE - AVATAR_MARGIN)) - 2;
+
   return (
     <>
       <View style={styles.wrapper}>
@@ -152,10 +161,8 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
 
         {data.friends.length > 0 ? (
           <InfoItem inline={true} title={'FRIENDS'}>
-            {data.friends
-              .filter((f) => f.avatar)
-              .slice(0, 7)
-              .map((friend, index) => (
+            <View style={{ flexDirection: 'row', flex: 1 }}>
+              {data.friends.slice(0, maxAvatars).map((friend, index) => (
                 <Tooltip
                   isVisible={tooltipUser === index}
                   content={
@@ -170,18 +177,33 @@ export const PersonalInfo: FC<PersonalInfoProps> = ({
                   backgroundColor="transparent"
                   allowChildInteraction={false}
                 >
-                  <TouchableOpacity onPress={() => setTooltipUser(index)}>
-                    <Image
-                      style={styles.avatar}
-                      source={{ uri: API_HOST + '/img/avatars/' + friend.avatar }}
-                    />
+                  <TouchableOpacity
+                    onPress={() => setTooltipUser(index)}
+                    style={{ marginLeft: index === 0 ? 0 : -AVATAR_MARGIN }}
+                  >
+                    {friend.avatar ? (
+                      <Image
+                        style={styles.avatar}
+                        source={{ uri: API_HOST + '/img/avatars/' + friend.avatar }}
+                      />
+                    ) : (
+                      <AvatarWithInitials
+                        text={`${friend.first_name[0] ?? ''}${friend.last_name[0] ?? ''}`}
+                        flag={API_HOST + '/img/flags_new/' + friend.flag}
+                        size={28}
+                        borderColor={Colors.DARK_LIGHT}
+                        fontSize={11}
+                      />
+                    )}
                   </TouchableOpacity>
                 </Tooltip>
               ))}
+            </View>
+
             <Tooltip
               isVisible={tooltipUser === -1}
               content={<Text style={{}}>Only friends can see details.</Text>}
-              contentStyle={{ backgroundColor: Colors.FILL_LIGHT }}
+              contentStyle={{ backgroundColor: Colors.FILL_LIGHT, justifyContent: 'flex-end' }}
               placement="top"
               onClose={() => setTooltipUser(null)}
               backgroundColor="transparent"