# react-native-reanimated-image-viewer

> A image viewer for React Native created with Reanimated

Latest version **1.0.2** (published 2023-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-reanimated-image-viewer
pnpm add react-native-reanimated-image-viewer
yarn add react-native-reanimated-image-viewer
bun add react-native-reanimated-image-viewer
```

## 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.2 |
| Published | 2023-01-05 |
| First published | 2023-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 60.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 156 |
| Author | André Ribeiro |
| Maintainers | andresribeiro |
| Keywords | react-native, react, reanimated, image, image-viewer, image-viewing, viewer, viewing, pinch, pan, zoom, double-tap, rn, typescript |

## Links

- npm: https://www.npmjs.com/package/react-native-reanimated-image-viewer
- Repository: https://github.com/andresribeiro/react-native-reanimated-image-viewer
- Homepage: https://github.com/andresribeiro/react-native-reanimated-image-viewer#readme
- Issues: https://github.com/andresribeiro/react-native-reanimated-image-viewer/issues
- npm.io page: https://npm.io/package/react-native-reanimated-image-viewer

## 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.2 (latest) — 2023-01-05
- 1.0.1 — 2023-01-05
- 1.0.0 — 2023-01-05

## README

# A image viewer for React Native created with Reanimated

### Features ✨

- ⚡ 120 FPS
- 🤏 Pinch to zoom
- 🤞 Double tap
- ✌️ Swipe-to-close
- 📦 Tiny
- 🚀 Created with Typescript
- 💅 Highly customizable

https://user-images.githubusercontent.com/63297375/210002857-2ab01afa-420a-40c9-9f4c-5df4c2a40a2b.mp4

### About 🗞️

Uses Reanimated and Gesture Handler under the hood. Created for my social network app, [Drakkle](https://play.google.com/store/apps/details?id=com.andresribeiro.drakkle)

### Installation ⚙️

```bash
yarn add react-native-reanimated-image-viewer
```

You will need [Reanimated](https://github.com/software-mansion/react-native-reanimated) and [Gesture Handler](https://github.com/software-mansion/react-native-gesture-handler) installed in your project

### Usage 🔨

Import the ImageViewer into a new screen. You can also use a Modal, but you will need to [configure the Gesture Handler on Android](https://docs.swmansion.com/react-native-gesture-handler/docs/next/installation#usage-with-modals-on-android)

### Example

```tsx
import React from "react";

import ImageViewer from "react-native-reanimated-image-viewer";
import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function App() {
  const imageUrl = "https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=2726&h=2047&dpr=1"

  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <ImageViewer
        imageUrl={imageUrl} width={2726} height={2047} onRequestClose={() => {}}
      />
    </GestureHandlerRootView>
  );
}

```

### Props ✍️

| Property | Default | Type | Required
| ---- | ---- | ---- | ----
| `imageUrl` | `undefined` | `string` | `true`
| `width` | `undefined` | `number` | `true`
| `height` | `undefined` | `number` | `true`
| `onRequestClose` | `undefined` | `() => unknown` | `true`
| `onSingleTap` | `undefined` | `() => unknown` | `false`

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