2 files changed, 21 insertions, 2 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 61a16c93..605163d2 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -22,6 +22,7 @@ import {
 } from '../../types';
 
 import NewChatModal from './NewChatModal';
+import {HeaderHeight} from '../../utils';
 type ChatListScreenNavigationProp = StackNavigationProp<
   MainStackParams,
   'ChatList'
@@ -39,6 +40,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
   const [clientReady, setClientReady] = useState(false);
   const state: RootState = useStore().getState();
   const loggedInUserId = state.user.user.userId;
+  const tabbarHeight = useBottomTabBarHeight();
 
   const memoizedFilters = useMemo(
     () => ({
@@ -48,6 +50,15 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
     [],
   );
 
+  const chatTheme = {
+    channelListMessenger: {
+      flatListContent: {
+        backgroundColor: 'white',
+        paddingBottom: tabbarHeight + HeaderHeight + 20,
+      },
+    },
+  };
+
   useEffect(() => {
     const setupClient = async () => {
       const chatToken = await AsyncStorage.getItem('chatToken');
@@ -76,7 +87,7 @@ const ChatListScreen: React.FC<ChatListScreenProps> = () => {
           }}
         />
         {clientReady && (
-          <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 feb95b83..7e189be5 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -26,6 +26,14 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
   const tabbarHeight = useBottomTabBarHeight();
 
+  const chatTheme = {
+    messageList: {
+      container: {
+        backgroundColor: 'white',
+      },
+    },
+  };
+
   return (
     <SafeAreaView
       style={[
@@ -34,7 +42,7 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
         {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
       ]}>
       <ChatHeader />
-      <Chat client={chatClient}>
+      <Chat client={chatClient} style={chatTheme}>
         <Channel channel={channel} keyboardVerticalOffset={0}>
           <MessageList onThreadSelect={() => {}} />
           <MessageInput Input={ChatInput} />