From 96578c9be2c33fbbea869cdd489078cb568ae9e3 Mon Sep 17 00:00:00 2001
From: Anton Kalinin <hurricanebox@gmail.com>
Date: Tue, 4 Feb 2020 20:38:06 +0200
Subject: [PATCH] Add onImageIndexChange callback prop (#20)

---
 README.md            |  1 +
 src/ImageViewing.tsx | 10 +++++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0885216..175e57f 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,7 @@ const [visible, setIsVisible] = useState(false);
 | `imageIndex`             | Current index of image to display                     | number                  | true     |
 | `visible`                | Is modal shown or not                                 | boolean                 | true     |
 | `onRequestClose`         | Function called to close the modal                    | function                | true     |
+| `onImageIndexChange`     | Function called when image index has been changed     | function                | false    |
 | `animationType`          | Animation modal presented with: default `fade`        | `none`, `fade`, `slide` | false    |
 | `backgroundColor`        | Background color of the modal in HEX (#000000EE)      | string                  | false    |
 | `swipeToCloseEnabled`    | Close modal with swipe up or down: default `true`     | boolean                 | false    |
diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
index 544cdfc..04b1498 100644
--- a/src/ImageViewing.tsx
+++ b/src/ImageViewing.tsx
@@ -6,7 +6,7 @@
  *
  */
 
-import React, { ComponentType, useCallback } from "react";
+import React, { ComponentType, useCallback, useEffect } from "react";
 import {
   Animated,
   Dimensions,
@@ -29,6 +29,7 @@ type Props = {
   imageIndex: number;
   visible: boolean;
   onRequestClose: () => void;
+  onImageIndexChange?: (imageIndex: number) => void;
   animationType?: "none" | "fade" | "slide";
   backgroundColor?: string;
   swipeToCloseEnabled?: boolean;
@@ -47,6 +48,7 @@ function ImageViewing({
   imageIndex,
   visible,
   onRequestClose,
+  onImageIndexChange,
   animationType = DEFAULT_ANIMATION_TYPE,
   backgroundColor = DEFAULT_BG_COLOR,
   swipeToCloseEnabled,
@@ -63,6 +65,12 @@ function ImageViewing({
     toggleBarsVisible
   ] = useAnimatedComponents();
 
+  useEffect(() => {
+    if (onImageIndexChange) {
+      onImageIndexChange(currentImageIndex);
+    }
+  }, [currentImageIndex]);
+
   const onZoom = useCallback(
     (isScaled: boolean) => {
       // @ts-ignore