Skip to content

react-native-image-gallery Invariant Violation: scrollToIndex out of range: item length 0 but minimum is 1 #23

@dprajapati1179

Description

@dprajapati1179

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Here is the diff that solved my problem:

diff --git a/node_modules/@georstat/react-native-image-gallery/src/ImageGallery.tsx b/node_modules/@georstat/react-native-image-gallery/src/ImageGallery.tsx
index 2b1eb28..b39e18e 100644
--- a/node_modules/@georstat/react-native-image-gallery/src/ImageGallery.tsx
+++ b/node_modules/@georstat/react-native-image-gallery/src/ImageGallery.tsx
@@ -50,29 +50,21 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
   const keyExtractorImage = (item: ImageObject, index: number) =>
     item && item.id ? item.id.toString() : index.toString();
 
-  const scrollToIndex = (i: number) => {
-    setActiveIndex(i);
-
-    if (topRef?.current) {
-      topRef.current.scrollToIndex({
-        animated: true,
-        index: i,
-      });
-    }
-    if (bottomRef?.current) {
-      if (i * (thumbSize + 10) - thumbSize / 2 > deviceWidth / 2) {
-        bottomRef?.current?.scrollToIndex({
-          animated: true,
-          index: i,
-        });
-      } else {
-        bottomRef?.current?.scrollToIndex({
-          animated: true,
-          index: 0,
-        });
-      }
-    }
-  };
+const scrollToIndex = (i: number) => {
+  if (!images || images.length === 0) return; // <-- add this guard
+
+  const index = Math.min(i, images.length - 1); // ensure index is valid
+  setActiveIndex(index);
+
+  if (topRef?.current) {
+    topRef.current.scrollToIndex({ animated: true, index });
+  }
+  if (bottomRef?.current) {
+    const targetIndex =
+      i * (thumbSize + 10) - thumbSize / 2 > deviceWidth / 2 ? index : 0;
+    bottomRef.current.scrollToIndex({ animated: true, index: targetIndex });
+  }
+};
 
   const renderItem = ({ item, index }: RenderImageProps) => {
     return (
@@ -115,6 +107,7 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
   };
 
   const onMomentumEnd = (e: any) => {
+    if (!images || images.length === 0) return;
     const { x } = e.nativeEvent.contentOffset;
     scrollToIndex(Math.round(x / deviceWidth));
   };
@@ -155,7 +148,7 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
           close={close}
         >
           <FlatList
-            initialScrollIndex={initialIndex}
+            initialScrollIndex={images && images.length > 0 ? initialIndex || 0 : 0}
             getItemLayout={getImageLayout}
             data={images}
             horizontal
@@ -170,7 +163,7 @@ const ImageGallery = (props: IProps & typeof defaultProps) => {
         </SwipeContainer>
         {hideThumbs ? null : (
           <FlatList
-            initialScrollIndex={initialIndex}
+            initialScrollIndex={images && images.length > 0 ? initialIndex || 0 : 0}
             getItemLayout={getThumbLayout}
             contentContainerStyle={styles.thumbnailListContainer}
             data={props.images}

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions