#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

Use goToIndex(index, { animated: false }) when you need to update the current item immediately without the page transition animation. In v3, page transition animation is used for adjacent navigation only (goToPrevious, goToNext, or goToIndex to the previous/next item). Non-adjacent goToIndex calls rebase immediately because the viewer keeps only the small render window mounted.

• 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