React Native Gesture Image Viewer
Guide
Guide
English

Quick Start

Demo of react-native-gesture-image-viewer gestures

Examples & Demo

Installation

Important

react-native-gesture-image-viewer is a high-performance viewer library built on react-native-reanimated and react-native-gesture-handler.
Therefore, you must install React Native Reanimated and Gesture Handler before using this library. If you haven't set it up yet, please refer to the installation guide.

npm
yarn
pnpm
bun
npm install react-native-gesture-image-viewer

Basic Usage

react-native-gesture-image-viewer is a library focused purely on gesture interactions for complete customization.
You can create a viewer using any Modal of your choice as shown below:

import { ScrollView, Image, Modal } from 'react-native';
import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  const images = [...];
  const [visible, setVisible] = useState(false);

  const renderImage = useCallback((imageUrl: string) => {
    return <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />;
  }, []);

  return (
    <Modal visible={visible} onRequestClose={() => setVisible(false)}>
      <GestureViewer
        data={images}
        renderItem={renderImage}
        ListComponent={ScrollView}
        onDismiss={() => setVisible(false)}
      />
    </Modal>
  );
}