added initial styling

1 files changed, 22 insertions, 32 deletions

diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index 416e7936..56493cf7 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,21 +1,9 @@
-import {StreamChat} from 'stream-chat';
-import React, {useEffect, useMemo, useState} from 'react';
-import {View, StyleSheet, Text, TouchableOpacity} from 'react-native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import {
-  Channel,
-  ChannelList,
-  Chat,
-  MessageInput,
-  MessageList,
-  OverlayProvider,
-  Streami18n,
-  Thread,
-  ThreadContextValue,
-  useAttachmentPickerContext,
-  useOverlayContext,
-} from 'stream-chat-react-native';
-
+import React, {useEffect, useMemo, useState} from 'react';
+import {SafeAreaView, StatusBar, StyleSheet, View} from 'react-native';
+import {StreamChat} from 'stream-chat';
+import {ChannelList, Chat, Streami18n} from 'stream-chat-react-native';
+import {MessagesHeader} from '../../components/messages';
 import {MainStackParams} from '../../routes';
 
 type ChatListScreenNavigationProp = StackNavigationProp<
@@ -60,23 +48,17 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
   const memoizedFilters = useMemo(() => filters, []);
 
   return (
-    <View style={styles.container}>
-      <Text style={styles.placeholder}>I am the chat list.</Text>
-      <TouchableOpacity
-        style={styles.button}
-        onPress={() => navigation.navigate('Chat')}>
-        <Text>Let's go to a conversation!</Text>
-      </TouchableOpacity>
-      {clientReady && (
-        <>
-          <Text>Fooooo</Text>
+    <View style={styles.background}>
+      <SafeAreaView>
+        <StatusBar barStyle="dark-content" />
+        <MessagesHeader />
+        {clientReady && (
           <Chat client={chatClient} i18nInstance={streami18n}>
-            <View style={{height: '100%'}}>
+            <View style={styles.chatContainer}>
               <ChannelList
                 filters={memoizedFilters}
                 onSelect={(channel) => {
-                  // setChannel(channel);
-                  // navigation.navigate('Channel');
+                  console.log('Navigate to chat screen here');
                 }}
                 options={{
                   presence: true,
@@ -87,13 +69,17 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
               />
             </View>
           </Chat>
-        </>
-      )}
+        )}
+      </SafeAreaView>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    backgroundColor: 'white',
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
@@ -109,6 +95,10 @@ const styles = StyleSheet.create({
     padding: 15,
     borderRadius: 5,
   },
+  chatContainer: {
+    height: '100%',
+    marginTop: 10,
+  },
 });
 
 export default ChatListScreen;