Menu Close

A image viewer for React Native created with Reanimated

A image viewer for React Native created with Reanimated

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
View Source Code
Posted in React Native