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

Installation ⚙️

1yarn 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

1import React from "react";
2
3import ImageViewer from "react-native-reanimated-image-viewer";
4import { GestureHandlerRootView } from "react-native-gesture-handler";
5
6export default function App() {
7  const imageUrl = "https://images.pexels.com/photos/994605/pexels-photo-994605.jpeg?auto=compress&cs=tinysrgb&w=2726&h=2047&dpr=1"
8
9  return (
10    <GestureHandlerRootView style={{flex: 1}}>
11      <ImageViewer
12        imageUrl={imageUrl} width={2726} height={2047} onRequestClose={() => {}}
13      />
14    </GestureHandlerRootView>
15  );
16}
17

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