React Native Gesture Image Viewer
  • 한국어
  • 1.x

      • 설치

      React Native Reanimated v4 사용자

      React Native Reanimated v4를 사용하고 계신다면, 최상의 경험을 위해 이 라이브러리의 2.x 버전이 권장됩니다.

      v1.x도 Reanimated v4에서 동작하겠지만, v3에 최적화되어 있어 deprecation 경고나 호환성 문제가 발생할 수 있습니다.

      중요

      react-native-gesture-image-viewer는 react-native-reanimated와 react-native-gesture-handler를 기반으로 한 높은 성능의 뷰어 라이브러리입니다.
      따라서 이 라이브러리를 사용하기 전에 React Native Reanimated와 Gesture Handler를 반드시 설치해야 합니다. 자세한 설정 가이드는 각 라이브러리의 공식 문서를 참고해주세요.

      필수 요구사항

      라이브러리최소 버전
      react>=18.0.0
      react-native>=0.75.0
      react-native-gesture-handler>=2.24.0
      react-native-reanimated>=3.0.0

      React Native Reanimated 설정

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-reanimated

      babel.config.js에 다음과 같이 plugin을 추가해주세요.

      babel.config.js
      module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    // for web
    '@babel/plugin-proposal-export-namespace-from',
    // react-native-reanimated/plugin has to be listed last.
    'react-native-reanimated/plugin',
  ],
};

      metro.config.js에 기본 구성 함수를 wrapWithReanimatedMetroConfig로 래핑해주세요.

      metro.config.js
      const { wrapWithReanimatedMetroConfig } = require('react-native-reanimated/metro-config');

const config = {
  // Your existing Metro configuration options
};

module.exports = wrapWithReanimatedMetroConfig(config);

      React Native Gesture Handler 설정

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-gesture-handler
      • react-native-gesture-handler는 기본적으로 추가할 설정은 없지만, 공식 문서를 참고하여 환경에 맞게 설치해주세요.
      • 안드로이드 환경의 모달에서 제스처를 사용하려면 모달의 콘텐츠를 GestureHandlerRootView로 래핑해야 정상적으로 동작하지만, 라이브러리 내부에 이미 GestureHandlerRootView가 래핑되어 있어 모달 사용 시 추가로 래핑할 필요가 없습니다.

      React Native Gesture Image Viewer 설치

      모든 설정이 끝났습니다! 🎉
      이제 react-native-gesture-image-viewer를 설치하면 됩니다.

      npm
      yarn
      pnpm
      bun
      deno
      npm install react-native-gesture-image-viewer@1.x