status-im
/
react-native-image-viewing
mirror of https://github.com/status-im/react-native-image-viewing.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add onImageIndexChange callback prop (#20)

This commit is contained in:
Anton Kalinin 2020-02-04 20:38:06 +02:00 committed by GitHub
parent a9aaf80809
commit 96578c9be2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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 |

10
src/ImageViewing.tsx
View File

@ -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