#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,
        direction: 'down',
        threshold: 80,
        resistance: 2,
        fadeBackdrop: true,
      }}
      horizontalSwipe={{
        enabled: true,
        distanceThresholdRatio: 0.25,
        velocityThreshold: 800,
      }}
      enablePinchZoom={true}
      enableDoubleTapZoom={true}
      enablePanWhenZoomed={true}
    />
  );
}

#Gesture Props

#dismiss

Dismiss gesture options. Controls which vertical swipe direction can trigger onDismiss, making it useful for modal-style close gestures with backward-compatible downward dismiss by default.

#horizontalSwipe

Controls user-driven left/right page swipe gestures. Controller navigation and autoplay remain available when disabled.

Defaults:

• enabled: true
• distanceThresholdRatio: 0.25 of viewer width
• velocityThreshold: 800 points/sec

A page commits when absolute horizontal distance is strictly greater than width * distanceThresholdRatio, or absolute horizontal velocity is strictly greater than velocityThreshold. Distance and velocity use strict > OR semantics. Zero and every finite non-negative value are accepted, including distance ratios greater than 1; negative and non-finite values fall back to defaults.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      horizontalSwipe={{
        enabled: true,
        distanceThresholdRatio: 0.25,
        velocityThreshold: 800,
      }}
    />
  );
}

Disable only user/mouse horizontal gestures:

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
/>

Use a distance-focused configuration:

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 0.5, velocityThreshold: 100_000 }} 
/>

Use a velocity-focused configuration:

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 10, velocityThreshold: 100 }} 
/>

Disable user gestures while autoplay continues:

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
  autoPlay={true}
  autoPlayInterval={1000}
/>

#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.