1 files changed, 14 insertions, 17 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 8e6c1575..386feb03 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,8 +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 {useSelector} from 'react-redux';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {
   Channel,
   Chat,
@@ -10,8 +10,9 @@ import {
   MessageList,
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
+import ChatHeader from '../../components/messages/ChatHeader';
 import {MainStackParams} from '../../routes';
-import {RootState} from '../../store/rootReducer';
+import {isIPhoneX} from '../../utils';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -22,33 +23,29 @@ interface ChatScreenProps {
  */
 const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
-  const headerHeight = useHeaderHeight();
   const tabbarHeight = useBottomTabBarHeight();
-  const {userId: loggedInUserId} = useSelector(
-    (state: RootState) => state.user.user,
-  );
-  const otherMembers = channel
-    ? Object.values(channel.state.members).filter(
-        (member) => member.user?.id !== loggedInUserId,
-      )
-    : [];
-  const member = otherMembers.length === 1 ? otherMembers[0] : undefined;
 
   return (
-    <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+    <SafeAreaView
+      style={[
+        styles.container,
+        {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,
   },
 });