https://github.com/andresribeiro/react-native-reanimated-image-viewer

A image viewer for React Native created with Reanimated
https://github.com/andresribeiro/react-native-reanimated-image-viewer

image-viewer image-viewing react-native reanimated

Last synced: about 4 hours ago
JSON representation

A image viewer for React Native created with Reanimated

• Host: GitHub
• URL: https://github.com/andresribeiro/react-native-reanimated-image-viewer
• Owner: andresribeiro
• License: mit
• Created: 2022-12-29T18:24:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-02T14:55:25.000Z (18 days ago)
• Last Synced: 2024-11-02T15:27:19.919Z (18 days ago)
• Topics: image-viewer, image-viewing, react-native, reanimated
• Language: TypeScript
• Homepage:
• Size: 120 KB
• Stars: 141
• Watchers: 1
• Forks: 8
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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, [Rybun](https://rybun.com).

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

    

       {}}

      />

    

  );

}

```

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