A image viewer for React Native created with Reanimated
npm install react-native-reanimated-image-viewer- β‘ 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
Uses Reanimated and Gesture Handler under the hood. Created for my social network app, Drakkle
``bash`
yarn add react-native-reanimated-image-viewer
You will need Reanimated and Gesture Handler installed in your project
Import the ImageViewer into a new screen. You can also use a Modal, but you will need to configure the Gesture Handler on Android
`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 (
/>
);
}
`
| Property | Default | Type | Required
| ---- | ---- | ---- | ----
| imageUrl | undefined | string | truewidth
| | undefined | number | trueheight
| | undefined | number | trueonRequestClose
| | undefined | () => unknown | trueonSingleTap
| | undefined | () => unknown | false`