Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jobtoday/react-native-image-viewing
Tiny, purely TS, modal component for viewing images 🏙
https://github.com/jobtoday/react-native-image-viewing
image-gallery image-viewer pinch-to-zoom react react-native
Last synced: 21 days ago
JSON representation
Tiny, purely TS, modal component for viewing images 🏙
- Host: GitHub
- URL: https://github.com/jobtoday/react-native-image-viewing
- Owner: jobtoday
- License: mit
- Created: 2019-11-07T20:44:32.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-07T09:16:40.000Z (6 months ago)
- Last Synced: 2024-11-13T13:54:40.619Z (29 days ago)
- Topics: image-gallery, image-viewer, pinch-to-zoom, react, react-native
- Language: TypeScript
- Homepage: https://exp.host/@antonkalinin/react-native-image-viewing
- Size: 21.3 MB
- Stars: 890
- Watchers: 20
- Forks: 290
- Open Issues: 117
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-image-viewing - Tiny, purely TS, modal component for viewing images 🏙.  (Components / Image)
README
# react-native-image-viewing
> React Native modal component for viewing images as a sliding gallery.
[](https://badge.fury.io/js/react-native-image-viewing)
[](https://github.com/prettier/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
## Installation
```bash
yarn add react-native-image-viewing
```
or
```bash
npm install --save react-native-image-viewing
```
## Usage
```jsx
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);
setIsVisible(false)}
/>
```
#### [See Example](https://github.com/jobtoday/react-native-image-viewing/blob/master/example/App.tsx#L62-L80)
## 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:
```bash
yarn
```
Then go inside `example` folder and run:
```bash
yarn & yarn start
```
This will start packager for expo so you can change `/src/ImageViewing` and see changes in expo example app.
## License
[MIT](LICENSE)