React Native Gesture Image Viewer
가이드
1.x
가이드
한국어
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
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
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
npm install react-native-gesture-image-viewer