diff --git a/README.md b/README.md index fc18f5d..3b0f2ca 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ const [visible, setIsVisible] = useState(false); | Prop name | Description | Type | Required | | ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- | | `images` | Array of images to display | ImageSource[] | true | +| `keyExtractor` | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | 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 | diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx index f70b39f..d4cffe7 100644 --- a/src/ImageViewing.tsx +++ b/src/ImageViewing.tsx @@ -28,6 +28,7 @@ import { ImageSource } from "./@types"; type Props = { images: ImageSource[]; + keyExtractor?: (imageSrc: ImageSource, index: number) => string; imageIndex: number; visible: boolean; onRequestClose: () => void; @@ -51,6 +52,7 @@ const SCREEN_WIDTH = SCREEN.width; function ImageViewing({ images, + keyExtractor, imageIndex, visible, onRequestClose, @@ -147,7 +149,7 @@ function ImageViewing({ )} onMomentumScrollEnd={onScroll} //@ts-ignore - keyExtractor={(imageSrc) => imageSrc.uri || `${imageSrc}`} + keyExtractor={(imageSrc, index) => keyExtractor ? keyExtractor(imageSrc, index) : imageSrc.uri || `${imageSrc}`} /> {typeof FooterComponent !== "undefined" && (