React Native modal component for viewing images as a sliding gallery.
npm version styled with prettier
- π₯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
yarn add react-native-image-viewing
or
npm install --save react-native-image-viewing
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)} />
| 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
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 startThis will start packager for expo so you can change /src/ImageViewing and see changes in expo example app.