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