From fdb4319979396ea227be84cf87b89d4aad5edc54 Mon Sep 17 00:00:00 2001
From: Khawar Abbasi <khawar.zaman@pentaloop.com>
Date: Fri, 7 Jun 2024 14:14:04 +0500
Subject: [PATCH] [slide-Show] added & Enable auto-slide to next after a time
 threshold

---
 src/ImageViewing.tsx             | 20 +++++++++++++++-----
 src/hooks/useImageIndexChange.ts | 12 ++++++++++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
index 3782ee0e..c590cc11 100644
--- a/src/ImageViewing.tsx
+++ b/src/ImageViewing.tsx
@@ -42,6 +42,8 @@ type Props = {
   delayLongPress?: number;
   HeaderComponent?: ComponentType<{ imageIndex: number }>;
   FooterComponent?: ComponentType<{ imageIndex: number }>;
+  enableSlideShow?: boolean;
+  slideShowThreshold?: number;
 };
 
 const DEFAULT_ANIMATION_TYPE = "fade";
@@ -56,7 +58,7 @@ function ImageViewing({
   imageIndex,
   visible,
   onRequestClose,
-  onLongPress = () => {},
+  onLongPress = () => { },
   onImageIndexChange,
   animationType = DEFAULT_ANIMATION_TYPE,
   backgroundColor = DEFAULT_BG_COLOR,
@@ -66,10 +68,12 @@ function ImageViewing({
   delayLongPress = DEFAULT_DELAY_LONG_PRESS,
   HeaderComponent,
   FooterComponent,
+  enableSlideShow = false,
+  slideShowThreshold = 3000
 }: Props) {
   const imageList = useRef<VirtualizedList<ImageSource>>(null);
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
-  const [currentImageIndex, onScroll] = useImageIndexChange(imageIndex, SCREEN);
+  const [currentImageIndex, onScroll, scrollToNextImage] = useImageIndexChange(imageIndex, SCREEN, images);
   const [headerTransform, footerTransform, toggleBarsVisible] =
     useAnimatedComponents();
 
@@ -77,7 +81,13 @@ function ImageViewing({
     if (onImageIndexChange) {
       onImageIndexChange(currentImageIndex);
     }
-  }, [currentImageIndex]);
+    if (enableSlideShow) {
+      const interval = setInterval(() => {
+        scrollToNextImage(imageList.current);
+      }, slideShowThreshold);
+      return () => clearInterval(interval);
+    }
+  }, [currentImageIndex, enableSlideShow]);
 
   const onZoom = useCallback(
     (isScaled: boolean) => {
@@ -148,8 +158,8 @@ function ImageViewing({
             keyExtractor
               ? keyExtractor(imageSrc, index)
               : typeof imageSrc === "number"
-              ? `${imageSrc}`
-              : imageSrc.uri
+                ? `${imageSrc}`
+                : imageSrc.uri
           }
         />
         {typeof FooterComponent !== "undefined" && (
diff --git a/src/hooks/useImageIndexChange.ts b/src/hooks/useImageIndexChange.ts
index c49aab7a..da7cf990 100644
--- a/src/hooks/useImageIndexChange.ts
+++ b/src/hooks/useImageIndexChange.ts
@@ -11,7 +11,7 @@ import { NativeSyntheticEvent, NativeScrollEvent } from "react-native";
 
 import { Dimensions } from "../@types";
 
-const useImageIndexChange = (imageIndex: number, screen: Dimensions) => {
+const useImageIndexChange = (imageIndex: number, screen: Dimensions,imagesArray: any) => {
   const [currentImageIndex, setImageIndex] = useState(imageIndex);
   const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
     const {
@@ -26,7 +26,15 @@ const useImageIndexChange = (imageIndex: number, screen: Dimensions) => {
     }
   };
 
-  return [currentImageIndex, onScroll] as const;
+  const scrollToNextImage = (imageListRef: any) => {
+        if (imageListRef) {
+            const nextIndex = currentImageIndex + 1 < imagesArray.length ? currentImageIndex + 1 : 0;
+            imageListRef.scrollToOffset({ offset: nextIndex * screen.width, animated: true });
+            setImageIndex(nextIndex);
+        }
+    };
+
+  return [currentImageIndex, onScroll,scrollToNextImage] as const;
 };
 
 export default useImageIndexChange;