/react-native-image-modal

Tiny, purely TS, modal component for viewing images 🏙

Primary LanguageTypeScriptMIT LicenseMIT

react-native-modal-image

Forked from https://github.com/jobtoday/react-native-image-viewing to support web

Usage

import ImageView from "react-native-image-viewing";

const images = [
  {
    uri: "https://images.unsplash.com/photo-1571501679680-de32f1e7aad4",
  },
  {
    uri: "https://images.unsplash.com/photo-1573273787173-0eb81a833b34",
  },
  {
    uri: "https://images.unsplash.com/photo-1569569970363-df7b6160d111",
  },
];

const [visible, setIsVisible] = useState(false);

<ImageView
  images={images}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => setIsVisible(false)}
/>

Props

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
onImageIndexChange Function called when image index has been changed function false
onLongPress Function called when image long pressed function (event: GestureResponderEvent, image: ImageSource) false
delayLongPress Delay in ms, before onLongPress is called: default 800 number false
animationType Animation modal presented with: default fade none, fade, slide false
presentationStyle Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar fullScreen, pageSheet, formSheet, overFullScreen false
backgroundColor Background color of the modal in HEX (#000000EE) string false
swipeToCloseEnabled Close modal with swipe up or down: default true boolean false
doubleTapToZoomEnabled Zoom image by double tap on it: default true boolean false
HeaderComponent Header component, gets current imageIndex as a prop component, function false
FooterComponent Footer component, gets current imageIndex as a prop component, function false
  • type ImageSource = ImageURISource | ImageRequireSource