React Native Image Viewer With Reanimated

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