1 files changed, 40 insertions, 13 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 2307b242..682906ee 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,21 +1,22 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {Image, StyleSheet, Text, Vibration, View} from 'react-native';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useStore} from 'react-redux';
-import {RootState} from '../../store/rootReducer';
 import {
   Channel,
   Chat,
-  MessageActions,
   MessageInput,
   MessageList,
+  OverlayProvider,
   useMessageContext,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import ChatHeader from '../../components/messages/ChatHeader';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
 import {isIPhoneX, SCREEN_WIDTH} from '../../utils';
 
@@ -32,6 +33,14 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const loggedInUserId = state.user.user.userId;
   const tabbarHeight = useBottomTabBarHeight();
 
+  const chatTheme = {
+    messageList: {
+      container: {
+        backgroundColor: 'white',
+      },
+    },
+  };
+
   const isOwnMessage = (message) => {
     if (message.user.id === loggedInUserId) {
       return true;
@@ -85,16 +94,23 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
       ]}>
       <ChatHeader screenType={ScreenType.Chat} />
-      <Chat client={chatClient}>
-        <Channel
-          channel={channel}
-          keyboardVerticalOffset={0}
-          MessageSimple={CustomMessageUIComponent}
-          messageActions={[]}
-          OverlayReactionList={() => null}>
-          <MessageList onThreadSelect={() => {}} />
-          <MessageInput />
-        </Channel>
+      <Chat client={chatClient} style={chatTheme}>
+        <OverlayProvider topInset={0} bottomInset={0}>
+          <Channel
+            channel={channel}
+            keyboardVerticalOffset={0}
+            OverlayReactionList={() => null}
+            // MessageSimple={CustomMessageUIComponent}
+            messageActions={({copyMessage, deleteMessage}) => [
+              copyMessage,
+              deleteMessage,
+            ]}
+            // AttachButton={() => null}
+          >
+            <MessageList onThreadSelect={() => {}} />
+            <MessageInput />
+          </Channel>
+        </OverlayProvider>
       </Chat>
     </SafeAreaView>
   );
@@ -105,6 +121,17 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flex: 1,
   },
+
+  submitButton: {
+    height: 35,
+    width: 35,
+    backgroundColor: TAGG_LIGHT_BLUE,
+    borderRadius: 999,
+    justifyContent: 'center',
+    alignItems: 'center',
+    bottom: -5,
+    alignSelf: 'flex-end',
+  },
   messageText: {
     width: 196,
     paddingHorizontal: 23,