stream-chat-react-native-core 4.11.0-beta.2 → 5.0.0-offline-support.2

package/src/components/Chat/Chat.tsx

@@ -23,6 +23,7 @@ import { useStreami18n } from '../../hooks/useStreami18n';
 import init from '../../init';
 
 import { SDK } from '../../native';
+import { QuickSqliteClient } from '../../store/QuickSqliteClient';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
 import { version } from '../../version.json';
@@ -39,6 +40,10 @@ export type ChatProps<
    * app goes to background, and reconnect when app comes to foreground.
    */
   closeConnectionOnBackground?: boolean;
+  /**
+   * Enables offline storage and loading for chat data.
+   */
+  enableOfflineSupport?: boolean;
   /**
    * Instance of Streami18n class should be provided to Chat component to enable internationalization.
    *
@@ -127,7 +132,14 @@ const ChatWithContext = <
 >(
   props: PropsWithChildren<ChatProps<StreamChatGenerics>>,
 ) => {
-  const { children, client, closeConnectionOnBackground = true, i18nInstance, style } = props;
+  const {
+    children,
+    client,
+    closeConnectionOnBackground = true,
+    enableOfflineSupport = false,
+    i18nInstance,
+    style,
+  } = props;
 
   const [channel, setChannel] = useState<Channel<StreamChatGenerics>>();
   const [translators, setTranslators] = useState<TranslatorFunctions>({
@@ -150,16 +162,18 @@ const ChatWithContext = <
 
   /**
    * Setup muted user listener
+   * TODO: reimplement
    */
   const mutedUsers = useMutedUsers<StreamChatGenerics>(client);
 
   useEffect(() => {
-    if (client.setUserAgent) {
+    if (client) {
       client.setUserAgent(`${SDK}-${Platform.OS}-${version}`);
       // This is to disable recovery related logic in js client, since we handle it in this SDK
       client.recoverStateOnReconnect = false;
+      client.persistUserOnConnectionFailure = enableOfflineSupport;
     }
-  }, []);
+  }, [client]);
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
@@ -170,11 +184,18 @@ const ChatWithContext = <
     channel,
     client,
     connectionRecovering,
+    enableOfflineSupport,
     isOnline,
     mutedUsers,
     setActiveChannel,
   });
 
+  useEffect(() => {
+    if (enableOfflineSupport) {
+      QuickSqliteClient.initializeDatabase();
+    }
+  }, []);
+
   if (loadingTranslators) return null;
 
   return (

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -10,14 +10,17 @@ export const useCreateChatContext = <
   channel,
   client,
   connectionRecovering,
+  enableOfflineSupport,
   isOnline,
   mutedUsers,
   setActiveChannel,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
-  const clientValues = `${client.clientID}${Object.keys(client.activeChannels).length}${
-    Object.keys(client.listeners).length
-  }${client.mutedChannels.length}`;
+  const clientValues = client
+    ? `${client.clientID}${Object.keys(client.activeChannels).length}${
+        Object.keys(client.listeners).length
+      }${client.mutedChannels.length}`
+    : 'Offline';
   const mutedUsersLength = mutedUsers.length;
 
   const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
@@ -26,6 +29,7 @@ export const useCreateChatContext = <
       channel,
       client,
       connectionRecovering,
+      enableOfflineSupport,
       isOnline,
       mutedUsers,
       setActiveChannel,

package/src/components/Chat/hooks/useMutedUsers.ts

@@ -9,15 +9,17 @@ export const useMutedUsers = <
 >(
   client: StreamChat<StreamChatGenerics>,
 ) => {
-  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(client.mutedUsers || []);
+  const [mutedUsers, setMutedUsers] = useState<Mute<StreamChatGenerics>[]>(
+    client?.mutedUsers || [],
+  );
 
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setMutedUsers((mutes) => event.me?.mutes || mutes || []);
     };
 
-    client.on('notification.mutes_updated', handleEvent);
-    return () => client.off('notification.mutes_updated', handleEvent);
+    const listener = client?.on('notification.mutes_updated', handleEvent);
+    return () => listener?.unsubscribe();
   }, [setMutedUsers]);
 
   return mutedUsers;

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -134,7 +134,7 @@ export const ImageGalleryFooterWithContext = <
   const [shareMenuOpen, setShareMenuOpen] = useState(false);
   const {
     theme: {
-      colors: { black, white },
+      colors: { black },
       imageGallery: {
         footer: {
           centerContainer,
@@ -186,7 +186,7 @@ export const ImageGalleryFooterWithContext = <
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[container, footerStyle, { backgroundColor: white }]}>
+      <ReanimatedSafeAreaView style={[container, footerStyle]}>
         {photo.type === 'video' ? (
           videoControlElement ? (
             videoControlElement({ duration, onPlayPause, onProgressDrag, paused, progress })
@@ -200,7 +200,7 @@ export const ImageGalleryFooterWithContext = <
             />
           )
         ) : null}
-        <View style={[styles.innerContainer, innerContainer, { backgroundColor: white }]}>
+        <View style={[styles.innerContainer, innerContainer, { backgroundColor: 'white' }]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
           ) : (

package/src/components/ImageGallery/components/ImageGridHandle.tsx

@@ -65,7 +65,7 @@ export const ImageGridHandle: React.FC<Props> = (props) => {
       {centerComponent ? (
         centerComponent({ closeGridView })
       ) : (
-        <Text style={[styles.text, { color: black }, handleText]}>{t('Photos and Videos')}</Text>
+        <Text style={[styles.text, { color: black }, handleText]}>{t('Photos')}</Text>
       )}
       {rightComponent ? (
         rightComponent({ closeGridView })

package/src/components/MessageInput/__tests__/__snapshots__/MessageInput.test.js.snap

@@ -652,20 +652,24 @@ Array [
     </View>
   </View>,
   <View
-    pointerEvents="none"
-    style={
-      Array [
-        Object {
-          "bottom": 0,
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        },
-        Object {
+    animatedStyle={
+      Object {
+        "value": Object {
           "opacity": 0,
         },
-      ]
+      }
+    }
+    collapsable={false}
+    pointerEvents="none"
+    style={
+      Object {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
     }
   >
     <View