added stream-chat, working sample

3 files changed, 84 insertions, 7 deletions

diff --git a/babel.config.js b/babel.config.js
index f842b77f..983e075d 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: ['react-native-reanimated/plugin'],
 };
diff --git a/package.json b/package.json
index 0451e743..658ed62c 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,16 @@
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/blur": "^3.6.0",
+    "@react-native-community/cameraroll": "^4.0.4",
     "@react-native-community/masked-view": "^0.1.10",
+    "@react-native-community/netinfo": "^6.0.0",
     "@react-native-firebase/app": "^10.0.0",
     "@react-native-firebase/messaging": "^10.0.0",
     "@react-navigation/bottom-tabs": "^5.7.2",
     "@react-navigation/native": "^5.6.1",
     "@react-navigation/stack": "^5.6.2",
     "@reduxjs/toolkit": "^1.4.0",
+    "@stream-io/flat-list-mvcp": "^0.0.9",
     "@types/react-native-vector-icons": "^6.4.5",
     "moment": "^2.29.1",
     "react": "16.13.1",
@@ -30,17 +33,22 @@
     "react-native-contacts": "^6.0.4",
     "react-native-date-picker": "^3.2.5",
     "react-native-device-info": "^7.3.1",
+    "react-native-document-picker": "^5.0.3",
     "react-native-elements": "^2.3.2",
-    "react-native-gesture-handler": "^1.6.1",
+    "react-native-fs": "^2.16.6",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-haptic-feedback": "^1.11.0",
     "react-native-hyperlink": "^0.0.19",
-    "react-native-image-crop-picker": "^0.32.2",
+    "react-native-image-crop-picker": "^0.36.0",
+    "react-native-image-resizer": "^1.4.4",
     "react-native-inappbrowser-reborn": "^3.4.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-picker-select": "^7.0.0",
     "react-native-push-notifications": "^3.0.10",
-    "react-native-reanimated": "^1.9.0",
-    "react-native-safe-area-context": "^3.0.6",
+    "react-native-reanimated": "2.0.0-rc.0",
+    "react-native-safe-area-context": "^3.2.0",
     "react-native-screens": "^2.9.0",
+    "react-native-share": "^5.1.7",
     "react-native-snap-carousel": "^3.9.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-svg": "^12.1.0",
@@ -48,7 +56,9 @@
     "react-promise-tracker": "^2.1.0",
     "react-redux": "^7.2.2",
     "reanimated-bottom-sheet": "^1.0.0-alpha.22",
-    "rn-fetch-blob": "^0.12.0"
+    "rn-fetch-blob": "^0.12.0",
+    "stream-chat-react-native": "^3.2.0",
+    "stream-chat-react-native-core": "^3.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
@@ -88,4 +98,4 @@
       "./node_modules/react-native-gesture-handler/jestSetup.js"
     ]
   }
-}
+}
\ No newline at end of file
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>
   );
 };