> For AI agents: the complete documentation index is available at https://react-native-swipe-deck.pages.dev/ko/llms.txt, the full documentation bundle is available at https://react-native-swipe-deck.pages.dev/ko/llms-full.txt.

# 설치

패키지와 필수 React Native gesture/animation peer dependency를 함께 설치합니다.


```sh [npm]
npm @react-native-motion-kit/swipe-deck react-native-gesture-handler react-native-reanimated react-native-worklets
```

```sh [yarn]
yarn @react-native-motion-kit/swipe-deck react-native-gesture-handler react-native-reanimated react-native-worklets
```

```sh [pnpm]
pnpm @react-native-motion-kit/swipe-deck react-native-gesture-handler react-native-reanimated react-native-worklets
```

```sh [bun]
bun @react-native-motion-kit/swipe-deck react-native-gesture-handler react-native-reanimated react-native-worklets
```

```sh [deno]
deno @react-native-motion-kit/swipe-deck npm:react-native-gesture-handler npm:react-native-reanimated npm:react-native-worklets
```

## 최소 지원 버전

| Package                        | Minimum  |
| ------------------------------ | -------- |
| `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 설정

사용 중인 React Native 또는 Expo 버전에 맞춰 공식 setup guide를 확인하세요.

- [React Native Reanimated getting started](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
- [React Native Gesture Handler installation](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation)

Babel 설정에서는 `react-native-worklets/plugin`을 마지막 Babel plugin으로 추가해야 합니다.

```js title="babel.config.js"
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['react-native-worklets/plugin'],
};
```

Gesture Handler는 앱 surface가 `GestureHandlerRootView` 아래에 있어야 합니다.

```tsx
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export function AppRoot() {
  return <GestureHandlerRootView style={{ flex: 1 }}>{/* app */}</GestureHandlerRootView>;
}
```