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/@antonkalinin/react-native-image-viewing

Installation

yarn add react-native-image-viewing

npm install --save react-native-image-viewing

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)}
/>

See Example

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

Contributing

To start contributing clone this repo and then run inside react-native-image-viewing folder:

yarn

Then go inside example folder and run:

yarn & yarn start

This will start packager for expo so you can change /src/ImageViewing and see changes in expo example app.

License

MIT