stream-chat-react-native-core 9.4.0-beta.12 → 9.4.0-beta.13

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

@@ -89,10 +89,13 @@ describe('ImageGallery', () => {
     render(
       <ImageGalleryComponent
         message={generateMessage({
+          // Video is placed at index 1 so it sits within the video-slide
+          // window (`shouldRender < 2`) — at index 2 it would render as a
+          // spacer instead of <AnimatedGalleryVideo>.
           attachments: [
             generateImageAttachment(),
-            generateGiphyAttachment(),
             generateVideoAttachment({ type: 'video' }),
+            generateGiphyAttachment(),
           ],
         })}
       />,

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

@@ -95,13 +95,14 @@ describe('ImageGallery adjustable cycling', () => {
     });
   });
 
-  it('does not apply the adjustable role when accessibility is disabled', async () => {
+  it('does not mount the a11y probe when accessibility is disabled', async () => {
     renderWithAssets(3, false);
 
+    // The probe is the sole element with this label; the parent ImageGallery
+    // renders only the visual background View when a11y is off, with no
+    // accessibility attributes to expose.
     await waitFor(() => {
-      const root = findGalleryRoot();
-      expect(root.props.accessibilityRole).toBeUndefined();
-      expect(root.props.accessibilityActions).toBeUndefined();
+      expect(screen.queryByLabelText('Image Gallery', { includeHiddenElements: true })).toBeNull();
     });
   });
 

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
@@ -30,10 +30,6 @@ type Props = {
   style?: StyleProp<ImageStyle>;
 };
 
-const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
-});
-
 export const AnimatedGalleryImage = React.memo(
   (props: Props) => {
     const {
@@ -50,7 +46,13 @@ export const AnimatedGalleryImage = React.memo(
     } = props;
     const { imageGalleryStateStore } = useImageGalleryContext();
     const { resizableCDNHosts } = useChatConfigContext();
-    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
+    const shouldRenderSelector = useCallback(
+      (state: ImageGalleryState) => ({
+        shouldRender: Math.abs(state.currentIndex - index) < 4,
+      }),
+      [index],
+    );
+    const { shouldRender } = useStateStore(imageGalleryStateStore.state, shouldRenderSelector);
 
     const uri = useMemo(() => {
       return getResizedImageUrl({
@@ -62,17 +64,13 @@ export const AnimatedGalleryImage = React.memo(
     }, [photo.uri, resizableCDNHosts, screenHeight, screenWidth]);
 
     const isSvg = useIsSvg(uri);
-    const selected = currentIndex === index;
-    const previous = currentIndex > index;
-    const shouldRender = Math.abs(currentIndex - index) < 4;
 
     const animatedStyles = useAnimatedGalleryStyle({
+      currentIndexShared: imageGalleryStateStore.currentIndexShared,
       index,
       offsetScale,
-      previous,
       scale,
       screenHeight,
-      selected,
       translateX,
       translateY,
     });

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

@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
@@ -49,19 +49,14 @@ const styles = StyleSheet.create({
   },
 });
 
-const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
-});
-
 const videoPlayerSelector = (state: VideoPlayerState) => ({
   currentPlaybackRate: state.currentPlaybackRate,
   isPlaying: state.isPlaying,
 });
 
-export const AnimatedGalleryVideo = (props: AnimatedGalleryVideoType) => {
+const AnimatedGalleryVideoComponent = (props: AnimatedGalleryVideoType) => {
   const [opacity, setOpacity] = useState<number>(1);
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
   const {
     attachmentId,
@@ -75,6 +70,14 @@ export const AnimatedGalleryVideo = (props: AnimatedGalleryVideoType) => {
     translateY,
   } = props;
 
+  const shouldRenderSelector = useCallback(
+    (state: ImageGalleryState) => ({
+      shouldRender: Math.abs(state.currentIndex - index) < 2,
+    }),
+    [index],
+  );
+  const { shouldRender } = useStateStore(imageGalleryStateStore.state, shouldRenderSelector);
+
   const videoRef = useRef<VideoType>(null);
 
   const videoPlayer = useImageGalleryVideoPlayer({
@@ -82,14 +85,15 @@ export const AnimatedGalleryVideo = (props: AnimatedGalleryVideoType) => {
   });
 
   useEffect(() => {
-    if (videoRef.current) {
+    if (videoRef.current && shouldRender) {
       videoPlayer.initPlayer({ playerRef: videoRef.current });
     }
 
     return () => {
       videoPlayer.playerRef = null;
+      videoPlayer.onRemove();
     };
-  }, [videoPlayer]);
+  }, [videoPlayer, shouldRender]);
 
   const { isPlaying, currentPlaybackRate } = useStateStore(videoPlayer.state, videoPlayerSelector);
 
@@ -147,17 +151,12 @@ export const AnimatedGalleryVideo = (props: AnimatedGalleryVideoType) => {
     }
   };
 
-  const selected = currentIndex === index;
-  const previous = currentIndex > index;
-  const shouldRender = Math.abs(currentIndex - index) < 4;
-
   const animatedStyles = useAnimatedGalleryStyle({
+    currentIndexShared: imageGalleryStateStore.currentIndexShared,
     index,
     offsetScale,
-    previous,
     scale,
     screenHeight,
-    selected,
     translateX,
     translateY,
   });
@@ -216,4 +215,18 @@ export const AnimatedGalleryVideo = (props: AnimatedGalleryVideoType) => {
   );
 };
 
+export const AnimatedGalleryVideo = React.memo(
+  AnimatedGalleryVideoComponent,
+  (prevProps, nextProps) => {
+    if (
+      prevProps.photo.uri === nextProps.photo.uri &&
+      prevProps.index === nextProps.index &&
+      prevProps.screenHeight === nextProps.screenHeight
+    ) {
+      return true;
+    }
+    return false;
+  },
+);
+
 AnimatedGalleryVideo.displayName = 'AnimatedGalleryVideo';

package/src/components/ImageGallery/components/ImageGalleryA11yProbe.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, ViewStyle } from 'react-native';
+import Animated, { AnimatedStyle } from 'react-native-reanimated';
+
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useStateStore } from '../../../hooks';
+import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
+
+const a11ySelector = (state: ImageGalleryState) => ({
+  assets: state.assets,
+  currentIndex: state.currentIndex,
+});
+
+type Props = {
+  containerBackground: AnimatedStyle<ViewStyle>;
+};
+
+/**
+ * Accessibility-enabled variant of the gallery's background fade view. Wires
+ * the "X of N" announcement and the VoiceOver/TalkBack increment/decrement
+ * actions. Subscribes locally to currentIndex + assets so the parent
+ * ImageGallery doesn't need that subscription itself — only this small sibling
+ * re-renders to refresh the accessibilityValue text on each swipe.
+ *
+ * Caller is responsible for gating this on whether accessibility is enabled.
+ * When disabled, the parent renders a plain Animated.View with the same
+ * background style and no a11y attributes.
+ */
+export const ImageGalleryA11yProbe = ({ containerBackground }: Props) => {
+  const { imageGalleryStateStore } = useImageGalleryContext();
+  const { assets, currentIndex } = useStateStore(imageGalleryStateStore.state, a11ySelector);
+  const assetsCount = assets.length;
+
+  const accessibilityValueParams = useMemo(
+    () => ({ count: assetsCount, position: currentIndex + 1 }),
+    [currentIndex, assetsCount],
+  );
+  const accessibilityValueText = useA11yLabel(
+    'a11y/{{position}} of {{count}}',
+    accessibilityValueParams,
+  );
+  const accessibilityValue = useMemo(
+    () => (accessibilityValueText ? { text: accessibilityValueText } : undefined),
+    [accessibilityValueText],
+  );
+  const adjustableActions = useMemo(
+    () => [{ name: 'increment' as const }, { name: 'decrement' as const }],
+    [],
+  );
+
+  const onAccessibilityAction = useCallback(
+    (event: { nativeEvent: { actionName: string } }) => {
+      const latest = imageGalleryStateStore.state.getLatestValue();
+      const latestCount = latest.assets.length;
+      const latestIndex = latest.currentIndex;
+      if (latestCount <= 1) return;
+      if (event.nativeEvent.actionName === 'increment') {
+        if (latestIndex < latestCount - 1) {
+          imageGalleryStateStore.currentIndex = latestIndex + 1;
+        }
+      } else if (event.nativeEvent.actionName === 'decrement') {
+        if (latestIndex > 0) {
+          imageGalleryStateStore.currentIndex = latestIndex - 1;
+        }
+      }
+    },
+    [imageGalleryStateStore],
+  );
+
+  return (
+    <Animated.View
+      accessible
+      accessibilityActions={adjustableActions}
+      accessibilityLabel='Image Gallery'
+      accessibilityRole='adjustable'
+      accessibilityValue={accessibilityValue}
+      onAccessibilityAction={onAccessibilityAction}
+      style={[StyleSheet.absoluteFill, containerBackground]}
+    />
+  );
+};

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

@@ -4,12 +4,11 @@ import { SharedValue, useAnimatedStyle } from 'react-native-reanimated';
 import { useViewport } from '../../../hooks/useViewport';
 
 type Props = {
+  currentIndexShared: SharedValue<number>;
   index: number;
   offsetScale: SharedValue<number>;
-  previous: boolean;
   scale: SharedValue<number>;
   screenHeight: number;
-  selected: boolean;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
 };
@@ -17,12 +16,11 @@ type Props = {
 const oneEighth = 1 / 8;
 
 export const useAnimatedGalleryStyle = ({
+  currentIndexShared,
   index,
   offsetScale,
-  previous,
   scale,
   screenHeight,
-  selected,
   translateX,
   translateY,
 }: Props) => {
@@ -40,6 +38,8 @@ export const useAnimatedGalleryStyle = ({
    * place as to not come into the screen when the image shrinks.
    */
   const animatedGalleryStyle = useAnimatedStyle<ImageStyle>(() => {
+    const selected = currentIndexShared.value === index;
+    const previous = currentIndexShared.value > index;
     const xScaleOffset = -7 * screenWidth * (0.5 + index);
     const yScaleOffset = -screenHeight * 3.5;
     return {
@@ -62,7 +62,7 @@ export const useAnimatedGalleryStyle = ({
         { scaleX: 1 },
       ],
     };
-  }, [previous, selected]);
+  }, []);
 
   const animatedStyles = useAnimatedStyle(() => {
     const xScaleOffset = 7 * screenWidth * (0.5 + index);

package/src/components/ImageGallery/hooks/useCurrentImageHeight.ts

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+import { Image } from 'react-native';
+import { SharedValue, useSharedValue } from 'react-native-reanimated';
+
+import type {
+  ImageGalleryAsset,
+  ImageGalleryStateStore,
+} from '../../../state-store/image-gallery-state-store';
+import { FileTypes } from '../../../types/types';
+
+/**
+ * Owns a SharedValue tracking the visible height of the currently selected
+ * gallery asset and keeps it in lockstep with the gallery store's
+ * currentIndex. Worklet consumers read `.value` on the UI thread.
+ *
+ * The store is subscribed via `subscribeWithSelector` (not `useStateStore`),
+ * so currentIndex changes never go through React state so no rerender is
+ * triggered in the calling component. The callback writes directly into the
+ * SharedValue.
+ *
+ * Sync path uses the attachment's intrinsic `original_height`/`original_width`
+ * when present. Async fallback via `Image.getSize` handles assets that don't
+ * carry dimensions; a token guards against the closure-race where the user
+ * swipes past a slide before its dimensions resolve.
+ */
+export const useCurrentImageHeight = ({
+  assets,
+  fullWindowHeight,
+  fullWindowWidth,
+  imageGalleryStateStore,
+}: {
+  assets: ImageGalleryAsset[];
+  fullWindowHeight: number;
+  fullWindowWidth: number;
+  imageGalleryStateStore: ImageGalleryStateStore;
+}): SharedValue<number> => {
+  const currentImageHeight = useSharedValue(fullWindowHeight);
+
+  useEffect(() => {
+    let latestToken = 0;
+
+    const compute = (index: number) => {
+      const currentToken = ++latestToken;
+      const photo = assets[index];
+
+      if (photo?.original_height && photo?.original_width) {
+        const h = Math.floor(photo.original_height * (fullWindowWidth / photo.original_width));
+        currentImageHeight.value = h > fullWindowHeight ? fullWindowHeight : h;
+        return;
+      }
+
+      if (photo?.uri && photo.type === FileTypes.Image) {
+        Image.getSize(
+          photo.uri,
+          (width, height) => {
+            // Stale result, currentIndex moved on before getSize resolved.
+            if (currentToken !== latestToken) return;
+            if (!width || !height) {
+              currentImageHeight.value = fullWindowHeight;
+              return;
+            }
+            const imageHeight = Math.floor(height * (fullWindowWidth / width));
+            currentImageHeight.value =
+              imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
+          },
+          () => {
+            if (currentToken !== latestToken) return;
+            currentImageHeight.value = fullWindowHeight;
+          },
+        );
+        return;
+      }
+
+      currentImageHeight.value = fullWindowHeight;
+    };
+
+    compute(imageGalleryStateStore.state.getLatestValue().currentIndex);
+
+    return imageGalleryStateStore.state.subscribeWithSelector(
+      (state) => ({ currentIndex: state.currentIndex }),
+      ({ currentIndex }) => compute(currentIndex),
+    );
+  }, [assets, fullWindowHeight, fullWindowWidth, currentImageHeight, imageGalleryStateStore]);
+
+  return currentImageHeight;
+};

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { Platform } from 'react-native';
 import { Gesture, GestureType } from 'react-native-gesture-handler';
 import {
@@ -14,9 +14,7 @@ import {
 
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
-import { useStateStore } from '../../../hooks';
 import { NativeHandlers } from '../../../native';
-import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 
 export enum HasPinched {
   FALSE = 0,
@@ -31,10 +29,6 @@ export enum IsSwiping {
 
 const MARGIN = 32;
 
-const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
-});
-
 export const useImageGalleryGestures = ({
   currentImageHeight,
   halfScreenHeight,
@@ -49,7 +43,7 @@ export const useImageGalleryGestures = ({
   translateY,
   translationX,
 }: {
-  currentImageHeight: number;
+  currentImageHeight: SharedValue<number>;
   halfScreenHeight: number;
   halfScreenWidth: number;
   headerFooterVisible: SharedValue<number>;
@@ -62,20 +56,8 @@ export const useImageGalleryGestures = ({
   translateY: SharedValue<number>;
   translationX: SharedValue<number>;
 }) => {
-  /**
-   * if a specific image index > 0 has been passed in
-   * while creating the hook, set the value of the index
-   * reference to its value.
-   *
-   * This makes it possible to seelct an image in the list,
-   * and scroll/pan as normal. Prior to this,
-   * it was always assumed that one started at index 0 in the
-   * gallery.
-   * */
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
-
-  const [index, setIndex] = useState(currentIndex);
+  const currentIndexShared = imageGalleryStateStore.currentIndexShared;
 
   /**
    * Gesture handler refs
@@ -163,13 +145,16 @@ export const useImageGalleryGestures = ({
   };
 
   const moveToNextImage = () => {
-    runOnJS(setIndex)(index + 1);
-    imageGalleryStateStore.currentIndex = index + 1;
+    // Read fresh — both moveToNext/Previous are invoked via runOnJS from a
+    // worklet, so we'd otherwise be using a value captured at hook-creation
+    // time. The setter mirrors into currentIndexShared.
+    const currentIndex = imageGalleryStateStore.state.getLatestValue().currentIndex;
+    imageGalleryStateStore.currentIndex = currentIndex + 1;
   };
 
   const moveToPreviousImage = () => {
-    runOnJS(setIndex)(index - 1);
-    imageGalleryStateStore.currentIndex = index - 1;
+    const currentIndex = imageGalleryStateStore.state.getLatestValue().currentIndex;
+    imageGalleryStateStore.currentIndex = currentIndex - 1;
   };
 
   /**
@@ -221,7 +206,7 @@ export const useImageGalleryGestures = ({
          * true, or false and is reset on releasing the touch
          */
         if (isSwiping.value === IsSwiping.UNDETERMINED) {
-          const maxXYRatio = isAndroid ? 1 : 0.25;
+          const maxXYRatio = 0.25;
           if (
             Math.abs(event.translationX / event.translationY) > maxXYRatio &&
             (Math.abs(-halfScreenWidth * (scale.value - 1) - offsetX.value) < 3 ||
@@ -261,16 +246,17 @@ export const useImageGalleryGestures = ({
          * If swiping down start scaling down the image for swipe
          * away effect
          */
+        const imageHeight = currentImageHeight.value;
         scale.value =
-          currentImageHeight * offsetScale.value < screenHeight && translateY.value > 0
+          imageHeight * offsetScale.value < screenHeight && translateY.value > 0
             ? offsetScale.value * (1 - (1 / 3) * (translateY.value / screenHeight))
-            : currentImageHeight * offsetScale.value > screenHeight &&
-                translateY.value > (currentImageHeight / 2) * offsetScale.value - halfScreenHeight
+            : imageHeight * offsetScale.value > screenHeight &&
+                translateY.value > (imageHeight / 2) * offsetScale.value - halfScreenHeight
               ? offsetScale.value *
                 (1 -
                   (1 / 3) *
                     ((translateY.value -
-                      ((currentImageHeight / 2) * offsetScale.value - halfScreenHeight)) /
+                      ((imageHeight / 2) * offsetScale.value - halfScreenHeight)) /
                       screenHeight))
               : scale.value;
 
@@ -287,6 +273,8 @@ export const useImageGalleryGestures = ({
         const finalXPosition = event.translationX - event.velocityX * 0.3;
         const finalYPosition = event.translationY + event.velocityY * 0.1;
 
+        const currentIndex = currentIndexShared.value;
+
         /**
          * If there is a next photo, the image is lined up to the right
          * edge, the swipe is to the left, and the final position is more
@@ -295,7 +283,7 @@ export const useImageGalleryGestures = ({
          * As we move towards the left to move to next image, the translationX value will be negative on X axis.
          */
         if (
-          index < assetsLength - 1 &&
+          currentIndex < assetsLength - 1 &&
           Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
           translateX.value < 0 &&
           finalXPosition > halfScreenWidth &&
@@ -303,7 +291,7 @@ export const useImageGalleryGestures = ({
         ) {
           cancelAnimation(translationX);
           translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index + 1),
+            -(screenWidth + MARGIN) * (currentIndex + 1),
             {
               duration: 200,
               easing: Easing.out(Easing.ease),
@@ -322,7 +310,7 @@ export const useImageGalleryGestures = ({
            * As we move towards the right to move to previous image, the translationX value will be positive on X axis.
            */
         } else if (
-          index > 0 &&
+          currentIndex > 0 &&
           Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
           translateX.value > 0 &&
           finalXPosition < -halfScreenWidth &&
@@ -330,7 +318,7 @@ export const useImageGalleryGestures = ({
         ) {
           cancelAnimation(translationX);
           translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index - 1),
+            -(screenWidth + MARGIN) * (currentIndex - 1),
             {
               duration: 200,
               easing: Easing.out(Easing.ease),
@@ -376,19 +364,20 @@ export const useImageGalleryGestures = ({
          * otherwise use decay with a clamping at the edges to give the effect
          * the image is sliding along using velocity and friction
          */
+        const imageHeight = currentImageHeight.value;
         translateY.value =
-          currentImageHeight * scale.value < screenHeight
+          imageHeight * scale.value < screenHeight
             ? withTiming(0, { reduceMotion: ReduceMotion.Never })
-            : translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
-              ? withTiming((currentImageHeight / 2) * scale.value - halfScreenHeight, {
+            : translateY.value > (imageHeight / 2) * scale.value - halfScreenHeight
+              ? withTiming((imageHeight / 2) * scale.value - halfScreenHeight, {
                   reduceMotion: ReduceMotion.Never,
                 })
-              : translateY.value < (-currentImageHeight / 2) * scale.value + halfScreenHeight
-                ? withTiming((-currentImageHeight / 2) * scale.value + halfScreenHeight)
+              : translateY.value < (-imageHeight / 2) * scale.value + halfScreenHeight
+                ? withTiming((-imageHeight / 2) * scale.value + halfScreenHeight)
                 : withDecay({
                     clamp: [
-                      (-currentImageHeight / 2) * scale.value + halfScreenHeight,
-                      (currentImageHeight / 2) * scale.value - halfScreenHeight,
+                      (-imageHeight / 2) * scale.value + halfScreenHeight,
+                      (imageHeight / 2) * scale.value - halfScreenHeight,
                     ],
                     deceleration: 0.99,
                     velocity: event.velocityY,
@@ -411,7 +400,7 @@ export const useImageGalleryGestures = ({
          */
         if (
           finalYPosition > halfScreenHeight &&
-          offsetY.value + 8 >= (currentImageHeight / 2) * scale.value - halfScreenHeight &&
+          offsetY.value + 8 >= (imageHeight / 2) * scale.value - halfScreenHeight &&
           isSwiping.value !== IsSwiping.TRUE &&
           translateY.value !== 0 &&
           !(
@@ -448,7 +437,7 @@ export const useImageGalleryGestures = ({
               ? withDecay({
                   velocity: event.velocityY,
                 })
-              : withTiming(halfScreenHeight + (currentImageHeight / 2) * scale.value, {
+              : withTiming(halfScreenHeight + (imageHeight / 2) * scale.value, {
                   duration: 200,
                   easing: Easing.out(Easing.ease),
                 });
@@ -662,13 +651,14 @@ export const useImageGalleryGestures = ({
          * edges of the screen return the photo to line up with the edges,
          * otherwise leave the photo in its current position
          */
+        const imageHeight = currentImageHeight.value;
         translateY.value =
-          currentImageHeight * scale.value < screenHeight
+          imageHeight * scale.value < screenHeight
             ? withTiming(0)
-            : translateY.value > (currentImageHeight / 2) * scale.value - screenHeight / 2
-              ? withTiming((currentImageHeight / 2) * scale.value - screenHeight / 2)
-              : translateY.value < (-currentImageHeight / 2) * scale.value + screenHeight / 2
-                ? withTiming((-currentImageHeight / 2) * scale.value + screenHeight / 2)
+            : translateY.value > (imageHeight / 2) * scale.value - screenHeight / 2
+              ? withTiming((imageHeight / 2) * scale.value - screenHeight / 2)
+              : translateY.value < (-imageHeight / 2) * scale.value + screenHeight / 2
+                ? withTiming((-imageHeight / 2) * scale.value + screenHeight / 2)
                 : translateY.value;
 
         /**
@@ -724,11 +714,12 @@ export const useImageGalleryGestures = ({
             duration: 200,
             easing: Easing.out(Easing.ease),
           });
-          if (currentImageHeight * 2 > screenHeight) {
+          const imageHeight = currentImageHeight.value;
+          if (imageHeight * 2 > screenHeight) {
             const translateYTopBottom =
               event.absoluteY > halfScreenHeight
-                ? -(currentImageHeight * 2 - screenHeight) / 2
-                : (currentImageHeight * 2 - screenHeight) / 2;
+                ? -(imageHeight * 2 - screenHeight) / 2
+                : (imageHeight * 2 - screenHeight) / 2;
             translateY.value = withTiming(translateYTopBottom, {
               duration: 200,
               easing: Easing.out(Easing.ease),