A tiny, fast, and customizable image viewer component with react-native-reanimated and react-native-gesture-handler.
How to use it:
1. Install and import the component.
# Yarn $ yarn add react-native-reanimated-image-viewer # NPM $ npm i react-native-reanimated-image-viewer
import React from "react"; import ImageViewer from "react-native-reanimated-image-viewer"; import { GestureHandlerRootView } from "react-native-gesture-handler";
2. Basic usage.
export default function App() { const imageUrl = "/path/to/image" return ( <GestureHandlerRootView style={{flex: 1}}> <ImageViewer imageUrl={imageUrl} width={1920} height={1280} onRequestClose={() => {}} /> </GestureHandlerRootView> ); }
3. Available component props.
export type ImageViewerProps = { imageUrl: string; width: number; height: number; onRequestClose: () => unknown; onSingleTap?: () => unknown; };
Preview:
Download Details:
Author: andresribeiro
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/andresribeiro/react-native-reanimated-image-viewer
License: MIT