1 files changed, 48 insertions, 2 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index c281f67a..418638b7 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -3,6 +3,7 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext, useEffect} from 'react';
 import {Image, StyleSheet, View} from 'react-native';
 import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
+import {useStore} from 'react-redux';
 import {
   Channel,
   Chat,
@@ -11,12 +12,19 @@ import {
   MessageList,
   useAttachmentPickerContext,
   Theme,
+  useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {ChatHeader, ChatInput, TabsGradient} from '../../components';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
-import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils';
+import {
+  getMember,
+  HeaderHeight,
+  isIPhoneX,
+  normalize,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -30,6 +38,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
+  const state = useStore().getState();
+  const member = getMember(channel, state);
 
   const chatTheme: DeepPartial<Theme> = {
     messageList: {
@@ -65,6 +75,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         flexDirection: 'row',
       },
       content: {
+        metaContainer: {
+          marginLeft: 5,
+        },
         container: {},
         containerInner: {
           backgroundColor: '#E4F0F2',
@@ -75,6 +88,9 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           borderTopRightRadius: 10,
         },
       },
+      status: {
+        statusContainer: {},
+      },
     },
   };
 
@@ -106,6 +122,24 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
     );
   };
 
+  const CustomMessageAvatar = () => {
+    const message = useMessageContext();
+    return (
+      <View style={styles.messageAvatarContainer}>
+        {message.lastGroupMessage === true && (
+          <Image
+            style={styles.messageAvatar}
+            source={
+              member
+                ? {uri: member.user?.thumbnail_url}
+                : require('../../assets/images/avatar-placeholder.png')
+            }
+          />
+        )}
+      </View>
+    );
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -124,7 +158,8 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
             deleteMessage,
           ]}
           TypingIndicator={CustomTypingIndicator}
-          myMessageTheme={loggedInUsersMessageTheme}>
+          myMessageTheme={loggedInUsersMessageTheme}
+          MessageAvatar={CustomMessageAvatar}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />
@@ -151,6 +186,17 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  messageAvatarContainer: {
+    width: normalize(20),
+    zIndex: 1,
+    bottom: 20,
+    marginRight: '2%',
+  },
+  messageAvatar: {
+    borderRadius: 50,
+    width: normalize(18),
+    height: normalize(18),
+  },
 });
 
 export default ChatScreen;