For AI agents: the complete documentation index is available at /2.x/llms.txt, the full documentation bundle is available at /2.x/llms-full.txt, and this page is available as Markdown at /2.x/guide/usage/programmatic-control.md.
v3 is stable. See what changed
  • English
  • 2.x
  • Programmatic Control

    You can programmatically control the GestureViewer using the useGestureViewerController hook.

    useGestureViewerController

    import { GestureViewer, useGestureViewerController } from 'react-native-gesture-image-viewer';
    
    function App() {
      const { goToIndex, goToPrevious, goToNext, zoomIn, zoomOut, resetZoom, rotate } =
        useGestureViewerController();
    
      return (
        <View>
          <GestureViewer data={images} renderItem={renderImage} />
          {/* Zoom Controls & Rotation Controls */}
          <View>
            <Button title="Zoom In" onPress={() => zoomIn(0.25)} />
            <Button title="Zoom Out" onPress={() => zoomOut(0.25)} />
            <Button
              title="Reset"
              onPress={() => {
                rotate(0);
                resetZoom();
              }}
            />
            <Button title="Rotate Clockwise" onPress={() => rotate(90)} />
            <Button title="Rotate Counter Clockwise" onPress={() => rotate(90, false)} />
          </View>
          {/* Navigation Controls */}
          <View>
            <Button title="Prev" onPress={goToPrevious} />
            <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
            <Button title="Next" onPress={goToNext} />
          </View>
        </View>
      );
    }

    Parameters

    • id?: string
      • The ID of the GestureViewer instance.
      • Default: "default"

    API Reference

    PropertyDescriptionTypeDefault Parameter
    goToIndexNavigate to a specific index.(index: number) => void-
    goToPreviousNavigate to the previous item.() => void-
    goToNextNavigate to the next item.() => void-
    zoomInZoom in by the specified multiplier.(multiplier?: number) => void0.25
    zoomOutZoom out by the specified multiplier.(multiplier?: number) => void0.25
    resetZoomReset zoom to the specified scale.(scale?: number) => void1
    rotateRotate by the specified angle.(angle?: RotationAngle, clockwise?: boolean) => void90, true
    • zoomIn(multiplier?)
      • multiplier: The multiplier for zooming in (range: 0.01 ~ 1)
      • Example: zoomIn(0.5) → Zoom in by an additional 50% of the current scale
    • zoomOut(multiplier?)
      • multiplier: The multiplier for zooming out (range: 0.01 ~ 1)
      • Example: zoomOut(0.3) → Zoom out by dividing the current scale by 1.3
    • resetZoom(scale?)
      • scale: The scale value to reset to
      • Example: resetZoom(1.5) → Reset to 1.5x scale
    • rotate(angle?, clockwise?)
      • angle: The angle to rotate (0, 90, 180, 270, 360)
      • clockwise: The direction to rotate (true: clockwise, false: counter-clockwise)
      • Example: rotate(90) → Rotate 90 degrees clockwise
      • Example: rotate(90, false) → Rotate 90 degrees counter-clockwise
      • Example: rotate(0) → Reset rotation