Description:
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:
