Add onImageIndexChange callback prop (#20)

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    |

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