fix: indexing in the animated image gallery image and video

Author: khushal87

package/src/components/ImageGallery/ImageGallery.tsx

@@ -364,11 +364,8 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
                   key={photo.id}
                   offsetScale={offsetScale}
                   photo={photo}
-                  previous={currentIndex > i}
                   scale={scale}
                   screenHeight={fullWindowHeight}
-                  selected={currentIndex === i}
-                  shouldRender={Math.abs(currentIndex - i) < 4}
                   style={[
                     {
                       height: fullWindowHeight * 8,
@@ -387,12 +384,9 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
                   key={photo.id}
                   offsetScale={offsetScale}
                   photo={photo}
-                  previous={currentIndex > i}
                   scale={scale}
                   screenHeight={fullWindowHeight}
                   screenWidth={fullWindowWidth}
-                  selected={currentIndex === i}
-                  shouldRender={Math.abs(currentIndex - i) < 4}
                   style={[
                     {
                       height: fullWindowHeight * 8,

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

@@ -4,7 +4,12 @@ import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
 import { useChatConfigContext } from '../../../contexts/chatConfigContext/ChatConfigContext';
-import { ImageGalleryAsset } from '../../../state-store/image-gallery-state-store';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useStateStore } from '../../../hooks';
+import {
+  ImageGalleryAsset,
+  ImageGalleryState,
+} from '../../../state-store/image-gallery-state-store';
 import { getResizedImageUrl } from '../../../utils/getResizedImageUrl';
 import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
@@ -15,35 +20,35 @@ type Props = {
   index: number;
   offsetScale: SharedValue<number>;
   photo: ImageGalleryAsset;
-  previous: boolean;
   scale: SharedValue<number>;
   screenHeight: number;
   screenWidth: number;
-  selected: boolean;
-  shouldRender: boolean;
   translateX: SharedValue<number>;
   translateY: SharedValue<number>;
   style?: StyleProp<ImageStyle>;
 };
 
+const imageGallerySelector = (state: ImageGalleryState) => ({
+  currentIndex: state.currentIndex,
+});
+
 export const AnimatedGalleryImage = React.memo(
   (props: Props) => {
     const {
       accessibilityLabel,
       index,
       offsetScale,
       photo,
-      previous,
       scale,
-      selected,
       screenHeight,
       screenWidth,
       style,
-      shouldRender,
       translateX,
       translateY,
     } = props;
+    const { imageGalleryStateStore } = useImageGalleryContext();
     const { resizableCDNHosts } = useChatConfigContext();
+    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
     const uri = useMemo(() => {
       return getResizedImageUrl({
@@ -54,6 +59,10 @@ export const AnimatedGalleryImage = React.memo(
       });
     }, [photo.uri, resizableCDNHosts, screenHeight, screenWidth]);
 
+    const selected = currentIndex === index;
+    const previous = currentIndex > index;
+    const shouldRender = Math.abs(currentIndex - index) < 4;
+
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
@@ -85,10 +94,7 @@ export const AnimatedGalleryImage = React.memo(
   },
   (prevProps, nextProps) => {
     if (
-      prevProps.selected === nextProps.selected &&
-      prevProps.shouldRender === nextProps.shouldRender &&
       prevProps.photo.uri === nextProps.photo.uri &&
-      prevProps.previous === nextProps.previous &&
       prevProps.index === nextProps.index &&
       prevProps.screenHeight === nextProps.screenHeight &&
       prevProps.screenWidth === nextProps.screenWidth

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

@@ -3,7 +3,9 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
-import { useStateStore } from '../../../hooks/useStateStore';
+import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { useStateStore } from '../../../hooks';
+
 import {
   isVideoPlayerAvailable,
   NativeHandlers,
@@ -13,7 +15,10 @@ import {
   VideoType,
 } from '../../../native';
 
-import { ImageGalleryAsset } from '../../../state-store/image-gallery-state-store';
+import {
+  ImageGalleryAsset,
+  ImageGalleryState,
+} from '../../../state-store/image-gallery-state-store';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { ONE_SECOND_IN_MILLISECONDS } from '../../../utils/constants';
 import { Spinner } from '../../UIComponents/Spinner';
@@ -26,9 +31,6 @@ export type AnimatedGalleryVideoType = {
   attachmentId: string;
   index: number;
   offsetScale: SharedValue<number>;
-  previous: boolean;
-  selected: boolean;
-  shouldRender: boolean;
   scale: SharedValue<number>;
   screenHeight: number;
   photo: ImageGalleryAsset;
@@ -47,23 +49,26 @@ const styles = StyleSheet.create({
   },
 });
 
+const imageGallerySelector = (state: ImageGalleryState) => ({
+  currentIndex: state.currentIndex,
+});
+
 const videoPlayerSelector = (state: VideoPlayerState) => ({
   isPlaying: state.isPlaying,
 });
 
 export const AnimatedGalleryVideo = React.memo(
   (props: AnimatedGalleryVideoType) => {
     const [opacity, setOpacity] = useState<number>(1);
+    const { imageGalleryStateStore } = useImageGalleryContext();
+    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
     const {
       attachmentId,
       index,
       offsetScale,
-      previous,
       scale,
       screenHeight,
-      selected,
-      shouldRender,
       style,
       photo,
       translateX,
@@ -138,6 +143,10 @@ export const AnimatedGalleryVideo = React.memo(
       }
     };
 
+    const selected = currentIndex === index;
+    const previous = currentIndex > index;
+    const shouldRender = Math.abs(currentIndex - index) < 4;
+
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
@@ -204,10 +213,7 @@ export const AnimatedGalleryVideo = React.memo(
 
   (prevProps, nextProps) => {
     if (
-      prevProps.shouldRender === nextProps.shouldRender &&
       prevProps.screenHeight === nextProps.screenHeight &&
-      prevProps.selected === nextProps.selected &&
-      prevProps.previous === nextProps.previous &&
       prevProps.index === nextProps.index &&
       prevProps.photo === nextProps.photo
     ) {