한국어

설치

Important

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

#설치

#필수 요구사항

#React Native Reanimated 설정

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

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

#React Native Gesture Handler 설정

#React Native Gesture Image Viewer 설치

설치

필수 요구사항

React Native Reanimated 설정

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

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

React Native Gesture Handler 설정

React Native Gesture Image Viewer 설치