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.

Property	Description	Type	Default
`enabled`	When `false`, dismiss gesture is disabled.	`boolean`	`true`
`direction`	Controls which vertical swipe direction can dismiss.	`down`, `up`, `both`	`down`
`threshold`	`threshold` controls when `onDismiss` is called by applying a threshold value during vertical gestures.	`number`	`80`
`resistance`	`resistance` controls the range of vertical movement by applying resistance during dismiss gestures.	`number`	`2`
`fadeBackdrop`	By default, the background `opacity` gradually decreases as you drag in the configured dismiss direction.	`boolean`	`true`

`horizontalSwipe`

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

Property	Description	Type	Default
`enabled`	When `false`, user-driven horizontal page swipe gestures are disabled.	`boolean`	`true`
`distanceThresholdRatio`	Distance threshold as a ratio of viewer width. A page commits when absolute translation is strictly greater than `width * distanceThresholdRatio`, or velocity passes threshold.	`number`	`0.25`
`velocityThreshold`	Horizontal velocity threshold in points per second. A page commits when absolute velocity is strictly greater than this value, or distance passes threshold.	`number`	`800`

Distance and velocity use strict > OR semantics. Zero and every finite non-negative value are accepted, including distanceThresholdRatio values greater than 1; negative and non-finite values fall back to defaults.

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

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

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

<GestureViewer
  data={images}
  renderItem={renderImage}
  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.

#Gesture Features

#Gesture Props

#dismiss

#horizontalSwipe

#enablePinchZoom (default: true)

#enableDoubleTapZoom (default: true)