# @hamidfzm/react-native-image-viewing

> React Native modal component for viewing images as a sliding gallery

Latest version **1.0.0** (published 2020-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hamidfzm/react-native-image-viewing
pnpm add @hamidfzm/react-native-image-viewing
yarn add @hamidfzm/react-native-image-viewing
bun add @hamidfzm/react-native-image-viewing
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-03-23 |
| First published | 2020-03-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 52.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Hamid FzM |
| Maintainers | hamidfzm |
| Keywords | react, react-native, image, gallery, image-gallery, image-viewer |

## Links

- npm: https://www.npmjs.com/package/@hamidfzm/react-native-image-viewing
- Repository: https://github.com/hamidfzm/react-native-image-viewing
- Homepage: https://github.com/hamidfzm/react-native-image-viewing#readme
- Issues: https://github.com/hamidfzm/react-native-image-viewing/issues
- npm.io page: https://npm.io/package/@hamidfzm/react-native-image-viewing

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-03-23
- 0.2.2 — 2020-03-23
- 0.2.1 — 2020-03-23
- 0.1.10 — 2020-03-14
- 0.1.9 — 2020-03-14
- 0.1.8 — 2020-03-14

## README

# react-native-image-viewing

> React Native modal component for viewing images as a sliding gallery.

[![npm version](https://badge.fury.io/js/react-native-image-viewing.svg)](https://badge.fury.io/js/react-native-image-viewing)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](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/@hamidfzm/react-native-image-viewing

<p align="center">
  <img src="https://github.com/hamidfzm/react-native-image-viewing/blob/master/demo.gif?raw=true" height="480" />
</p>

## Installation

```bash
yarn add @hamidfzm/react-native-image-viewing
```

or

```bash
npm install --save @hamidfzm/react-native-image-viewing
```

## Usage

```jsx
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](https://github.com/hamidfzm/react-native-image-viewing/blob/master/example/App.tsx#L62-L80)

## Props

| Prop name                | Description                                                                                         | Type                                                     | Required |
| ------------------------ | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -------- |
| `data`                   | Array of images to display                                                                          | ReadonlyArray<T>                                         | 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:

```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)

---
_Source: https://npm.io/package/@hamidfzm/react-native-image-viewing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._