stream-chat-react-native-core 5.44.2-beta.1 → 6.0.0-beta.1

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

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

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

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import type { NetInfoSubscription } from '@react-native-community/netinfo';
+import NetInfo, { 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';
 
@@ -51,9 +50,9 @@ export const useIsOnline = <
 
     const handleRecoveredEvent = () => setConnectionRecovering(false);
 
-    const notifyChatClient = (netInfoState: boolean) => {
-      if (client?.wsConnection) {
-        if (netInfoState) {
+    const notifyChatClient = (isConnected: boolean | null) => {
+      if (client?.wsConnection && isConnected) {
+        if (isConnected) {
           client.wsConnection.onlineStatusChanged({
             type: 'online',
           } as Event);
@@ -68,23 +67,27 @@ export const useIsOnline = <
     let unsubscribeNetInfo: NetInfoSubscription;
     const setNetInfoListener = () => {
       unsubscribeNetInfo = NetInfo.addEventListener((netInfoState) => {
-        if (netInfoState === false && !client.wsConnection?.isHealthy) {
+        if (!netInfoState && !client.wsConnection?.isHealthy) {
           setConnectionRecovering(true);
           setIsOnline(false);
         }
-        notifyChatClient(netInfoState);
+        const { isConnected, isInternetReachable } = netInfoState;
+        notifyChatClient(
+          isInternetReachable !== null ? isInternetReachable && isConnected : isConnected,
+        );
       });
     };
 
     const setInitialOnlineState = async () => {
-      const status = await NetInfo.fetch();
+      const { isConnected } = await NetInfo.fetch();
       if (isMounted.current) {
-        setIsOnline(status);
-        notifyChatClient(status);
+        setIsOnline(isConnected);
+        notifyChatClient(isConnected);
       }
     };
 
     setInitialOnlineState();
+
     const chatListeners: Array<ReturnType<StreamChat['on']>> = [];
 
     if (client) {

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,16 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Image, ImageStyle, Keyboard, Platform, StyleSheet, ViewStyle } from 'react-native';
+import { Image, ImageStyle, Keyboard, StyleSheet, ViewStyle } from 'react-native';
 
-import {
-  PanGestureHandler,
-  PinchGestureHandler,
-  TapGestureHandler,
-} from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
   Easing,
   runOnJS,
   runOnUI,
+  SharedValue,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -40,21 +37,17 @@ import {
 
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
+import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import { useImageGalleryContext } from '../../contexts/imageGalleryContext/ImageGalleryContext';
-import {
-  OverlayProviderProps,
-  useOverlayContext,
-} from '../../contexts/overlayContext/OverlayContext';
+import { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useViewport } from '../../hooks/useViewport';
-import { isVideoPackageAvailable, VideoType } from '../../native';
+import { isVideoPlayerAvailable, 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 {
@@ -112,7 +105,7 @@ export type ImageGalleryCustomComponents<
 
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryCustomComponents<StreamChatGenerics> & {
-    overlayOpacity: Animated.SharedValue<number>;
+    overlayOpacity: SharedValue<number>;
   } & Pick<
       OverlayProviderProps<StreamChatGenerics>,
       | 'giphyVersion'
@@ -139,6 +132,7 @@ export const ImageGallery = <
   const [imageGalleryAttachments, setImageGalleryAttachments] = useState<
     Photo<StreamChatGenerics>[]
   >([]);
+  const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
       colors: { white_snow },
@@ -146,7 +140,6 @@ export const ImageGallery = <
     },
   } = useTheme();
   const [gridPhotos, setGridPhotos] = useState<Photo<StreamChatGenerics>[]>([]);
-  const { overlay } = useOverlayContext();
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
@@ -214,14 +207,6 @@ 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
    */
@@ -249,7 +234,7 @@ export const ImageGallery = <
               !attachment.title_link &&
               !attachment.og_scrape_url &&
               getUrlOfImageAttachment(attachment)) ||
-            (isVideoPackageAvailable() && attachment.type === FileTypes.Video),
+            (isVideoPlayerAvailable() && attachment.type === FileTypes.Video),
         )
         .reverse() || [];
 
@@ -276,6 +261,7 @@ export const ImageGallery = <
             ? giphyURL
             : getResizedImageUrl({
                 height: fullWindowHeight,
+                resizableCDNHosts,
                 url: imageUrl,
                 width: fullWindowWidth,
               }),
@@ -358,7 +344,7 @@ export const ImageGallery = <
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [uriForCurrentImage]);
 
-  const { onDoubleTap, onPan, onPinch, onSingleTap } = useImageGalleryGestures({
+  const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
     currentImageHeight,
     halfScreenHeight,
     halfScreenWidth,
@@ -523,104 +509,67 @@ export const ImageGallery = <
       style={[StyleSheet.absoluteFillObject, showScreenStyle]}
     >
       <Animated.View style={[StyleSheet.absoluteFillObject, containerBackground]} />
-      <TapGestureHandler
-        minPointers={1}
-        numberOfTaps={1}
-        onGestureEvent={onSingleTap}
-        ref={singleTapRef}
-        waitFor={[panRef, pinchRef, doubleTapRef]}
-      >
+      <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFillObject}>
-          <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 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>
-      </TapGestureHandler>
+      </GestureDetector>
       <ImageGalleryHeader<StreamChatGenerics>
         opacity={headerFooterOpacity}
         photo={imageGalleryAttachments[selectedIndex]}
@@ -661,6 +610,7 @@ export const ImageGallery = <
               {...imageGalleryCustomComponents?.gridHandle}
             />
           )}
+          // @ts-ignore
           handleHeight={imageGalleryGridHandleHeight}
           index={0}
           onChange={(index: number) => setCurrentBottomSheetIndex(index)}

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

@@ -10,17 +10,6 @@ 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,11 +24,10 @@ 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),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });

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

@@ -28,12 +28,10 @@ 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),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-      fetch: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     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 style={defaultTheme}>
+      <ThemeProvider theme={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 style={defaultTheme}>
+      <ThemeProvider theme={defaultTheme}>
         <ImageGridHandle {...(props as unknown as ImageGridHandleProps)} />
       </ThemeProvider>
     </TranslationProvider>

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

@@ -30,12 +30,10 @@ 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),
-    isVideoPackageAvailable: jest.fn(() => true),
-    NetInfo: {
-      addEventListener: jest.fn(),
-      fetch: jest.fn(),
-    },
+    isShareImageAvailable: jest.fn(() => true),
+    isVideoPlayerAvailable: jest.fn(() => true),
     Video: View,
   };
 });

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

@@ -19,14 +19,11 @@ 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,24 +1,24 @@
 import React from 'react';
 import { View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { SharedValue } from 'react-native-reanimated';
 
-import { useViewport } from '../../../hooks/useViewport';
+import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
 const oneEighth = 1 / 8;
 
 type Props = {
   accessibilityLabel: string;
   index: number;
-  offsetScale: Animated.SharedValue<number>;
+  offsetScale: SharedValue<number>;
   photo: { uri: string };
   previous: boolean;
-  scale: Animated.SharedValue<number>;
+  scale: SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
-  translateX: Animated.SharedValue<number>;
-  translateY: Animated.SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
   style?: StyleProp<ImageStyle>;
 };
 
@@ -38,43 +38,17 @@ export const AnimatedGalleryImage = React.memo(
       translateX,
       translateY,
     } = props;
-    const { vw } = useViewport();
 
-    const screenWidth = vw(100);
-    const halfScreenWidth = vw(50);
-
-    /**
-     * The current image, designated by selected is scaled and translated
-     * based on the gestures. The rendered images before and after the
-     * currently selected image also translated in X if the scale is
-     * greater than one so they keep the same distance from the selected
-     * image as it is scaled. If the scale is less than one they stay in
-     * place as to not come into the screen when the image shrinks.
-     */
-    const animatedGalleryImageStyle = useAnimatedStyle<ImageStyle>(() => {
-      const xScaleOffset = -7 * screenWidth * (0.5 + index);
-      const yScaleOffset = -screenHeight * 3.5;
-      return {
-        transform: [
-          {
-            translateX: selected
-              ? translateX.value + xScaleOffset
-              : scale.value < 1 || scale.value !== offsetScale.value
-              ? xScaleOffset
-              : previous
-              ? translateX.value - halfScreenWidth * (scale.value - 1) + xScaleOffset
-              : translateX.value + halfScreenWidth * (scale.value - 1) + xScaleOffset,
-          },
-          {
-            translateY: selected ? translateY.value + yScaleOffset : yScaleOffset,
-          },
-          {
-            scale: selected ? scale.value / 8 : oneEighth,
-          },
-          { scaleX: -1 },
-        ],
-      };
-    }, [previous, selected]);
+    const animatedStyles = useAnimatedGalleryStyle({
+      index,
+      offsetScale,
+      previous,
+      scale,
+      screenHeight,
+      selected,
+      translateX,
+      translateY,
+    });
 
     /**
      * An empty view is rendered for images not close to the currently
@@ -90,20 +64,7 @@ export const AnimatedGalleryImage = React.memo(
         accessibilityLabel={accessibilityLabel}
         resizeMode={'contain'}
         source={{ uri: photo.uri }}
-        style={[
-          animatedGalleryImageStyle,
-          {
-            transform: [
-              { scaleX: -1 },
-              { translateY: -screenHeight * 3.5 },
-              {
-                translateX: -translateX.value + 7 * screenWidth * (0.5 + index),
-              },
-              { scale: oneEighth },
-            ],
-          },
-          style,
-        ]}
+        style={[...animatedStyles, style]}
       />
     );
   },