1 files changed, 53 insertions, 0 deletions
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
new file mode 100644
index 00000000..59c53c99
--- /dev/null
+++ b/src/screens/chat/ChatScreen.tsx
@@ -0,0 +1,53 @@
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React, {useContext} from 'react';
+import {StyleSheet} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {
+  Channel,
+  Chat,
+  MessageInput,
+  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 {
+  navigation: ChatScreenNavigationProp;
+}
+/*
+ * Screen that displays all of the user's active conversations.
+ */
+const ChatScreen: React.FC<ChatScreenProps> = () => {
+  const {channel, chatClient} = useContext(ChatContext);
+  const tabbarHeight = useBottomTabBarHeight();
+
+  return (
+    <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={0}>
+          <MessageList onThreadSelect={() => {}} />
+          <MessageInput />
+        </Channel>
+      </Chat>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    flex: 1,
+  },
+});
+
+export default ChatScreen;