2 files changed, 51 insertions, 15 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index f9db0c77..0cbc7592 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,3 +1,4 @@
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext, useEffect, useMemo, useState} from 'react';
 import {Alert, SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
@@ -17,7 +18,7 @@ import {
   LocalReactionType,
   LocalUserType,
 } from '../../types';
-import {connectChatAccount} from '../../utils';
+import {connectChatAccount, HeaderHeight} from '../../utils';
 import NewChatModal from './NewChatModal';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
@@ -35,6 +36,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
   const [modalVisible, setChatModalVisible] = useState(false);
   const state: RootState = useStore().getState();
   const loggedInUserId = state.user.user.userId;
+  const tabbarHeight = useBottomTabBarHeight();
 
   const memoizedFilters = useMemo(
     () => ({
@@ -44,6 +46,15 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
     [],
   );
 
+  const chatTheme = {
+    channelListMessenger: {
+      flatListContent: {
+        backgroundColor: 'white',
+        paddingBottom: tabbarHeight + HeaderHeight + 20,
+      },
+    },
+  };
+
   useEffect(() => {
     connectChatAccount(loggedInUserId, chatClient)
       .then((success) => {
@@ -66,7 +77,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
             setChatModalVisible(true);
           }}
         />
-        <Chat client={chatClient}>
+        <Chat client={chatClient} style={chatTheme}>
           <View style={styles.chatContainer}>
             <ChannelList<
               LocalAttachmentType,
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 2307b242..f9467535 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,21 @@ 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,
+            ]}>
+            <MessageList onThreadSelect={() => {}} />
+            <MessageInput />
+          </Channel>
+        </OverlayProvider>
       </Chat>
     </SafeAreaView>
   );
@@ -105,6 +119,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,