@hamidfzm/react-native-image-viewing NPM

react-native-image-viewing

React Native modal component for viewing images as a sliding gallery.

🔥Pinch zoom for both iOS and Android
🔥Double tap to zoom for both iOS and Android
🔥Supports swipe-to-close animation
🔥Custom header and footer components
🔥Uses VirtualizedList to optimize image loading and rendering

Try with Expo: https://expo.io/@hamidfzm/react-native-image-viewing

Installation

yarn add @hamidfzm/react-native-image-viewing

npm install --save @hamidfzm/react-native-image-viewing

Usage

import ImageView from "@hamidfzm/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)}
/>;

See Example

Props

Prop name	Description	Type	Required
`data`	Array of images to display	ReadonlyArray	true
`getImage`	Function to extract image from data	(data: T) => ImageSource	true
`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
`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