# react-native-media-viewing

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

Latest version **0.1.3** (published 2022-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-media-viewing
pnpm add react-native-media-viewing
yarn add react-native-media-viewing
bun add react-native-media-viewing
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2022-08-08 |
| First published | 2022-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 54 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Pham Dinh Chinh |
| Maintainers | chinhfyb12 |
| Keywords | react, react-native, image, gallery, image-gallery, image-viewer, video-viewer, video-gallery, video |

## Links

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

## Dependencies (1)

- [react-native-video-controls](https://npm.io/package/react-native-video-controls.md) ^2.8.1

## 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

- 0.1.3 (latest) — 2022-08-08
- 0.1.2 — 2022-08-08
- 0.1.1 — 2022-08-08

## README

# react-native-media-viewing

Media viewing inherit from [react-native-image-viewing](https://github.com/jobtoday/react-native-image-viewing) library.

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

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

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

## Installation

```bash
yarn add react-native-media-viewing
```

or

```bash
npm install --save react-native-media-viewing
```

## Usage

```jsx
import MediaViewing from "react-native-media-viewing";

const media = [
  {
    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);

<MediaViewing
  media={media}
  imageIndex={0}
  visible={visible}
  onRequestClose={() => 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                                                                          | MediaSource[]                                               | true     |
| `keyExtractor`           | Uniqely identifying each image                                                                      | (mediaSrc: MediaSource, 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: MediaSource) | 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 MediaSource = ImageURISource | ImageRequireSource

## Contributing

See the [repository](https://github.com/jobtoday/react-native-image-viewing) to learn how to contribute to the repository and the development workflow.

## License

MIT

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