Merge pull request #363 from shravyaramesh/chat-theme

[TMA-770, 776] Message Bubble and Tagg Indicator

1 files changed, 67 insertions, 5 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 161bd07d..656c1c47 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -6,15 +6,23 @@ import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 import {
   Channel,
   Chat,
+  DeepPartial,
   MessageInput,
   MessageList,
   useAttachmentPickerContext,
+  Theme,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
-import {ChatHeader, ChatInput, TabsGradient} from '../../components';
+import {
+  ChatHeader,
+  ChatInput,
+  MessageAvatar,
+  TabsGradient,
+  TypingIndicator,
+} from '../../components';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
-import {HeaderHeight, isIPhoneX} from '../../utils';
+import {HeaderHeight, isIPhoneX, normalize, SCREEN_WIDTH} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -28,11 +36,12 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const tabbarHeight = useBottomTabBarHeight();
   const {setTopInset} = useAttachmentPickerContext();
   const insets = useSafeAreaInsets();
-
-  const chatTheme = {
+  const chatTheme: DeepPartial<Theme> = {
     messageList: {
       container: {
         backgroundColor: 'white',
+        width: SCREEN_WIDTH * 0.95,
+        alignSelf: 'center',
       },
     },
     messageInput: {
@@ -41,6 +50,56 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         height: 70,
       },
     },
+    avatar: {
+      container: {
+        borderRadius: 10,
+        width: normalize(18),
+        height: normalize(18),
+      },
+    },
+    messageSimple: {
+      avatarWrapper: {
+        container: {
+          width: normalize(20),
+          zIndex: 1,
+          bottom: 20,
+        },
+      },
+      container: {
+        paddingTop: 8,
+        flexDirection: 'row',
+      },
+      content: {
+        metaContainer: {
+          marginLeft: 5,
+        },
+        container: {},
+        containerInner: {
+          backgroundColor: '#E4F0F2',
+          borderColor: 'transparent',
+          borderBottomLeftRadius: 10,
+          borderTopLeftRadius: 10,
+          borderBottomRightRadius: 10,
+          borderTopRightRadius: 10,
+        },
+      },
+      status: {
+        statusContainer: {},
+      },
+    },
+  };
+
+  const loggedInUsersMessageTheme = {
+    messageSimple: {
+      content: {
+        containerInner: {
+          backgroundColor: '#DEE6F4',
+        },
+        container: {
+          left: 0,
+        },
+      },
+    },
   };
 
   useEffect(() => {
@@ -63,7 +122,10 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
           messageActions={({copyMessage, deleteMessage}) => [
             copyMessage,
             deleteMessage,
-          ]}>
+          ]}
+          TypingIndicator={TypingIndicator}
+          myMessageTheme={loggedInUsersMessageTheme}
+          MessageAvatar={MessageAvatar}>
           <MessageList onThreadSelect={() => {}} />
           {/* <MessageInput /> */}
           <MessageInput Input={ChatInput} />