@hamidfzm/react-native-image-viewing
v1.0.0
Published
React Native modal component for viewing images as a sliding gallery
Downloads
451
Maintainers
Readme
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
or
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 |
- ImageSource is an object like { uri: '<http location || file path>' }
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.