1 files changed, 67 insertions, 1 deletions
diff --git a/src/screens/chat/ChatListScreen.tsx b/src/screens/chat/ChatListScreen.tsx
index c49c790d..416e7936 100644
--- a/src/screens/chat/ChatListScreen.tsx
+++ b/src/screens/chat/ChatListScreen.tsx
@@ -1,6 +1,20 @@
-import React from 'react';
+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 {MainStackParams} from '../../routes';
 
@@ -15,6 +29,36 @@ interface ChatListScreenProps {
  * Screen that displays all of the user's active conversations.
  */
 const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
+  const filters = {
+    example: 'example-apps',
+    members: {$in: ['ron']},
+    type: 'messaging',
+  };
+  const [clientReady, setClientReady] = useState(false);
+
+  const chatClient = StreamChat.getInstance('q95x9hkbyd6p');
+  const userToken =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c';
+  const user = {
+    id: 'ron',
+  };
+
+  useEffect(() => {
+    const setupClient = async () => {
+      await chatClient.connectUser(user, userToken);
+
+      return setClientReady(true);
+    };
+
+    setupClient();
+  }, []);
+
+  const streami18n = new Streami18n({
+    language: 'en',
+  });
+
+  const memoizedFilters = useMemo(() => filters, []);
+
   return (
     <View style={styles.container}>
       <Text style={styles.placeholder}>I am the chat list.</Text>
@@ -23,6 +67,28 @@ const ChatListScreen: React.FC<ChatListScreenProps> = ({navigation}) => {
         onPress={() => navigation.navigate('Chat')}>
         <Text>Let's go to a conversation!</Text>
       </TouchableOpacity>
+      {clientReady && (
+        <>
+          <Text>Fooooo</Text>
+          <Chat client={chatClient} i18nInstance={streami18n}>
+            <View style={{height: '100%'}}>
+              <ChannelList
+                filters={memoizedFilters}
+                onSelect={(channel) => {
+                  // setChannel(channel);
+                  // navigation.navigate('Channel');
+                }}
+                options={{
+                  presence: true,
+                  state: true,
+                  watch: true,
+                }}
+                sort={{last_message_at: -1}}
+              />
+            </View>
+          </Chat>
+        </>
+      )}
     </View>
   );
 };