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

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

@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import Animated, { SharedValue } from 'react-native-reanimated';
 
-import { useViewport } from '../../../hooks/useViewport';
 import {
-  isVideoPackageAvailable,
+  isVideoPlayerAvailable,
   PlaybackStatus,
   Video,
   VideoPayloadData,
@@ -13,7 +12,8 @@ import {
   VideoType,
 } from '../../../native';
 
-import { Spinner } from '../../Spinner/Spinner';
+import { Spinner } from '../../UIComponents/Spinner';
+import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
 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: Animated.SharedValue<number>;
+  offsetScale: SharedValue<number>;
   paused: boolean;
   previous: boolean;
-  scale: Animated.SharedValue<number>;
+  scale: SharedValue<number>;
   screenHeight: number;
   selected: boolean;
   shouldRender: boolean;
   source: { uri: string };
-  translateX: Animated.SharedValue<number>;
-  translateY: Animated.SharedValue<number>;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
   videoRef: React.RefObject<VideoType>;
   repeat?: boolean;
   style?: StyleProp<ViewStyle>;
@@ -72,11 +72,6 @@ export const AnimatedGalleryVideo = React.memo(
       translateY,
       videoRef,
     } = props;
-    const { vw } = useViewport();
-
-    const screenWidth = vw(100);
-    const halfScreenWidth = vw(50);
-
     const onLoadStart = () => {
       setOpacity(1);
     };
@@ -131,30 +126,16 @@ export const AnimatedGalleryVideo = React.memo(
       }
     };
 
-    const animatedViewStyles = useAnimatedStyle<ViewStyle>(() => {
-      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
@@ -171,24 +152,8 @@ export const AnimatedGalleryVideo = React.memo(
     }
 
     return (
-      <Animated.View
-        accessibilityLabel='Image Gallery Video'
-        style={[
-          animatedViewStyles,
-          {
-            transform: [
-              { scaleX: -1 },
-              { translateY: -screenHeight * 3.5 },
-              {
-                translateX: -translateX.value + 7 * screenWidth * (0.5 + index),
-              },
-              { scale: oneEighth },
-            ],
-          },
-          style,
-        ]}
-      >
-        {isVideoPackageAvailable() && (
+      <Animated.View accessibilityLabel='Image Gallery Video' style={[...animatedStyles, style]}>
+        {isVideoPlayerAvailable() ? (
           <Video
             onBuffer={onBuffer}
             onEnd={onEnd}
@@ -204,7 +169,7 @@ export const AnimatedGalleryVideo = React.memo(
             uri={source.uri}
             videoRef={videoRef}
           />
-        )}
+        ) : null}
         <Animated.View
           accessibilityLabel='Spinner'
           style={[

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

@@ -1,53 +1,29 @@
 import React, { useState } from 'react';
 import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 import { ImageGalleryVideoControl } from './ImageGalleryVideoControl';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Grid as GridIconDefault, Share as ShareIconDefault } from '../../../icons';
-import { deleteFile, saveFile, shareImage, VideoType } from '../../../native';
+import {
+  deleteFile,
+  isFileSystemAvailable,
+  isShareImageAvailable,
+  saveFile,
+  shareImage,
+  VideoType,
+} from '../../../native';
 
 import { DefaultStreamChatGenerics, FileTypes } from '../../../types/types';
 import type { Photo } from '../ImageGallery';
 
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
-
-const styles = StyleSheet.create({
-  centerContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  imageCountText: {
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  innerContainer: {
-    flexDirection: 'row',
-    minHeight: 56,
-  },
-  leftContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginLeft: 8,
-  },
-  rightContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginRight: 8,
-  },
-  wrapper: {
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    right: 0,
-  },
-});
-
 export type ImageGalleryFooterCustomComponent<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ({
@@ -94,7 +70,7 @@ type ImageGalleryFooterPropsWithContext<
   accessibilityLabel: string;
   duration: number;
   onPlayPause: () => void;
-  opacity: Animated.SharedValue<number>;
+  opacity: SharedValue<number>;
   openGridView: () => void;
   paused: boolean;
   photo: Photo<StreamChatGenerics>;
@@ -102,7 +78,7 @@ type ImageGalleryFooterPropsWithContext<
   progress: number;
   selectedIndex: number;
   videoRef: React.RefObject<VideoType>;
-  visible: Animated.SharedValue<number>;
+  visible: SharedValue<number>;
 };
 
 export const ImageGalleryFooterWithContext = <
@@ -148,7 +124,7 @@ export const ImageGalleryFooterWithContext = <
       opacity: opacity.value,
       transform: [
         {
-          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolate.CLAMP),
+          translateY: interpolate(visible.value, [0, 1], [height, 0], Extrapolation.CLAMP),
         },
       ],
     }),
@@ -158,6 +134,9 @@ export const ImageGalleryFooterWithContext = <
   const share = async () => {
     setShareMenuOpen(true);
     try {
+      if (!shareImage || !deleteFile) {
+        return;
+      }
       const extension = photo.mime_type?.split('/')[1] || 'jpg';
       const localFile = await saveFile({
         fileName: `${photo.user?.id || 'ChatPhoto'}-${
@@ -175,26 +154,28 @@ export const ImageGalleryFooterWithContext = <
   };
 
   return (
-    <Animated.View
+    <SafeAreaView
       accessibilityLabel={accessibilityLabel}
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
       style={styles.wrapper}
     >
-      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, footerStyle, container]}>
-        {photo.type === FileTypes.Video ? (
-          videoControlElement ? (
-            videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
-          ) : (
-            <ImageGalleryVideoControl
-              duration={duration}
-              onPlayPause={onPlayPause}
-              paused={paused}
-              progress={progress}
-              videoRef={videoRef}
-            />
-          )
-        ) : null}
+      <Animated.View style={footerStyle}>
+        <View style={[{ backgroundColor: white }, container]}>
+          {photo.type === FileTypes.Video ? (
+            videoControlElement ? (
+              videoControlElement({ duration, onPlayPause, paused, progress, videoRef })
+            ) : (
+              <ImageGalleryVideoControl
+                duration={duration}
+                onPlayPause={onPlayPause}
+                paused={paused}
+                progress={progress}
+                videoRef={videoRef}
+              />
+            )
+          ) : null}
+        </View>
         <View style={[styles.innerContainer, { backgroundColor: white }, innerContainer]}>
           {leftElement ? (
             leftElement({ openGridView, photo, share, shareMenuOpen })
@@ -223,8 +204,8 @@ export const ImageGalleryFooterWithContext = <
             </TouchableOpacity>
           )}
         </View>
-      </ReanimatedSafeAreaView>
-    </Animated.View>
+      </Animated.View>
+    </SafeAreaView>
   );
 };
 
@@ -244,7 +225,8 @@ const ShareButton = ({ share, ShareIcon, shareMenuOpen }: ShareButtonProps) => {
     },
   } = useTheme();
 
-  if (shareImage === null) {
+  // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
+  if (!isShareImageAvailable() || !isFileSystemAvailable()) {
     return null;
   }
 
@@ -305,3 +287,35 @@ export const ImageGalleryFooter = <
 ) => <MemoizedImageGalleryFooter {...props} />;
 
 ImageGalleryFooter.displayName = 'ImageGalleryFooter{imageGallery{footer}}';
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  imageCountText: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  innerContainer: {
+    flexDirection: 'row',
+    paddingVertical: 4,
+  },
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  rightContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginRight: 8,
+  },
+  wrapper: {
+    bottom: 0,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});

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

@@ -1,6 +1,11 @@
 import React, { useMemo, useState } from 'react';
 import { Pressable, SafeAreaView, StyleSheet, Text, View, ViewStyle } from 'react-native';
-import Animated, { Extrapolate, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
 
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -11,41 +16,6 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import type { Photo } from '../ImageGallery';
 
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
-
-const styles = StyleSheet.create({
-  centerContainer: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  date: {
-    fontSize: 12,
-    fontWeight: '500',
-    marginTop: 4,
-    opacity: 0.5,
-  },
-  innerContainer: {
-    flexDirection: 'row',
-    minHeight: 56,
-  },
-  leftContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    marginLeft: 8,
-  },
-  rightContainer: {
-    marginRight: 8,
-    width: 24, // Width of icon currently on left
-  },
-  userName: {
-    fontSize: 16,
-    fontWeight: '700',
-  },
-});
-
 export type ImageGalleryHeaderCustomComponent<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = ({
@@ -67,8 +37,8 @@ export type ImageGalleryHeaderCustomComponentProps<
 
 type Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   ImageGalleryHeaderCustomComponentProps<StreamChatGenerics> & {
-    opacity: Animated.SharedValue<number>;
-    visible: Animated.SharedValue<number>;
+    opacity: SharedValue<number>;
+    visible: SharedValue<number>;
     photo?: Photo<StreamChatGenerics>;
     /* Lookup key in the language corresponding translations sheet to perform date formatting */
   };
@@ -88,7 +58,6 @@ export const ImageGalleryHeader = <
           centerContainer,
           container,
           dateText,
-          innerContainer,
           leftContainer,
           rightContainer,
           usernameText,
@@ -114,7 +83,7 @@ export const ImageGalleryHeader = <
     opacity: opacity.value,
     transform: [
       {
-        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolate.CLAMP),
+        translateY: interpolate(visible.value, [0, 1], [-height, 0], Extrapolation.CLAMP),
       },
     ],
   }));
@@ -124,12 +93,12 @@ export const ImageGalleryHeader = <
   };
 
   return (
-    <View
+    <SafeAreaView
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView style={[{ backgroundColor: white }, container, headerStyle]}>
-        <View style={[styles.innerContainer, innerContainer]}>
+      <Animated.View style={headerStyle}>
+        <View style={[styles.container, { backgroundColor: white }, container]}>
           {leftElement ? (
             leftElement({ hideOverlay, photo })
           ) : (
@@ -155,9 +124,41 @@ export const ImageGalleryHeader = <
             <View style={[styles.rightContainer, rightContainer]} />
           )}
         </View>
-      </ReanimatedSafeAreaView>
-    </View>
+      </Animated.View>
+    </SafeAreaView>
   );
 };
 
 ImageGalleryHeader.displayName = 'ImageGalleryHeader{imageGallery{header}}';
+
+const styles = StyleSheet.create({
+  centerContainer: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+  },
+  date: {
+    fontSize: 12,
+    fontWeight: '500',
+    opacity: 0.5,
+  },
+  leftContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  rightContainer: {
+    marginRight: 8,
+    width: 24, // Width of icon currently on left
+  },
+  userName: {
+    fontSize: 16,
+    fontWeight: '700',
+    marginBottom: 2,
+  },
+});

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

@@ -8,6 +8,7 @@ import {
 import Animated, {
   Easing,
   runOnJS,
+  SharedValue,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
@@ -16,7 +17,7 @@ import Animated, {
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 type Props = {
-  animatedBottomSheetIndex: Animated.SharedValue<number>;
+  animatedBottomSheetIndex: SharedValue<number>;
   closeGridView: () => void;
   currentBottomSheetIndex: number;
 };

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import type Animated from 'react-native-reanimated';
-import { useSharedValue } from 'react-native-reanimated';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
 
 import { render, renderHook, waitFor } from '@testing-library/react-native';
 
@@ -10,8 +9,8 @@ import { ImageGalleryHeader } from '../ImageGalleryHeader';
 
 it('doesnt fail if fromNow is not available on first render', async () => {
   try {
-    let sharedValueOpacity: Animated.SharedValue<number>;
-    let sharedValueVisible: Animated.SharedValue<number>;
+    let sharedValueOpacity: SharedValue<number>;
+    let sharedValueVisible: SharedValue<number>;
     renderHook(() => {
       sharedValueOpacity = useSharedValue(1);
       sharedValueVisible = useSharedValue(1);

package/src/components/ImageGallery/hooks/useAnimatedGalleryStyle.tsx

@@ -0,0 +1,83 @@
+import type { ImageStyle } from 'react-native';
+import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
+
+import { useViewport } from '../../../hooks/useViewport';
+
+type Props = {
+  index: number;
+  offsetScale: SharedValue<number>;
+  previous: boolean;
+  scale: SharedValue<number>;
+  screenHeight: number;
+  selected: boolean;
+  translateX: SharedValue<number>;
+  translateY: SharedValue<number>;
+};
+
+const oneEighth = 1 / 8;
+
+export const useAnimatedGalleryStyle = ({
+  index,
+  offsetScale,
+  previous,
+  scale,
+  screenHeight,
+  selected,
+  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 animatedGalleryStyle = 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 = useAnimatedStyle(() => {
+    const xScaleOffset = -7 * screenWidth * (0.5 + index);
+    const yScaleOffset = -screenHeight * 3.5;
+    return {
+      transform: [
+        { scaleX: -1 },
+        { translateY: yScaleOffset },
+        {
+          translateX: -xScaleOffset,
+        },
+        { scale: oneEighth },
+      ],
+    };
+  }, [index]);
+
+  return [animatedGalleryStyle, animatedStyles];
+};