Image Lightbox With Pinch Zoom in/out – image-modal

An image modal component for React Native that shows the selected image in a full-size modal window allows that image to be zoomed in/out with touch pinch.

How to use it:

1. Install and import the ImageModal.

# NPM
$ npm i react-native-image-modal

import ImageModal from 'react-native-image-modal';

2. Add the Image Modal component to the app.

<ImageModal
  swipeToDismiss={false}
  resizeMode="contain"
  imageBackgroundColor="#000000"
  style={{
    width: imageWidth,
    height: 250,
  }}
  source={{
    uri:
      '1.jpg',
  }}
/>

3. Available component props.

isRTL?: boolean;
renderToHardwareTextureAndroid?: boolean;
isTranslucent?: boolean;
swipeToDismiss?: boolean;
imageBackgroundColor?: string;
overlayBackgroundColor?: string;
hideCloseButton?: boolean;
modalRef?: LegacyRef<ImageDetail>;
disabled?: boolean;
modalImageStyle?: ImageStyle;
modalImageResizeMode?: ResizeMode; // ResizeMode('contain', 'cover', 'stretch','center')
onLongPressOriginImage?: () => void;
renderHeader?: (close: () => void) => JSX.Element | Array<JSX.Element>;
renderFooter?: (close: () => void) => JSX.Element | Array<JSX.Element>;
onTap?: (eventParams: OnTap) => void;
onDoubleTap?: () => void;
onLongPress?: () => void;
onOpen?: () => void;
didOpen?: () => void;
onMove?: (position: OnMove) => void;
responderRelease?: (vx?: number, scale?: number) => void;
willClose?: () => void;
onClose?: () => void;

Preview:

Download Details:

Author: dev-yakuza

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/dev-yakuza/react-native-image-modal

License: MIT