2 files changed, 51 insertions, 6 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 1554274d..3d791f3c 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,7 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {
   Channel,
@@ -10,7 +10,9 @@ import {
   MessageList,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
 import ChatHeader from '../../components/messages/ChatHeader';
+import {TAGG_LIGHT_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {ScreenType} from '../../types';
 import {isIPhoneX} from '../../utils';
@@ -26,6 +28,20 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
   const tabbarHeight = useBottomTabBarHeight();
 
+  const chatTheme = {
+    messageList: {
+      container: {
+        backgroundColor: 'white',
+      },
+    },
+  };
+
+  const SendButton = () => (
+    <View style={styles.submitButton}>
+      <UpArrowIcon color={'white'} />
+    </View>
+  );
+
   return (
     <SafeAreaView
       style={[
@@ -34,10 +50,17 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
       ]}>
       <ChatHeader screenType={ScreenType.Chat} />
-      <Chat client={chatClient}>
-        <Channel channel={channel} keyboardVerticalOffset={0}>
+      <Chat client={chatClient} style={chatTheme}>
+        <Channel
+          channel={channel}
+          keyboardVerticalOffset={0}
+          messageActions={({copyMessage, deleteMessage}) => [
+            copyMessage,
+            deleteMessage,
+          ]}>
           <MessageList onThreadSelect={() => {}} />
-          <MessageInput />
+          {/* <MessageInput Input={ChatInput} /> */}
+          <MessageInput SendButton={SendButton} />
         </Channel>
       </Chat>
     </SafeAreaView>
@@ -49,6 +72,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',
+  },
 });
 
 export default ChatScreen;