설치

React Native Reanimated v3 사용자

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

3.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`	`>=0.5.0`

React Native Reanimated 설정

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

npm

yarn

pnpm

bun

deno

npm install react-native-reanimated

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

npm

yarn

pnpm

bun

deno

npm install react-native-worklets

Babel 설정

Expo

Expo SDK와 호환되는 버전은 Expo Reanimated 설치 가이드에 따라 설치하세요.

npm

yarn

pnpm

bun

deno

npm expo install react-native-reanimated react-native-worklets

babel-preset-expo가 Babel 플러그인을 자동으로 구성합니다. Expo Go에서는 Reanimated 4가 포함된 Expo SDK를 사용하세요.

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-transform-export-namespace-from',
    // react-native-worklets/plugin has to be listed last.
    'react-native-worklets/plugin',
  ],
};

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

#설치

#필수 요구사항

#React Native Reanimated 설정

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

#Babel 설정

#Expo

#React Native CLI

#React Native Gesture Handler 설정

#React Native Gesture Image Viewer 설치

설치

필수 요구사항

React Native Reanimated 설정

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

Babel 설정

Expo

React Native CLI

React Native Gesture Handler 설정

React Native Gesture Image Viewer 설치