finished chat poc

1 files changed, 24 insertions, 21 deletions

diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index 08145b89..eeb1a7d6 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -1,40 +1,43 @@
-import React from 'react';
-import {View, StyleSheet, Text} from 'react-native';
-import {StackNavigationProp} from '@react-navigation/stack';
-
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
+import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
+import React, {useContext} from 'react';
+import {StyleSheet, View} from 'react-native';
+import {
+  Channel,
+  Chat,
+  MessageInput,
+  MessageList,
+} from 'stream-chat-react-native';
+import {ChatContext} from '../../App';
 import {MainStackParams} from '../../routes';
-import {navigationRef} from '../../RootNavigation';
-import {RouteProp} from '@react-navigation/native';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
-type ChatScreenRouteProp = RouteProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
   navigation: ChatScreenNavigationProp;
-  route: ChatScreenRouteProp;
 }
 /*
  * Screen that displays all of the user's active conversations.
  */
-const ChatScreen: React.FC<ChatScreenProps> = ({route}) => {
-  const {channel, chatClient} = route.params;
-  console.log(channel);
-  console.log(chatClient);
+const ChatScreen: React.FC<ChatScreenProps> = () => {
+  const {channel, chatClient} = useContext(ChatContext);
+  const headerHeight = useHeaderHeight();
+  const tabbarHeight = useBottomTabBarHeight();
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.placeholder}>I am a chat!</Text>
+    <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
+      <Chat client={chatClient}>
+        <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
+          <MessageList onThreadSelect={() => {}} />
+          <MessageInput />
+        </Channel>
+      </Chat>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  placeholder: {
-    fontSize: 14,
-    fontWeight: 'bold',
+    backgroundColor: 'white',
   },
 });