React Native Gesture Image Viewer
가이드
2.x
가이드
한국어
2.x

설치

React Native Reanimated v3 사용자

React Native Reanimated v3를 사용 중이라면, 최상의 경험을 위해 이 라이브러리의 1.x 버전이 권장됩니다.

👉 1.x 문서로 이동

2.x 버전은 React Native Reanimated v4만 지원합니다.

중요

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>=4.0.0
react-native-worklets*

React Native Reanimated 설정

react-native-reanimated 및 react-native-worklets 설치:

npm
yarn
pnpm
bun
npm install react-native-reanimated
  • react-native-worklets는 더 나은 모듈성을 위해 react-native-reanimated에서 분리되었으며 별도로 설치해야 합니다.
npm
yarn
pnpm
bun
npm install react-native-worklets

Babel 설정

Expo

Expo Go 지원

Expo Go 환경에서 Reanimated 4를 사용하려면 Expo SDK 54(beta)를 사용해야 합니다.

Expo를 사용할 경우 expo prebuild를 실행하여 ios와 android 디렉토리의 네이티브 코드를 업데이트합니다.

npm
yarn
pnpm
bun
npm expo prebuild

끝입니다! 이제 Expo 프로젝트에서 Reanimated 4가 구성되었습니다. Expo SDK 50부터는 Expo 스타터 템플릿에 기본적으로 Reanimated Babel 플러그인이 포함되어 있습니다.

React Native CLI

React Native Community CLI를 사용할 때는 babel.config.js에 react-native-worklets/plugin 플러그인을 수동으로 추가해야 합니다.

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

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@beta