diff options
| -rw-r--r-- | src/screens/chat/ChatScreen.tsx | 50 |
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; |