0Pricing
React Native Academy · 강의

Gesture Handler로 팬 및 스와이프 제스처 구현하기

React Native Gesture Handler를 설치하고 PanGestureHandler와 useAnimatedGestureHandler를 사용하여 드래그 가능한 카드를 만든 다음, 손을 떼면 원래 위치로 되돌립니다.

Gesture Handler로 팬 및 스와이프 제스처 구현하기은(는) CoddyKit의 무료 React Native Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 React Native Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

What Is React Native Gesture Handler?

React Native Gesture Handler replaces the built-in touch system with one that runs entirely on the native UI thread. The default React Native responder system processes touch events on the JavaScript thread, introducing latency when JS is busy. Gesture Handler moves recognition and response to native code, enabling the same snappy feel as native iOS and Android apps.

Gesture Handler is the standard companion to Reanimated — they are designed to work together. It provides pan, pinch, rotation, tap, long-press, and fling recognizers that feed data directly into Reanimated worklets.

// Install:
// npx expo install react-native-gesture-handler

// Wrap your app root with GestureHandlerRootView:
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <YourApp />
    </GestureHandlerRootView>
  );
}

The Gesture API (v2)

Gesture Handler v2 (the modern API) uses the Gesture factory object to create gestures and the GestureDetector component to attach them to UI. This replaces the older component-based API (PanGestureHandler, TapGestureHandler) with a cleaner compositional model.

You create a gesture object (e.g., Gesture.Pan()), configure it with method chaining, and wrap your component in GestureDetector. The gesture callbacks are worklets that run on the UI thread.

import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const panGesture = Gesture.Pan()
  .onUpdate((event) => {
    'worklet';
    // event.translationX, event.translationY available
  });

return (
  <GestureDetector gesture={panGesture}>
    <Animated.View style={animatedStyle} />
  </GestureDetector>
);

Building a Draggable Card

The simplest pan gesture example is a draggable card. Create shared values for x and y position. In onUpdate, add the gesture's translationX/translationY to a stored start position. In onEnd, save the current position as the new start so the next drag continues from where the card stopped.

The card visually follows the finger without any JavaScript thread involvement — completely smooth even under JS load.

import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useSharedValue, useAnimatedStyle } from 'react-native-reanimated';

const offsetX = useSharedValue(0);
const offsetY = useSharedValue(0);
const startX = useSharedValue(0);
const startY = useSharedValue(0);

const pan = Gesture.Pan()
  .onBegin(() => {
    startX.value = offsetX.value;
    startY.value = offsetY.value;
  })
  .onUpdate((e) => {
    offsetX.value = startX.value + e.translationX;
    offsetY.value = startY.value + e.translationY;
  });

const style = useAnimatedStyle(() => ({
  transform: [
    { translateX: offsetX.value },
    { translateY: offsetY.value },
  ],
}));

Snapping Back to Origin on Release

A common pattern is to let the user drag a card freely but snap it back to its original position when released. In the onFinalize or onEnd callback, assign a withSpring animation to the offset values, returning them to zero with a satisfying bounce.

The spring's initial velocity can be set from the gesture's final velocity (event.velocityX, event.velocityY) to create a natural-feeling throw-and-catch effect that continues the motion before bouncing back.

import { withSpring } from 'react-native-reanimated';

const pan = Gesture.Pan()
  .onUpdate((e) => {
    offsetX.value = startX.value + e.translationX;
    offsetY.value = startY.value + e.translationY;
  })
  .onEnd((e) => {
    offsetX.value = withSpring(0, { velocity: e.velocityX });
    offsetY.value = withSpring(0, { velocity: e.velocityY });
  });

Swipe to Dismiss Pattern

A swipe-to-dismiss card tracks horizontal position during the pan, and when the card is released with sufficient horizontal velocity or displacement, it animates off screen with withTiming or withDecay instead of snapping back.

Use event.velocityX to determine if the throw was intentional (fast enough), and event.translationX to check if the card was dragged far enough. If either threshold is met, fly the card off screen and call runOnJS to notify React to remove it.

const DISMISS_VELOCITY = 800;
const DISMISS_DISTANCE = 150;

const pan = Gesture.Pan()
  .onUpdate((e) => { offsetX.value = e.translationX; })
  .onEnd((e) => {
    const shouldDismiss =
      Math.abs(e.velocityX) > DISMISS_VELOCITY ||
      Math.abs(e.translationX) > DISMISS_DISTANCE;

    if (shouldDismiss) {
      const direction = e.translationX > 0 ? 1 : -1;
      offsetX.value = withTiming(direction * 400, { duration: 200 },
        () => runOnJS(onDismiss)()
      );
    } else {
      offsetX.value = withSpring(0);
    }
  });

Tap Gesture for Press Interactions

Gesture.Tap() recognizes taps. Unlike Pressable or TouchableOpacity, a Gesture Handler tap runs its callback on the UI thread, enabling animated feedback without JS involvement. You can configure maxDuration and numberOfTaps for double-tap detection.

Gesture taps are especially useful when combined with Reanimated: the tap callback can directly trigger a spring animation on scale or opacity, giving zero-latency visual feedback that feels instantaneous.

const scale = useSharedValue(1);

const tap = Gesture.Tap()
  .onBegin(() => {
    scale.value = withSpring(0.95);
  })
  .onFinalize(() => {
    scale.value = withSpring(1);
  });

const style = useAnimatedStyle(() => ({
  transform: [{ scale: scale.value }],
}));

return (
  <GestureDetector gesture={tap}>
    <Animated.View style={[styles.button, style]} />
  </GestureDetector>
);

Composing Gestures: Simultaneous and Exclusive

Gesture Handler allows composing multiple gestures on the same component using Gesture.Simultaneous (both run at the same time) and Gesture.Exclusive (only one can be active at a time). This enables complex interactions like swipe-while-zooming on a photo viewer.

Use Gesture.Simultaneous(panGesture, pinchGesture) to allow both pan and pinch on the same element simultaneously. Use Gesture.Exclusive(swipeGesture, tapGesture) to ensure a swipe cancels a tap recognition.

const pan = Gesture.Pan().onUpdate(...);
const pinch = Gesture.Pinch().onUpdate(...);

// Both work at the same time (e.g. photo viewer):
const composedGesture = Gesture.Simultaneous(pan, pinch);

// Only one wins (e.g. swipe OR tap):
const exclusiveGesture = Gesture.Exclusive(
  Gesture.Fling().direction(Directions.LEFT).onEnd(onSwipe),
  Gesture.Tap().onEnd(onTap)
);

Gesture Lifecycle: Begin, Update, End, Finalize

Every gesture recognizer has lifecycle callbacks: onBegin fires when the gesture is recognized, onUpdate fires on every new touch event, onEnd fires when the gesture completes successfully, and onFinalize fires after end or when the gesture is cancelled.

Use onBegin to store the starting position, onUpdate to track motion, onEnd to handle successful completion, and onFinalize to clean up regardless of whether the gesture succeeded or was cancelled (e.g., interrupted by a phone call).

const pan = Gesture.Pan()
  .onBegin(() => { startPos.value = offsetX.value; })
  .onUpdate((e) => { offsetX.value = startPos.value + e.translationX; })
  .onEnd((e) => {
    // Gesture completed successfully
    if (Math.abs(e.translationX) > 100) runOnJS(onSwipeAway)();
    else offsetX.value = withSpring(0);
  })
  .onFinalize(() => {
    // Always runs — reset any temporary state
  });

Long Press Gesture

Gesture.LongPress() recognizes holds that exceed a minimum duration. Configure .minDuration(ms) to set the hold time. A common pattern is triggering a haptic feedback and entering an edit mode after a long press, like reordering items in a list.

Combine long press with pan for drag-to-reorder: the long press activates drag mode, and the pan moves the item while in drag mode. Gesture.Exclusive ensures a tap is ignored while dragging is active.

import * as Haptics from 'expo-haptics';

const [isDragging, setIsDragging] = React.useState(false);

const longPress = Gesture.LongPress()
  .minDuration(400)
  .onStart(() => {
    scale.value = withSpring(1.05);
    runOnJS(Haptics.selectionAsync)();
    runOnJS(setIsDragging)(true);
  });

const pan = Gesture.Pan()
  .enabled(isDragging)
  .onUpdate((e) => {
    offsetY.value = e.translationY;
  });

Gesture State and Enabling/Disabling

Gestures can be conditionally enabled with .enabled(boolean). When disabled, the gesture won't activate, allowing you to toggle interactivity based on app state. You can also call .shouldCancelWhenOutside(true) to cancel a gesture when the finger moves outside the component bounds.

The .hitSlop option expands the touch target area beyond the component's visual bounds — useful for small icon buttons that are hard to tap accurately on mobile screens.

const [isEnabled, setIsEnabled] = React.useState(true);

const tap = Gesture.Tap()
  .enabled(isEnabled)
  .hitSlop({ top: 10, bottom: 10, left: 10, right: 10 })
  .shouldCancelWhenOutside(true)
  .onEnd(() => {
    runOnJS(handleTap)();
  });

// Disable temporarily:
setIsEnabled(false); // tap won't fire

Handling Gesture Conflicts with ScrollView

A common challenge is a draggable card inside a ScrollView — both compete for the same touch event. Gesture Handler provides simultaneousWithExternalGesture and blocksExternalGesture to control priority. The waitFor option delays a gesture until another fails, enabling nested scroll-inside-swipe patterns.

For native scroll views, wrap them with ScrollView from Gesture Handler (import { ScrollView } from 'react-native-gesture-handler') instead of React Native's default to ensure gesture coordination works correctly.

import { ScrollView } from 'react-native-gesture-handler';

// Use GH's ScrollView to allow gesture coordination:
<ScrollView>
  <GestureDetector gesture={pan}>
    <Animated.View style={style}>
      {/* Draggable card inside scroll */}
    </Animated.View>
  </GestureDetector>
</ScrollView>

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: Gesture.Pan() creates a pan gesture recognizer that tracks finger translation in onUpdate and finishes in onEnd, withSpring on offset values creates snap-back or snap-away effects after release, and Gesture.Simultaneous composites multiple gestures so they operate at the same time. Next up we combine PinchGestureHandler and rotation for a zoomable image component.

자주 묻는 질문

“Gesture Handler로 팬 및 스와이프 제스처 구현하기” 강의는 무료인가요?

네 — “Gesture Handler로 팬 및 스와이프 제스처 구현하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 React Native Academy 강의 전체를 잠금 해제할 수 있습니다. React Native Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Gesture Handler로 팬 및 스와이프 제스처 구현하기”에서 뭘 배우나요?

React Native Gesture Handler를 설치하고 PanGestureHandler와 useAnimatedGestureHandler를 사용하여 드래그 가능한 카드를 만든 다음, 손을 떼면 원래 위치로 되돌립니다. 브라우저에서 직접 실행하는 실습 코드로 React Native Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

React Native Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 React Native Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“Gesture Handler로 팬 및 스와이프 제스처 구현하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 React Native Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 React Native Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. Reanimated 및 공유 값 설치
  2. Worklet과 UI 스레드에서 코드 실행하기
  3. Gesture Handler로 팬 및 스와이프 제스처 구현하기
  4. 핀치 확대 및 회전
← React Native Academy(으)로 돌아가기