GestureViewer Props

`enableLoop` (기본값: `false`)

루프 모드를 활성화합니다. true일 때 마지막 아이템에서 다음으로 가면 첫 번째로, 첫 번째에서 이전으로 가면 마지막으로 돌아갑니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      enableLoop={true} 
    />
  );
}

`windowSize` (기본값: `3`)

현재 아이템을 포함해 내부 render-window slot을 몇 개 마운트할지 제어합니다. 값은 최소 3 이상의 홀수로 정규화됩니다. 예를 들어 4는 5가 됩니다.

하드 최대값은 없습니다. 큰 값은 더 많은 renderItem 콘텐츠를 의도적으로 마운트하므로, 메모리, 렌더링, 이미지 디코딩 비용을 감수하는 명시적인 선택으로 다루세요.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      windowSize={5} 
    />
  );
}

`pageSpacing` (기본값: `0`)

페이지 사이의 가로 시각 간격을 설정합니다. 페이지 stride는 width + pageSpacing이며, zoom bounds는 계속 width와 height를 사용합니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      pageSpacing={16} 
    />
  );
}

`horizontalSwipe`

사용자가 직접 수행하는 좌우 페이지 스와이프 제스처를 제어합니다. 비활성화해도 controller 이동과 autoplay는 계속 사용할 수 있습니다.

기본값:

enabled: true
distanceThresholdRatio: 뷰어 너비의 0.25
velocityThreshold: 초당 800 points

절대 가로 이동 거리가 width * distanceThresholdRatio보다 엄격히 클 때, 또는 절대 가로 속도가 velocityThreshold보다 엄격히 클 때 페이지가 전환됩니다. 거리와 속도는 엄격한 > OR 조건으로 동작합니다. 0과 모든 유한한 0 이상의 값은 허용되며, 1보다 큰 거리 비율도 허용됩니다. 음수와 유한하지 않은 값은 기본값으로 대체됩니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      horizontalSwipe={{
        enabled: true,
        distanceThresholdRatio: 0.25,
        velocityThreshold: 800,
      }} 
    />
  );
}

사용자/마우스 가로 제스처만 비활성화합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
/>

거리 중심 설정을 사용합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 0.5, velocityThreshold: 100_000 }} 
/>

속도 중심 설정을 사용합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ distanceThresholdRatio: 10, velocityThreshold: 100 }} 
/>

사용자 제스처를 비활성화해도 autoplay는 계속 동작합니다.

<GestureViewer
  data={data}
  renderItem={renderItem}
  horizontalSwipe={{ enabled: false }} 
  autoPlay={true}
  autoPlayInterval={1000}
/>

`autoPlay` (기본값: `false`)

자동 재생 모드를 활성화합니다. true일 때 지정된 간격 후 다음 아이템으로 자동으로 재생됩니다.

enableLoop이 활성화되면 마지막 아이템에서 다음으로 가면 첫 번째로, 첫 번째에서 이전으로 가면 마지막으로 돌아갑니다.
enableLoop이 비활성화되면 마지막 아이템에서 정지됩니다.
아이템이 하나만 있을 때 자동 재생이 비활성화됩니다.
줌 또는 회전 제스처가 감지되면 자동 재생이 일시 중지됩니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      autoPlay={true}
    />
  );
}

`autoPlayInterval` (기본값: `3000`)

자동 재생 간격을 밀리초 단위로 설정합니다.

양수 정수여야 합니다. 값이 250ms 미만이면 런타임에서 250ms로 제한됩니다.

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

function App() {
  return (
    <GestureViewer
      data={data}
      renderItem={renderItem}
      autoPlay={true}
      autoPlayInterval={3000}
    />
  );
}

`onSingleTap`

뷰어에서 싱글 탭이 확정되면 실행됩니다. 헤더, 푸터, 캡션, 액션 버튼처럼 뷰어 컨트롤 UI를 토글할 때 유용하며, 뷰어 위에 별도의 pressable을 덮지 않아도 됩니다.

더블 탭 줌이 활성화되어 있으면 더블 탭이 아닌지 확인한 뒤 실행되므로 약간 늦게 호출될 수 있습니다
스와이프, 핀치, dismiss, 더블 탭 줌 제스처에서는 호출되지 않습니다

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

function App() {
  const [showControls, setShowControls] = useState(true);

  return (
    <GestureViewer
      data={images}
      renderItem={renderImage}
      onSingleTap={() => setShowControls((prev) => !prev)} 
    />
  );
}

`initialIndex` (기본값: `0`)

초기 인덱스 값을 설정할 수 있습니다.

`maxZoomScale` (기본값: `2`)

최대 줌 배율을 제어할 수 있습니다.