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
image-viewer.mp4
About 🗞️
Uses Reanimated and Gesture Handler under the hood. Created for my social network app, Drakkle
Installation ⚙️
yarn add react-native-reanimated-image-viewer
You will need Reanimated and 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
Example
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 |