0Pricing
React Native Academy · Ders

Gesture Handler ile Kaydırma ve Sürükleme Hareketleri

React Native Gesture Handler paketini kurun, PanGestureHandler ve useAnimatedGestureHandler kullanarak sürüklenebilir bir kart oluşturun ve bırakıldığında başlangıç konumuna geri döndürün.

Gesture Handler ile Kaydırma ve Sürükleme Hareketleri, CoddyKit'te ücretsiz bir React Native Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Native Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Native Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

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.

Sıkça Sorulan Sorular

“Gesture Handler ile Kaydırma ve Sürükleme Hareketleri” dersi ücretsiz mi?

Evet — “Gesture Handler ile Kaydırma ve Sürükleme Hareketleri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Native Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Native Academy kursu toplamda 4 dersten oluşur.

“Gesture Handler ile Kaydırma ve Sürükleme Hareketleri” dersinde ne öğreneceğim?

React Native Gesture Handler paketini kurun, PanGestureHandler ve useAnimatedGestureHandler kullanarak sürüklenebilir bir kart oluşturun ve bırakıldığında başlangıç konumuna geri döndürün. React Native Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Native Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Native Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Gesture Handler ile Kaydırma ve Sürükleme Hareketleri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Native Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Native Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Reanimated ve Paylaşılan Değerleri Kurma
  2. Worklet'ler ve UI İş Parçacığında Kod Çalıştırma
  3. Gesture Handler ile Kaydırma ve Sürükleme Hareketleri
  4. Yakınlaştırma ve Döndürme Hareketleri
← React Native Academy Sayfasına Dön