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