react-native-zoom-image-view

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

Installation

1yarn add react-native-zoom-image-view

or

1npm install --save react-native-zoom-image-view

Usage

1import ImageView from "react-native-zoom-image-view";
2
3const images = [
4  {
5    uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2797_source_1685935851.jpg",
6  },
7  {
8    uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2798_source_1685935851.jp",
9  },
10  {
11    uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2799_source_1685935851.jpg",
12  },
13  {
14    uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2800_source_1685935851.jpg",
15  },
16];
17
18const [visible, setIsVisible] = useState(false);
19
20<ImageView
21  images={images}
22  imageIndex={0}
23  visible={visible}
24  swipeToCloseEnabled={true}
25  onRequestClose={closeModal}
26  doubleTapToZoomEnabled={true}
27  onImageIndexChange={setActiveIndex}
28  backgroundColor={'white'}
29  animationType={'slide'}
30  loadingIndicatorColor={'#000000'}
31  top={top}
32/>

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
top	Header safeArea Insets	number	false
loadingIndicatorColor	Loading indicator color	string	false
cachePriority	Priority level cache	low, normal, high	false
resizeMode	Resize Mode	contain, cover, stretch, center	false

• type ImageSource = {uri: string}

Contributing

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

1yarn

Then go inside example folder and run:

1yarn & yarn start

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

License

MIT