stream-chat-react-native-core 5.40.0-rc.2 → 5.40.0

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

@@ -4,14 +4,15 @@ import { deleteChannel } from '../../../store/apis/deleteChannel';
 import { deleteMember } from '../../../store/apis/deleteMember';
 import { deleteMessagesForChannel } from '../../../store/apis/deleteMessagesForChannel';
 import { updateMessage } from '../../../store/apis/updateMessage';
+import { updatePollMessage } from '../../../store/apis/updatePollMessage';
 import { upsertChannelData } from '../../../store/apis/upsertChannelData';
 import { upsertChannelDataFromChannel } from '../../../store/apis/upsertChannelDataFromChannel';
 import { upsertChannels } from '../../../store/apis/upsertChannels';
 import { upsertMembers } from '../../../store/apis/upsertMembers';
 import { upsertMessages } from '../../../store/apis/upsertMessages';
 import { upsertReads } from '../../../store/apis/upsertReads';
+import { QuickSqliteClient } from '../../../store/QuickSqliteClient';
 import { createSelectQuery } from '../../../store/sqlite-utils/createSelectQuery';
-import { SqliteClient } from '../../../store/SqliteClient';
 import { PreparedQueries } from '../../../store/types';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -33,7 +34,7 @@ export const handleEventToSyncDB = <
     const cid = event.cid || event.channel?.cid;
 
     if (!cid) return createQueries(flush);
-    const channels = SqliteClient.executeSql.apply(
+    const channels = QuickSqliteClient.executeSql.apply(
       null,
       createSelectQuery('channels', ['cid'], {
         cid,
@@ -54,7 +55,7 @@ export const handleEventToSyncDB = <
         if (channelQuery) {
           const newQueries = [...channelQuery, ...createQueries(false)];
           if (flush !== false) {
-            SqliteClient.executeSqlBatch(newQueries);
+            QuickSqliteClient.executeSqlBatch(newQueries);
           }
           return newQueries;
         } else {
@@ -223,5 +224,23 @@ export const handleEventToSyncDB = <
     }
   }
 
+  if (
+    [
+      'poll.closed',
+      'poll.updated',
+      'poll.vote_casted',
+      'poll.vote_changed',
+      'poll.vote_removed',
+    ].includes(type)
+  ) {
+    const poll = event.poll;
+    if (poll) {
+      return updatePollMessage({
+        flush,
+        poll,
+      });
+    }
+  }
+
   return [];
 };

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

@@ -14,6 +14,7 @@ export const useCreateChatContext = <
   ImageComponent,
   isOnline,
   mutedUsers,
+  resizableCDNHosts,
   setActiveChannel,
 }: ChatContextValue<StreamChatGenerics>) => {
   const channelId = channel?.id;
@@ -34,6 +35,7 @@ export const useCreateChatContext = <
       ImageComponent,
       isOnline,
       mutedUsers,
+      resizableCDNHosts,
       setActiveChannel,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps

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

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import NetInfo, { NetInfoSubscription } from '@react-native-community/netinfo';
+import type { NetInfoSubscription } from '@react-native-community/netinfo';
 
 import type { StreamChat, Event as StreamEvent } from 'stream-chat';
 
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
+import { NetInfo } from '../../../native';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 
@@ -55,9 +56,9 @@ export const useIsOnline = <
 
     const handleRecoveredEvent = () => setConnectionRecovering(false);
 
-    const notifyChatClient = (isConnected: boolean | null) => {
-      if (client?.wsConnection && isConnected) {
-        if (isConnected) {
+    const notifyChatClient = (netInfoState: boolean) => {
+      if (client?.wsConnection) {
+        if (netInfoState) {
           client.wsConnection.onlineStatusChanged({
             type: 'online',
           } as Event);
@@ -72,27 +73,23 @@ export const useIsOnline = <
     let unsubscribeNetInfo: NetInfoSubscription;
     const setNetInfoListener = () => {
       unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
-        if (!netInfoState && !client.wsConnection?.isHealthy) {
+        if (netInfoState === false && !client.wsConnection?.isHealthy) {
           setConnectionRecovering(true);
           setIsOnline(false);
         }
-        const { isConnected, isInternetReachable } = netInfoState;
-        notifyChatClient(
-          isInternetReachable !== null ? isInternetReachable && isConnected : isConnected,
-        );
+        notifyChatClient(netInfoState);
       });
     };
 
     const setInitialOnlineState = async () => {
-      const { isConnected } = await NetInfo.fetch();
+      const status = await NetInfo.fetch();
       if (isMounted.current) {
-        setIsOnline(isConnected);
-        notifyChatClient(isConnected);
+        setIsOnline(status);
+        notifyChatClient(status);
       }
     };
 
     setInitialOnlineState();
-
     const chatListeners: Array<ReturnType<StreamChat['on']>> = [];
 
     if (client) {

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,13 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
+import { Image, ImageStyle, Keyboard, Platform, StyleSheet, ViewStyle } from 'react-native';
 
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+  PanGestureHandler,
+  PinchGestureHandler,
+  TapGestureHandler,
+} from 'react-native-gesture-handler';
 
 import Animated, {
   Easing,
   runOnJS,
   runOnUI,
-  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -37,17 +40,21 @@ import {
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
-import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
+import {
+  OverlayProviderProps,
+  useOverlayContext,
+} from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
-import { isVideoPlayerAvailable, VideoType } from '../../native';
+import { isVideoPackageAvailable, VideoType } from '../../native';
 import { DefaultStreamChatGenerics, FileTypes } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
+const isAndroid = Platform.OS === 'android';
+
 const MARGIN = 32;
 
 export enum HasPinched {
@@ -105,7 +112,7 @@ export type ImageGalleryCustomComponents<
 
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
-    overlayOpacity: SharedValue<number>;
+    overlayOpacity: Animated.SharedValue<number>;
   } & Pick<
       OverlayProviderProps<StreamChatGenerics>,
       | 'giphyVersion'
@@ -132,7 +139,6 @@ export const ImageGallery = <
   const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
     Photo<StreamChatGenerics>[]
   >([]);
-  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       colors: { white_snow },
@@ -140,6 +146,7 @@ export const ImageGallery = <
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
+  const { overlay } = useOverlayContext();
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
@@ -207,6 +214,14 @@ export const ImageGallery = <
    */
   const headerFooterVisible = useSharedValue(1);
 
+  /**
+   * Gesture handler refs
+   */
+  const doubleTapRef = useRef<TapGestureHandler>(null);
+  const panRef = useRef<PanGestureHandler>(null);
+  const pinchRef = useRef<PinchGestureHandler>(null);
+  const singleTapRef = useRef<TapGestureHandler>(null);
+
   /**
    * Shared values for movement
    */
@@ -234,7 +249,7 @@ export const ImageGallery = <
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
+            (isVideoPackageAvailable() && attachment.type === FileTypes.Video),
         )
         .reverse() || [];
 
@@ -261,7 +276,6 @@ export const ImageGallery = <
             ? giphyURL
             : getResizedImageUrl({
                 height: fullWindowHeight,
-                resizableCDNHosts,
                 url: imageUrl,
                 width: fullWindowWidth,
               }),
@@ -344,7 +358,7 @@ export const ImageGallery = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
-  const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
+  const { onDoubleTap, onPan, onPinch, onSingleTap } = useImageGalleryGestures({
     currentImageHeight,
     halfScreenHeight,
     halfScreenWidth,
@@ -509,67 +523,104 @@ export const ImageGallery = <
       style={[StyleSheet.absoluteFillObject, showScreenStyle]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
-      <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
+      <TapGestureHandler
+        minPointers={1}
+        numberOfTaps={1}
+        onGestureEvent={onSingleTap}
+        ref={singleTapRef}
+        waitFor={[panRef, pinchRef, doubleTapRef]}
+      >
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
-            {imageGalleryAttachments.map((photo, i) =>
-              photo.type === FileTypes.Video ? (
-                <AnimatedGalleryVideo
-                  attachmentId={photo.id}
-                  handleEnd={handleEnd}
-                  handleLoad={handleLoad}
-                  handleProgress={handleProgress}
-                  index={i}
-                  key={`${photo.uri}-${i}`}
-                  offsetScale={offsetScale}
-                  paused={photo.paused || false}
-                  previous={selectedIndex > i}
-                  repeat={true}
-                  scale={scale}
-                  screenHeight={fullWindowHeight}
-                  selected={selectedIndex === i}
-                  shouldRender={Math.abs(selectedIndex - i) < 4}
-                  source={{ uri: photo.uri }}
-                  style={[
-                    {
-                      height: fullWindowHeight * 8,
-                      marginRight: MARGIN,
-                      width: fullWindowWidth * 8,
-                    },
-                    slide,
-                  ]}
-                  translateX={translateX}
-                  translateY={translateY}
-                  videoRef={videoRef}
-                />
-              ) : (
-                <AnimatedGalleryImage
-                  accessibilityLabel={'Image Item'}
-                  index={i}
-                  key={`${photo.uri}-${i}`}
-                  offsetScale={offsetScale}
-                  photo={photo}
-                  previous={selectedIndex > i}
-                  scale={scale}
-                  screenHeight={fullWindowHeight}
-                  selected={selectedIndex === i}
-                  shouldRender={Math.abs(selectedIndex - i) < 4}
-                  style={[
-                    {
-                      height: fullWindowHeight * 8,
-                      marginRight: MARGIN,
-                      width: fullWindowWidth * 8,
-                    },
-                    slide,
-                  ]}
-                  translateX={translateX}
-                  translateY={translateY}
-                />
-              ),
-            )}
-          </Animated.View>
+          <TapGestureHandler
+            maxDeltaX={8}
+            maxDeltaY={8}
+            maxDist={8}
+            minPointers={1}
+            numberOfTaps={2}
+            onGestureEvent={onDoubleTap}
+            ref={doubleTapRef}
+          >
+            <Animated.View style={StyleSheet.absoluteFillObject}>
+              <PinchGestureHandler
+                onGestureEvent={onPinch}
+                ref={pinchRef}
+                simultaneousHandlers={[panRef]}
+              >
+                <Animated.View style={StyleSheet.absoluteFill}>
+                  <PanGestureHandler
+                    enabled={overlay === 'gallery'}
+                    maxPointers={isAndroid ? undefined : 1}
+                    minDist={10}
+                    onGestureEvent={onPan}
+                    ref={panRef}
+                    simultaneousHandlers={[pinchRef]}
+                  >
+                    <Animated.View style={StyleSheet.absoluteFill}>
+                      <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
+                        {imageGalleryAttachments.map((photo, i) =>
+                          photo.type === FileTypes.Video ? (
+                            <AnimatedGalleryVideo
+                              attachmentId={photo.id}
+                              handleEnd={handleEnd}
+                              handleLoad={handleLoad}
+                              handleProgress={handleProgress}
+                              index={i}
+                              key={`${photo.uri}-${i}`}
+                              offsetScale={offsetScale}
+                              paused={photo.paused || false}
+                              previous={selectedIndex > i}
+                              repeat={true}
+                              scale={scale}
+                              screenHeight={fullWindowHeight}
+                              selected={selectedIndex === i}
+                              shouldRender={Math.abs(selectedIndex - i) < 4}
+                              source={{ uri: photo.uri }}
+                              style={[
+                                {
+                                  height: fullWindowHeight * 8,
+                                  marginRight: MARGIN,
+                                  width: fullWindowWidth * 8,
+                                },
+                                slide,
+                              ]}
+                              translateX={translateX}
+                              translateY={translateY}
+                              videoRef={videoRef}
+                            />
+                          ) : (
+                            <AnimatedGalleryImage
+                              accessibilityLabel={'Image Item'}
+                              index={i}
+                              key={`${photo.uri}-${i}`}
+                              offsetScale={offsetScale}
+                              photo={photo}
+                              previous={selectedIndex > i}
+                              scale={scale}
+                              screenHeight={fullWindowHeight}
+                              selected={selectedIndex === i}
+                              shouldRender={Math.abs(selectedIndex - i) < 4}
+                              style={[
+                                {
+                                  height: fullWindowHeight * 8,
+                                  marginRight: MARGIN,
+                                  width: fullWindowWidth * 8,
+                                },
+                                slide,
+                              ]}
+                              translateX={translateX}
+                              translateY={translateY}
+                            />
+                          ),
+                        )}
+                      </Animated.View>
+                    </Animated.View>
+                  </PanGestureHandler>
+                </Animated.View>
+              </PinchGestureHandler>
+            </Animated.View>
+          </TapGestureHandler>
         </Animated.View>
-      </GestureDetector>
+      </TapGestureHandler>
       <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={imageGalleryAttachments[selectedIndex]}
@@ -640,7 +691,6 @@ export const clamp = (value: number, lowerBound: number, upperBound: number) =>
 const styles = StyleSheet.create({
   animatedContainer: {
     alignItems: 'center',
-    backgroundColor: 'red',
     flexDirection: 'row',
   },
 });

package/src/components/ImageGallery/__tests__/AnimatedVideoGallery.test.tsx

@@ -10,6 +10,17 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { AnimatedGalleryVideo, AnimatedGalleryVideoType } from '../components/AnimatedGalleryVideo';
 
+jest.mock('../../../native.ts', () => {
+  const View = require('react-native/Libraries/Components/View/View');
+  return {
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
+    Video: View,
+  };
+});
+
 const getComponent = (props: Partial<AnimatedGalleryVideoType>) => (
   <ThemeProvider theme={defaultTheme}>
     <AnimatedGalleryVideo {...(props as unknown as AnimatedGalleryVideoType)} />

package/src/components/ImageGallery/__tests__/ImageGallery.test.tsx

@@ -24,10 +24,11 @@ import { ImageGallery } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
-    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isShareImageAvailable: jest.fn(() => true),
-    isVideoPlayerAvailable: jest.fn(() => true),
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+    },
     Video: View,
   };
 });

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

@@ -28,10 +28,12 @@ jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
     deleteFile: jest.fn(),
-    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isShareImageAvailable: jest.fn(() => true),
-    isVideoPlayerAvailable: jest.fn(() => true),
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+      fetch: jest.fn(),
+    },
     saveFile: jest.fn(),
     shareImage: jest.fn(),
     Video: View,

package/src/components/ImageGallery/__tests__/ImageGalleryGrid.test.tsx

@@ -22,7 +22,7 @@ const getComponent = (props: Partial<ImageGridType> = {}) => {
 
   return (
     <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider style={defaultTheme}>
         <ImageGrid {...(props as unknown as ImageGridType)} />
       </ThemeProvider>
     </TranslationProvider>

package/src/components/ImageGallery/__tests__/ImageGalleryGridHandle.test.tsx

@@ -24,7 +24,7 @@ const getComponent = (props: Partial<ImageGridHandleProps> = {}) => {
 
   return (
     <TranslationProvider value={{ t } as unknown as TranslationContextValue}>
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider style={defaultTheme}>
         <ImageGridHandle {...(props as unknown as ImageGridHandleProps)} />
       </ThemeProvider>
     </TranslationProvider>

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -30,10 +30,12 @@ import { ImageGallery, ImageGalleryCustomComponents } from '../ImageGallery';
 jest.mock('../../../native.ts', () => {
   const View = require('react-native/Libraries/Components/View/View');
   return {
-    isFileSystemAvailable: jest.fn(() => true),
     isImageMediaLibraryAvailable: jest.fn(() => true),
-    isShareImageAvailable: jest.fn(() => true),
-    isVideoPlayerAvailable: jest.fn(() => true),
+    isVideoPackageAvailable: jest.fn(() => true),
+    NetInfo: {
+      addEventListener: jest.fn(),
+      fetch: jest.fn(),
+    },
     Video: View,
   };
 });

package/src/components/ImageGallery/__tests__/ImageGalleryOverlay.test.tsx

@@ -19,11 +19,14 @@ import {
 import { generateImageAttachment } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import * as NativeUtils from '../../../native';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import type { MessageType } from '../../MessageList/hooks/useMessageList';
 import { ImageGalleryOverlay } from '../components/ImageGalleryOverlay';
 
 describe('ImageGalleryOverlay', () => {
+  jest.spyOn(NativeUtils, 'isVideoPackageAvailable').mockImplementation(() => true);
+
   it('should have currentBottomSheetIndex as a prop', async () => {
     const chatClient = await getTestClientWithUser({ id: 'testID' });
     const setOverlayMock = jest.fn();

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
-import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useViewport } from '../../../hooks/useViewport';
 
@@ -10,15 +10,15 @@ const oneEighth = 1 / 8;
 type Props = {
   accessibilityLabel: string;
   index: number;
-  offsetScale: SharedValue<number>;
+  offsetScale: Animated.SharedValue<number>;
   photo: { uri: string };
   previous: boolean;
-  scale: SharedValue<number>;
+  scale: Animated.SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
-  translateX: SharedValue<number>;
-  translateY: SharedValue<number>;
+  translateX: Animated.SharedValue<number>;
+  translateY: Animated.SharedValue<number>;
   style?: StyleProp<ImageStyle>;
 };
 

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
-import Animated, { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useViewport } from '../../../hooks/useViewport';
 import {
-  isVideoPlayerAvailable,
+  isVideoPackageAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -13,7 +13,7 @@ import {
   VideoType,
 } from '../../../native';
 
-import { Spinner } from '../../UIComponents/Spinner';
+import { Spinner } from '../../Spinner/Spinner';
 
 const oneEighth = 1 / 8;
 
@@ -23,16 +23,16 @@ export type AnimatedGalleryVideoType = {
   handleLoad: (index: string, duration: number) => void;
   handleProgress: (index: string, progress: number, hasEnd?: boolean) => void;
   index: number;
-  offsetScale: SharedValue<number>;
+  offsetScale: Animated.SharedValue<number>;
   paused: boolean;
   previous: boolean;
-  scale: SharedValue<number>;
+  scale: Animated.SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
   source: { uri: string };
-  translateX: SharedValue<number>;
-  translateY: SharedValue<number>;
+  translateX: Animated.SharedValue<number>;
+  translateY: Animated.SharedValue<number>;
   videoRef: React.RefObject<VideoType>;
   repeat?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -188,7 +188,7 @@ export const AnimatedGalleryVideo = React.memo(
           style,
         ]}
       >
-        {isVideoPlayerAvailable() ? (
+        {isVideoPackageAvailable() && (
           <Video
             onBuffer={onBuffer}
             onEnd={onEnd}
@@ -204,7 +204,7 @@ export const AnimatedGalleryVideo = React.memo(
             uri={source.uri}
             videoRef={videoRef}
           />
-        ) : null}
+        )}
         <Animated.View
           accessibilityLabel='Spinner'
           style={[