stream-chat-react-native-core 9.4.0-beta.9 → 9.4.0

package/src/components/ImageGallery/ImageGallery.tsx

@@ -1,12 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  AccessibilityInfo,
-  Image,
-  ImageStyle,
-  Platform,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { AccessibilityInfo, ImageStyle, Platform, StyleSheet, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import Animated, {
@@ -20,15 +13,16 @@ import Animated, {
 
 import { AnimatedGalleryImage } from './components/AnimatedGalleryImage';
 import { AnimatedGalleryVideo } from './components/AnimatedGalleryVideo';
+import { ImageGalleryA11yProbe } from './components/ImageGalleryA11yProbe';
 import type {
   ImageGalleryFooterProps,
   ImageGalleryGridProps,
   ImageGalleryHeaderProps,
 } from './components/types';
 
+import { useCurrentImageHeight } from './hooks/useCurrentImageHeight';
 import { useImageGalleryGestures } from './hooks/useImageGalleryGestures';
 
-import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useAccessibilityContext } from '../../contexts/accessibilityContext/AccessibilityContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
@@ -73,7 +67,6 @@ export enum IsSwiping {
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
   assets: state.assets,
-  currentIndex: state.currentIndex,
 });
 
 type ImageGalleryWithContextProps = Pick<
@@ -102,12 +95,7 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
     },
   } = useTheme();
   const { imageGalleryStateStore } = useImageGalleryContext();
-  const { assets, currentIndex } = useStateStore(
-    imageGalleryStateStore.state,
-    imageGallerySelector,
-  );
-  const { videoPlayerPool } = imageGalleryStateStore;
-
+  const { assets } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { vh, vw } = useViewport();
 
   const fullWindowHeight = vh(100);
@@ -139,9 +127,17 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
   }, [showScreen]);
 
   /**
-   * Image height from URL or default to full screen height
+   * Image height for the currently selected asset. SharedValue so worklet
+   * consumers (gesture math, header/footer opacity) read it directly on the
+   * UI thread so updating it doesn't trigger a parent rerender. The hook
+   * owns the value and updates it via a store subscription.
    */
-  const [currentImageHeight, setCurrentImageHeight] = useState<number>(fullWindowHeight);
+  const currentImageHeight = useCurrentImageHeight({
+    assets,
+    fullWindowHeight,
+    fullWindowWidth,
+    imageGalleryStateStore,
+  });
 
   /**
    * Header visible value for animating in out
@@ -155,53 +151,20 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
   const translateY = useSharedValue(0);
   const offsetScale = useSharedValue(1);
   const scale = useSharedValue(1);
-  const translationX = useSharedValue(-(fullWindowWidth + MARGIN) * currentIndex);
+  const translationX = useSharedValue(
+    -(fullWindowWidth + MARGIN) * imageGalleryStateStore.state.getLatestValue().currentIndex,
+  );
+
+  const currentIndexShared = imageGalleryStateStore.currentIndexShared;
 
   useAnimatedReaction(
-    () => currentIndex,
+    () => currentIndexShared.value,
     (index) => {
       translationX.value = -(fullWindowWidth + MARGIN) * index;
     },
-    [currentIndex, fullWindowWidth],
+    [fullWindowWidth],
   );
 
-  /**
-   * Image heights are not provided and therefore need to be calculated.
-   * We start by allowing the image to be the full height then reduce it
-   * to the proper scaled height based on the width being restricted to the
-   * screen width when the dimensions are received.
-   */
-  useEffect(() => {
-    let currentImageHeight = fullWindowHeight;
-    const photo = assets[currentIndex];
-    const height = photo?.original_height;
-    const width = photo?.original_width;
-
-    if (height && width) {
-      const imageHeight = Math.floor(height * (fullWindowWidth / width));
-      currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
-    } else if (photo?.uri) {
-      if (photo.type === FileTypes.Image) {
-        Image.getSize(photo.uri, (width, height) => {
-          const imageHeight = Math.floor(height * (fullWindowWidth / width));
-          currentImageHeight = imageHeight > fullWindowHeight ? fullWindowHeight : imageHeight;
-        });
-      }
-    }
-
-    setCurrentImageHeight(currentImageHeight);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentIndex]);
-
-  // If you change the current index, pause the active video player.
-  useEffect(() => {
-    const activePlayer = videoPlayerPool.getActivePlayer();
-
-    if (activePlayer) {
-      activePlayer.pause();
-    }
-  }, [currentIndex, videoPlayerPool]);
-
   const { doubleTap, pan, pinch, singleTap } = useImageGalleryGestures({
     currentImageHeight,
     halfScreenHeight,
@@ -219,20 +182,21 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
 
   /**
    * If the header is visible we scale down the opacity of it as the
-   * image is swiped downward
+   * image is swiped downward. Reads currentImageHeight from a SharedValue so
+   * the worklet doesn't need to be re-registered when the image dimensions
+   * change between slides.
    */
-  const headerFooterOpacity = useDerivedValue(
-    () =>
-      currentImageHeight * scale.value < fullWindowHeight && translateY.value > 0
-        ? 1 - translateY.value / quarterScreenHeight
-        : currentImageHeight * scale.value > fullWindowHeight &&
-            translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
-          ? 1 -
-            (translateY.value - ((currentImageHeight / 2) * scale.value - halfScreenHeight)) /
-              quarterScreenHeight
-          : 1,
-    [currentImageHeight],
-  );
+  const headerFooterOpacity = useDerivedValue(() => {
+    const imageHeight = currentImageHeight.value;
+    return imageHeight * scale.value < fullWindowHeight && translateY.value > 0
+      ? 1 - translateY.value / quarterScreenHeight
+      : imageHeight * scale.value > fullWindowHeight &&
+          translateY.value > (imageHeight / 2) * scale.value - halfScreenHeight
+        ? 1 -
+          (translateY.value - ((imageHeight / 2) * scale.value - halfScreenHeight)) /
+            quarterScreenHeight
+        : 1;
+  }, []);
 
   /**
    * This transition and scaleX reverse lets use scroll right
@@ -290,45 +254,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
   };
 
   const { enabled: isAccessibilityEnabled } = useAccessibilityContext();
-  const assetsCount = assets.length;
-  const isAdjustable = isAccessibilityEnabled;
-  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(
-    () =>
-      isAdjustable ? [{ name: 'increment' as const }, { name: 'decrement' as const }] : undefined,
-    [isAdjustable],
-  );
-
-  const onAccessibilityAction = useCallback(
-    (event: { nativeEvent: { actionName: string } }) => {
-      if (!isAccessibilityEnabled) return;
-      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, isAccessibilityEnabled],
-  );
 
   useEffect(() => {
     return () => {
@@ -356,15 +281,11 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
       pointerEvents={'auto'}
       style={[StyleSheet.absoluteFill, showScreenStyle]}
     >
-      <Animated.View
-        accessible
-        accessibilityActions={adjustableActions}
-        accessibilityLabel='Image Gallery'
-        accessibilityRole={isAdjustable ? 'adjustable' : undefined}
-        accessibilityValue={isAdjustable ? accessibilityValue : undefined}
-        onAccessibilityAction={isAdjustable ? onAccessibilityAction : undefined}
-        style={[StyleSheet.absoluteFill, containerBackground]}
-      />
+      {isAccessibilityEnabled ? (
+        <ImageGalleryA11yProbe containerBackground={containerBackground} />
+      ) : (
+        <Animated.View style={[StyleSheet.absoluteFill, containerBackground]} />
+      )}
       <GestureDetector gesture={Gesture.Simultaneous(singleTap, doubleTap, pinch, pan)}>
         <Animated.View style={StyleSheet.absoluteFill}>
           <Animated.View

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/components/ImageGalleryHeader.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 
 import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type { ImageGalleryHeaderProps } from './types';
 
@@ -17,11 +18,6 @@ import { ImageGalleryState } from '../../../state-store/image-gallery-state-stor
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui/Button/Button';
-import { SafeAreaView } from '../../UIComponents/SafeAreaViewWrapper';
-
-const ReanimatedSafeAreaView = Animated.createAnimatedComponent
-  ? Animated.createAnimatedComponent(SafeAreaView)
-  : SafeAreaView;
 
 const imageGallerySelector = (state: ImageGalleryState) => ({
   asset: state.assets[state.currentIndex],
@@ -35,6 +31,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const { imageGalleryStateStore } = useImageGalleryContext();
   const { asset } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
   const { setOverlay } = useOverlayContext();
+  const topInset = useContext(SafeAreaInsetsContext)?.top ?? 0;
 
   const date = useMemo(
     () =>
@@ -71,17 +68,19 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
       onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
       pointerEvents={'box-none'}
     >
-      <ReanimatedSafeAreaView edges={['top']} style={[styles.container, headerStyle]}>
+      <Animated.View style={[styles.container, { paddingTop: topInset }, headerStyle]}>
         <View style={styles.innerContainer}>
-          <Button
-            accessibilityLabelKey='a11y/Hide Overlay'
-            variant='secondary'
-            type='ghost'
-            size='md'
-            onPress={hideOverlay}
-            LeadingIcon={ChevronLeft}
-            iconOnly
-          />
+          <View style={styles.leftContainer}>
+            <Button
+              accessibilityLabelKey='a11y/Hide Overlay'
+              variant='secondary'
+              type='ghost'
+              size='md'
+              onPress={hideOverlay}
+              LeadingIcon={ChevronLeft}
+              iconOnly
+            />
+          </View>
           <View style={styles.centerContainer} accessibilityLabel='Center element'>
             <Text style={styles.userName}>
               {asset?.user?.name || asset?.user?.id || t('Unknown User')}
@@ -90,7 +89,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
           </View>
           <View style={styles.rightContainer} accessibilityLabel='Right element' />
         </View>
-      </ReanimatedSafeAreaView>
+      </Animated.View>
     </View>
   );
 };
@@ -114,7 +113,7 @@ const useStyles = () => {
         },
         centerContainer: {
           alignItems: 'center',
-          flex: 1,
+          flex: 2,
           justifyContent: 'center',
           gap: primitives.spacingXxs,
           ...header.centerContainer,
@@ -134,9 +133,13 @@ const useStyles = () => {
           borderBottomColor: semantics.borderCoreSubtle,
           ...header.innerContainer,
         },
+        leftContainer: {
+          flex: 1,
+        },
         rightContainer: {
           width: 24,
           height: 24,
+          flex: 1,
         },
         userName: {
           color: semantics.textPrimary,

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);