React Native Gesture Image Viewer
Guide
2.x
Guide
English
2.x

Gesture Features

react-native-gesture-image-viewer supports various gestures essential for viewers. Please refer to the examples below for default gesture actions.

import { GestureViewer } from 'react-native-gesture-image-viewer';

function App() {
  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      dismiss={{
        enabled: true,
        threshold: 80,
        resistance: 2,
        fadeBackdrop: true,
      }}
      enableHorizontalSwipe={true}
      enablePinchZoom={true}
      enableDoubleTapZoom={true}
      enablePanWhenZoomed={true}
    />
  )
}

Gesture Props

dismiss

Dismiss gesture options. Calls onDismiss function when swiping down. Useful for closing modals with downward swipe gestures.

PropertyDescriptionTypeDefault
enabledWhen false, dismiss gesture is disabled.booleantrue
thresholdthreshold controls when onDismiss is called by applying a threshold value during vertical gestures.number80
resistanceresistance controls the range of vertical movement by applying resistance during dismiss gestures.number2
fadeBackdropBy default, the background opacity gradually decreases from 1 to 0 during downward swipe gestures.booleantrue

enableHorizontalSwipe (default: true)

Controls left/right swipe gestures. When false, horizontal gestures are disabled.

enablePinchZoom (default: true)

Controls two-finger pinch gestures with focal point zooming. When false, pinch zoom is disabled. Zoom centers on the point between your two fingers for intuitive scaling.

enableDoubleTapZoom (default: true)

Controls double-tap zoom gestures with precision targeting. When false, double-tap zoom is disabled. Zoom centers exactly on the tapped location.

enablePanWhenZoomed (default: true)

Enables panning when zoomed in with automatic boundary detection. When false, movement is disabled during zoom. Prevents content from moving outside visible screen area.