React Native Gesture Image Viewer
  • English
  • 1.x

      • Handling Viewer Events

      You can subscribe to specific events from GestureViewer using the useGestureViewerEvent hook. This allows you to respond to real-time gesture changes like zoom and rotation.

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

function App() {
  // Listen to zoom changes on the default instance (ID: 'default')
  useGestureViewerEvent('zoomChange', (data) => {
    console.log(`Zoom changed from ${data.previousScale} to ${data.scale}`);
  });

  // Listen to rotation changes on the default instance (ID: 'default')
  useGestureViewerEvent('rotationChange', (data) => {
    console.log(`Rotation changed from ${data.previousRotation}° to ${data.rotation}°`);
  });

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

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

      Event Types

      EventDescriptionData
      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 }