1 files changed, 15 insertions, 6 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index eeb1a7d6..59c53c99 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,7 +1,8 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
-import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useContext} from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {
   Channel,
   Chat,
@@ -9,7 +10,9 @@ import {
   MessageList,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
+import {isIPhoneX} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -20,24 +23,30 @@ interface ChatScreenProps {
  */
 const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
-  const headerHeight = useHeaderHeight();
   const tabbarHeight = useBottomTabBarHeight();
 
   return (
-    <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+    <SafeAreaView
+      style={[
+        styles.container,
+        // unable to figure out the padding issue, a hacky solution
+        {paddingBottom: isIPhoneX() ? tabbarHeight + 20 : tabbarHeight + 50},
+      ]}>
+      <ChatHeader />
       <Chat client={chatClient}>
-        <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+        <Channel channel={channel} keyboardVerticalOffset={0}>
           <MessageList onThreadSelect={() => {}} />
           <MessageInput />
         </Channel>
       </Chat>
-    </View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     backgroundColor: 'white',
+    flex: 1,
   },
 });