empty chat, avatars fix

src/screens/InAppScreens/MessagesScreen/ChatScreen/index.tsx

@@ -31,7 +31,7 @@ import {
   LongPressGestureHandler,
   Swipeable
 } from 'react-native-gesture-handler';
-import { Header } from 'src/components';
+import { AvatarWithInitials, Header } from 'src/components';
 import { Colors } from 'src/theme';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { Video } from 'expo-av';
@@ -61,6 +61,7 @@ import EmojiSelectorModal from '../Components/EmojiSelectorModal';
 import { styles } from './styles';
 import SendIcon from 'assets/icons/messages/send.svg';
 import { SheetManager } from 'react-native-actions-sheet';
+import { NAVIGATION_PAGES } from 'src/types';
 
 const options = {
   enableVibrateFallback: true,
@@ -473,13 +474,15 @@ const ChatScreen = ({ route }: { route: any }) => {
     closeEmojiSelector();
   };
 
-  useEffect(() => {
-    navigation?.getParent()?.setOptions({
-      tabBarStyle: {
-        display: 'none'
-      }
-    });
-  }, [navigation]);
+  useFocusEffect(
+    useCallback(() => {
+      navigation?.getParent()?.setOptions({
+        tabBarStyle: {
+          display: 'none'
+        }
+      });
+    }, [navigation])
+  );
 
   useEffect(() => {
     const intervalId = setInterval(() => {
@@ -917,16 +920,29 @@ const ChatScreen = ({ route }: { route: any }) => {
         <Header
           label={name}
           rightElement={
-            <Image
-              source={{ uri: API_HOST + avatar }}
-              style={{
-                width: 30,
-                height: 30,
-                borderRadius: 15,
-                borderWidth: 1,
-                borderColor: Colors.FILL_LIGHT
-              }}
-            />
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate(
+                  ...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: id }] as never)
+                )
+              }
+            >
+              {avatar ? (
+                <Image source={{ uri: API_HOST + avatar }} style={styles.avatar} />
+              ) : (
+                <AvatarWithInitials
+                  text={
+                    name
+                      .split(/ (.+)/)
+                      .map((n) => n[0])
+                      .join('') ?? ''
+                  }
+                  flag={API_HOST + 'flag.png'}
+                  size={30}
+                  fontSize={12}
+                />
+              )}
+            </TouchableOpacity>
           }
         />
       </View>
@@ -1002,6 +1018,13 @@ const ChatScreen = ({ route }: { route: any }) => {
           maxComposerHeight={100}
           renderComposer={(props) => <Composer {...props} />}
           keyboardShouldPersistTaps="handled"
+          renderChatEmpty={() => (
+            <View style={styles.emptyChat}>
+              <Text
+                style={styles.emptyChatText}
+              >{`No messages yet.\nFeel free to start the conversation.`}</Text>
+            </View>
+          )}
           shouldUpdateMessage={shouldUpdateMessage}
           scrollToBottom={true}
           scrollToBottomComponent={renderScrollToBottom}

src/screens/InAppScreens/MessagesScreen/ChatScreen/styles.tsx

@@ -85,5 +85,24 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     top: 40,
     right: 20
+  },
+  avatar: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: Colors.FILL_LIGHT
+  },
+  emptyChat: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    transform: [{ scaleY: -1 }]
+  },
+  emptyChatText: {
+    fontSize: getFontSize(14),
+    fontWeight: '600',
+    textAlign: 'center',
+    color: Colors.DARK_BLUE,
   }
 });

src/screens/InAppScreens/MessagesScreen/Components/MoreModal.tsx

@@ -17,6 +17,7 @@ import { useChatStore } from 'src/stores/chatStore';
 import TrashIcon from 'assets/icons/travels-screens/trash-solid.svg';
 import BanIcon from 'assets/icons/messages/ban.svg';
 import BellSlashIcon from 'assets/icons/messages/bell-slash.svg';
+import { AvatarWithInitials } from 'src/components';
 
 const MoreModal = () => {
   const insets = useSafeAreaInsets();
@@ -142,7 +143,21 @@ const MoreModal = () => {
               );
             }}
           >
-            <Image source={{ uri: API_HOST + chatData?.avatar }} style={styles.avatar} />
+            {chatData?.avatar ? (
+              <Image source={{ uri: API_HOST + chatData.avatar }} style={styles.avatar} />
+            ) : (
+              <AvatarWithInitials
+                text={
+                  chatData.name
+                    .split(/ (.+)/)
+                    .map((n) => n[0])
+                    .join('') ?? ''
+                }
+                flag={API_HOST + 'flag.png'}
+                size={32}
+                fontSize={12}
+              />
+            )}
             <Text style={styles.name}>{chatData.name}</Text>
           </TouchableOpacity>
 

src/screens/InAppScreens/MessagesScreen/Components/SearchUsersModal.tsx

@@ -56,7 +56,7 @@ const SearchModal = () => {
         <AvatarWithInitials
           text={`${item.first_name[0] ?? ''}${item.last_name[0] ?? ''}`}
           flag={API_HOST + item.homebase_flag}
-          size={28}
+          size={30}
           fontSize={12}
         />
       )}
@@ -142,9 +142,9 @@ const styles = StyleSheet.create({
     gap: 8
   },
   avatar: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
     borderWidth: 1,
     borderColor: Colors.FILL_LIGHT
   },

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -184,7 +184,7 @@ const MessagesScreen = () => {
               <AvatarWithInitials
                 text={
                   item.name
-                    .split(' ')
+                    .split(/ (.+)/)
                     .map((n) => n[0])
                     .join('') ?? ''
                 }
@@ -262,7 +262,7 @@ const MessagesScreen = () => {
               <AvatarWithInitials
                 text={item.first_name[0] + item.last_name[0]}
                 flag={API_HOST + item?.flag}
-                size={30}
+                size={32}
                 fontSize={12}
               />
             )}