keyExtractor property is added. It will help to implement custom logic to uniquely identifying each item in the virtualized list. (#105)

README.md is updated
This commit is contained in:
Rajesh De 2021-09-04 22:34:34 +05:30 committed by GitHub
parent 5b0e2cb0ec
commit 1fcd000c9c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 1 deletions

View File

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

View File

@ -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" && (
<Animated.View