#Programmatic Control

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

function App() {
  const {
    goToIndex,
    goToPrevious,
    goToNext,
    currentIndex,
    totalCount,
    zoomIn,
    zoomOut,
    resetZoom,
    rotate
  } = useGestureViewerController();

  return (
    <View>
      <GestureViewer
        data={images}
        renderItem={renderImage}
      />
      {/* Zoom Controls */}
      <View>
        <Feather.Button name="zoom-in" onPress={() => zoomIn(0.25)} />
        <Feather.Button name="zoom-out" onPress={() => zoomOut(0.25)} />
        <Feather.Button
          name="refresh-cw"
          onPress={() => {
            rotate(0);
            resetZoom();
          }}
        />
        <Feather.Button name="rotate-cw" onPress={() => rotate(90)} />
        <Feather.Button name="rotate-ccw" onPress={() => rotate(90, false)} />
      </View>
      {/* Navigation Controls */}
      <View>
        <Feather.Button name="chevron-left" onPress={goToPrevious} />
        <Button title="Jump to index 2" onPress={() => goToIndex(2)} />
        <Feather.Button name="chevron-right" onPress={goToNext} />
        <Text>{`${currentIndex + 1} / ${totalCount}`}</Text>
      </View>
    </View>
  );
}