React Native Gesture Image Viewer
  • English
  • 2.x

      • Handling Viewer Events

      GestureViewer provides a way to subscribe to specific events from the viewer using the useGestureViewerEvent hook. This allows you to respond to viewer interactions such as zoom, rotation, and taps.

      useGestureViewerEvent

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

function App() {
  useGestureViewerEvent('zoomChange', (data) => {
    console.log(`Zoom changed from ${data.previousScale} to ${data.scale}`);
  });

  useGestureViewerEvent('rotationChange', (data) => {
    console.log(`Rotation changed from ${data.previousRotation}° to ${data.rotation}°`);
  });

  useGestureViewerEvent('tap', (data) => {
    if (data.kind === 'single') {
      console.log(`Tapped item ${data.index} at (${data.x}, ${data.y})`);
    }
  });

  return <GestureViewer data={images} renderItem={renderImage} />;
}

      Listen to events on a specific instance

      You can listen to events on a specific instance by passing the instance ID as the first argument to the useGestureViewerEvent hook.

      // Listen to events on a specific instance
useGestureViewerEvent('gallery', 'zoomChange', (data) => {
  console.log(`Gallery zoom: ${data.scale}x`);
});
      Note

      The default id value is default.

      API Reference

      // Listen to events on the default instance
function useGestureViewerEvent<T extends GestureViewerEventType>(
  eventType: T,
  callback: GestureViewerEventCallback<T>,
): void;

// Listen to events on a specific instance
function useGestureViewerEvent<T extends GestureViewerEventType>(
  id: string,
  eventType: T,
  callback: GestureViewerEventCallback<T>,
): void;
      Event TypeDescriptionCallback Data
      zoomChangeFired when the zoom scale changes during pinch gestures{ scale: number, previousScale: number }
      rotationChangeFired when the rotation angle changes during rotation gestures{ rotation: number, previousRotation: number }
      tapFired when a tap is confirmed by the viewer. Currently emits confirmed single taps only.{ kind: 'single', x: number, y: number, index: number }
      Tip

      If you want to handle the tap event directly from a GestureViewer prop, you can use onSingleTap.