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
yarn add react-native-zoom-image-view
or
npm install --save react-native-zoom-image-view
Usage
import ImageView from "react-native-zoom-image-view";
const images = [
{
uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2797_source_1685935851.jpg",
},
{
uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2798_source_1685935851.jp",
},
{
uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2799_source_1685935851.jpg",
},
{
uri: "https://cdn11.bigcommerce.com/s-jl99edfb3g/images/stencil/original/attribute_rule_images/2800_source_1685935851.jpg",
},
];
const [visible, setIsVisible] = useState(false);
<ImageView
images={images}
imageIndex={0}
visible={visible}
swipeToCloseEnabled={true}
onRequestClose={closeModal}
doubleTapToZoomEnabled={true}
onImageIndexChange={setActiveIndex}
backgroundColor={'white'}
animationType={'slide'}
loadingIndicatorColor={'#000000'}
top={top}
/>
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:
yarn
Then go inside example
folder and run:
yarn & yarn start
This will start packager for expo so you can change /src/ImageView
and see changes in expo example app.