fix: indexing

Author: khushal87

package/src/components/ImageGallery/ImageGallery.tsx

@@ -365,7 +365,6 @@ export const ImageGalleryWithContext = (props: ImageGalleryWithContextProps) =>
                   offsetScale={offsetScale}
                   photo={photo}
                   previous={currentIndex > i}
-                  repeat={true}
                   scale={scale}
                   screenHeight={fullWindowHeight}
                   selected={currentIndex === i}

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

@@ -4,49 +4,46 @@ import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
 import { useChatConfigContext } from '../../../contexts/chatConfigContext/ChatConfigContext';
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
-import { useStateStore } from '../../../hooks/useStateStore';
-import {
-  ImageGalleryAsset,
-  ImageGalleryState,
-} from '../../../state-store/image-gallery-state-store';
+import { ImageGalleryAsset } from '../../../state-store/image-gallery-state-store';
 import { getResizedImageUrl } from '../../../utils/getResizedImageUrl';
 import { useAnimatedGalleryStyle } from '../hooks/useAnimatedGalleryStyle';
 
 const oneEighth = 1 / 8;
 
 type Props = {
   accessibilityLabel: string;
+  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 { resizableCDNHosts } = useChatConfigContext();
-    const { imageGalleryStateStore } = useImageGalleryContext();
-    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
     const uri = useMemo(() => {
       return getResizedImageUrl({
@@ -57,21 +54,17 @@ export const AnimatedGalleryImage = React.memo(
       });
     }, [photo.uri, resizableCDNHosts, screenHeight, screenWidth]);
 
-    const index = photo.index;
-
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
-      previous: currentIndex > index,
+      previous,
       scale,
       screenHeight,
-      selected: currentIndex === index,
+      selected,
       translateX,
       translateY,
     });
 
-    const shouldRender = Math.abs(currentIndex - index) < 4;
-
     /**
      * An empty view is rendered for images not close to the currently
      * selected in order to maintain spacing while reducing the image
@@ -92,7 +85,11 @@ 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,6 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { SharedValue } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useStateStore } from '../../../hooks/useStateStore';
 import {
   isVideoPlayerAvailable,
@@ -14,10 +13,7 @@ import {
   VideoType,
 } from '../../../native';
 
-import {
-  ImageGalleryAsset,
-  ImageGalleryState,
-} from '../../../state-store/image-gallery-state-store';
+import { ImageGalleryAsset } 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';
@@ -28,7 +24,11 @@ const oneEighth = 1 / 8;
 
 export type AnimatedGalleryVideoType = {
   attachmentId: string;
+  index: number;
   offsetScale: SharedValue<number>;
+  previous: boolean;
+  selected: boolean;
+  shouldRender: boolean;
   scale: SharedValue<number>;
   screenHeight: number;
   photo: ImageGalleryAsset;
@@ -51,18 +51,24 @@ const videoPlayerSelector = (state: VideoPlayerState) => ({
   isPlaying: state.isPlaying,
 });
 
-const imageGallerySelector = (state: ImageGalleryState) => ({
-  currentIndex: state.currentIndex,
-});
-
 export const AnimatedGalleryVideo = React.memo(
   (props: AnimatedGalleryVideoType) => {
-    const { imageGalleryStateStore } = useImageGalleryContext();
     const [opacity, setOpacity] = useState<number>(1);
-    const { currentIndex } = useStateStore(imageGalleryStateStore.state, imageGallerySelector);
 
-    const { attachmentId, offsetScale, scale, screenHeight, style, photo, translateX, translateY } =
-      props;
+    const {
+      attachmentId,
+      index,
+      offsetScale,
+      previous,
+      scale,
+      screenHeight,
+      selected,
+      shouldRender,
+      style,
+      photo,
+      translateX,
+      translateY,
+    } = props;
 
     const videoRef = useRef<VideoType>(null);
 
@@ -132,21 +138,17 @@ export const AnimatedGalleryVideo = React.memo(
       }
     };
 
-    const index = photo.index;
-
     const animatedStyles = useAnimatedGalleryStyle({
       index,
       offsetScale,
-      previous: currentIndex > index,
+      previous,
       scale,
       screenHeight,
-      selected: currentIndex === index,
+      selected,
       translateX,
       translateY,
     });
 
-    const shouldRender = Math.abs(currentIndex - index) < 4;
-
     /**
      * An empty view is rendered for images not close to the currently
      * selected in order to maintain spacing while reducing the image
@@ -201,7 +203,14 @@ export const AnimatedGalleryVideo = React.memo(
   },
 
   (prevProps, nextProps) => {
-    if (prevProps.screenHeight === nextProps.screenHeight && prevProps.photo === nextProps.photo) {
+    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
+    ) {
       return true;
     }
     return false;

package/src/state-store/image-gallery-state-store.ts

@@ -9,7 +9,6 @@ import { getUrlOfImageAttachment } from '../utils/getUrlOfImageAttachment';
 
 export type ImageGalleryAsset = {
   id: string;
-  index: number;
   uri: string;
   channelId?: string;
   created_at?: string | Date;
@@ -113,7 +112,7 @@ export class ImageGalleryStateStore {
     const attachmentsWithMessage = this.attachmentsWithMessage;
     const { giphyVersion = 'fixed_height' } = this.options;
 
-    return attachmentsWithMessage.flatMap(({ message, attachments }, index) => {
+    return attachmentsWithMessage.flatMap(({ message, attachments }) => {
       return attachments.map((attachment) => {
         const assetUrl = getUrlOfImageAttachment(attachment, giphyVersion) as string;
         const assetId = this.getAssetId(message?.id ?? '', assetUrl);
@@ -125,7 +124,6 @@ export class ImageGalleryStateStore {
           channelId: message?.cid,
           created_at: message?.created_at,
           id: assetId,
-          index,
           messageId: message?.id,
           mime_type: attachment.type === 'giphy' ? giphyMimeType : attachment.mime_type,
           original_height: attachment.original_height,