For AI agents: the complete documentation index is available at https://react-native-gesture-image-viewer.pages.dev/1.x/llms.txt, the full documentation bundle is available at https://react-native-gesture-image-viewer.pages.dev/1.x/llms-full.txt, and this page is available as Markdown at https://react-native-gesture-image-viewer.pages.dev/1.x/guide/usage/handling-viewer-events.md.
v3 is stable. See what changed
  • 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 }