# Gesture Handler - Advanced Patterns

> Hover gestures, manual control, platform config. See [core.md](core.md) for fundamentals, [composition.md](composition.md) for multi-gesture.

**Related:** [SKILL.md](../SKILL.md) for decision framework, [reference.md](../reference.md) for gesture type table.

---

## Pattern 1: Hover Gesture (Pointer Devices)

Hover gestures detect mouse, stylus, or trackpad hovering. They fire on iPad (with trackpad/mouse), macOS, and web -- but NOT on phone touch.

```typescript
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

const HOVER_SCALE = 1.05;
const TIMING_CONFIG = { duration: 150 };

function HoverableCard({ children }: { children: React.ReactNode }) {
  const isHovered = useSharedValue(false);

  const hover = Gesture.Hover()
    .onBegin(() => {
      isHovered.value = true;
    })
    .onEnd(() => {
      isHovered.value = false;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      {
        scale: withTiming(
          isHovered.value ? HOVER_SCALE : 1,
          TIMING_CONFIG,
        ),
      },
    ],
    shadowOpacity: withTiming(isHovered.value ? 0.2 : 0.1, TIMING_CONFIG),
  }));

  return (
    <GestureDetector gesture={hover}>
      <Animated.View style={[styles.card, animatedStyle]}>
        {children}
      </Animated.View>
    </GestureDetector>
  );
}
```

**Why good:** `onBegin`/`onEnd` for hover enter/exit, `withTiming` for smooth transitions, works on iPad trackpad and web

### iOS System Hover Effects

On iOS 17.0+, `GestureDetector` supports a `hoverEffect` prop for system-provided visual effects. These are lightweight alternatives to custom hover animations.

```typescript
<GestureDetector gesture={tap} hoverEffect="lift">
  <Animated.View style={styles.button}>
    <Text>Hover me</Text>
  </Animated.View>
</GestureDetector>
```

Available effects: `"highlight"` (dim overlay), `"lift"` (raise with shadow), `"automatic"` (system chooses).

**Platform note:** `hoverEffect` only works on iOS 17.0+ with pointer devices. It is ignored on Android and earlier iOS versions.

---

## Pattern 2: Manual Gesture (Custom Recognition Logic)

Use `Gesture.Manual()` when none of the built-in gestures match your recognition criteria. You control state transitions manually via the `GestureStateManager`.

```typescript
import {
  Gesture,
  GestureDetector,
  GestureStateManager,
} from "react-native-gesture-handler";

const MIN_MOVEMENT = 30;
const MAX_TIME_MS = 500;

function CustomGestureView() {
  const gesture = Gesture.Manual()
    .onTouchesDown((event, stateManager) => {
      // Only recognize single-finger touches
      if (event.numberOfTouches === 1) {
        stateManager.begin();
      } else {
        stateManager.fail();
      }
    })
    .onTouchesMove((event, stateManager) => {
      const touch = event.allTouches[0];
      if (touch && Math.abs(touch.absoluteX - touch.x) > MIN_MOVEMENT) {
        stateManager.activate();
      }
    })
    .onTouchesUp((_event, stateManager) => {
      stateManager.end();
    });

  return (
    <GestureDetector gesture={gesture}>
      <View style={styles.container} />
    </GestureDetector>
  );
}
```

**Why good:** full control over state transitions (begin, activate, fail, end), useful for gestures that don't fit any standard type

**When to use:** complex multi-step gesture recognition, gestures combining time + distance thresholds, or custom shapes (circle gesture, Z-pattern, etc.).

---

## Pattern 3: Platform-Specific Gesture Config

```typescript
import { Platform } from "react-native";

const PAN_MIN_DISTANCE_IOS = 10;
const PAN_MIN_DISTANCE_ANDROID = 15; // Android touch slop is slightly larger

const pan = Gesture.Pan()
  .minDistance(
    Platform.select({
      ios: PAN_MIN_DISTANCE_IOS,
      android: PAN_MIN_DISTANCE_ANDROID,
      default: PAN_MIN_DISTANCE_IOS,
    }),
  )
  .onChange((event) => {
    translateX.value += event.changeX;
  });
```

**Why good:** Android has a larger default touch slop than iOS; matching platform defaults prevents gestures feeling too sensitive or too sluggish per platform

### iPad Trackpad Two-Finger Pan

```typescript
const pan = Gesture.Pan()
  .enableTrackpadTwoFingerGesture(true)
  .onChange((event) => {
    translateX.value += event.changeX;
  });
```

**Why good:** enables two-finger trackpad swiping on iPad, which is the standard gesture for horizontal navigation; without this flag, trackpad two-finger gestures are not recognized

---

## Pattern 4: Gesture with runOnJS Bridge

When gesture callbacks need to trigger JS-thread operations (navigation, API calls, state updates in non-worklet stores), use `runOnJS`.

```typescript
import { runOnJS } from "react-native-reanimated";

function SwipeToDismiss({ onDismiss }: { onDismiss: () => void }) {
  const translateX = useSharedValue(0);
  const DISMISS_THRESHOLD = 150;

  const pan = Gesture.Pan()
    .onChange((event) => {
      translateX.value += event.changeX;
    })
    .onEnd(() => {
      if (Math.abs(translateX.value) > DISMISS_THRESHOLD) {
        // Bridge to JS thread for navigation/state
        runOnJS(onDismiss)();
      } else {
        translateX.value = withSpring(0);
      }
    });

  // ...
}
```

**Why good:** gesture callbacks run on UI thread (worklets) for performance; `runOnJS` safely bridges back to JS when needed for non-animation logic

**Gotcha:** Do NOT call `runOnJS` inside `onChange`/`onUpdate` (fires every frame) -- only in `onEnd`/`onFinalize`/`onStart` to avoid flooding the JS thread.

---

## Pattern 5: Fling Gesture (Quick Directional Swipe)

Unlike Pan, Fling fires once at the end of a quick swipe in a specific direction. Use it for page navigation or dismissal, not for continuous tracking.

```typescript
import { Directions } from "react-native-gesture-handler";

function FlingNavigator({ onSwipeLeft, onSwipeRight }: NavigatorProps) {
  const swipeLeft = Gesture.Fling()
    .direction(Directions.LEFT)
    .onStart(() => {
      runOnJS(onSwipeLeft)();
    });

  const swipeRight = Gesture.Fling()
    .direction(Directions.RIGHT)
    .onStart(() => {
      runOnJS(onSwipeRight)();
    });

  const flings = Gesture.Simultaneous(swipeLeft, swipeRight);

  return (
    <GestureDetector gesture={flings}>
      <View style={styles.page}>{/* Page content */}</View>
    </GestureDetector>
  );
}
```

**Why good:** Fling is optimized for quick swipes, fires once with direction info, `Simultaneous` allows both directions to be recognized

**When to use Fling vs Pan:** Use `Fling` for discrete navigation actions (go to next page). Use `Pan` when you need continuous position tracking during the swipe (dragging a card).

# Gesture Handler - Composition Patterns

> Multi-gesture composition and cross-component relations. See [core.md](core.md) for individual gesture types.

**Related:** [SKILL.md](../SKILL.md) for composition decision framework, [reference.md](../reference.md) for quick reference tables.

---

## Pattern 1: Simultaneous Pan + Pinch + Rotation (Photo Viewer)

The classic image viewer: drag, zoom, and rotate all at once.

```typescript
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
} from "react-native-reanimated";

function PhotoViewer({ source }: { source: ImageSourcePropType }) {
  // Pan state
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  // Pinch state
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);

  // Rotation state
  const rotation = useSharedValue(0);
  const savedRotation = useSharedValue(0);

  const pan = Gesture.Pan()
    .onChange((event) => {
      translateX.value += event.changeX;
      translateY.value += event.changeY;
    });

  const pinch = Gesture.Pinch()
    .onUpdate((event) => {
      scale.value = savedScale.value * event.scale;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });

  const rotate = Gesture.Rotation()
    .onUpdate((event) => {
      rotation.value = savedRotation.value + event.rotation;
    })
    .onEnd(() => {
      savedRotation.value = rotation.value;
    });

  // All three gestures active at the same time
  const composed = Gesture.Simultaneous(pan, pinch, rotate);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [
      { translateX: translateX.value },
      { translateY: translateY.value },
      { scale: scale.value },
      { rotate: `${rotation.value}rad` },
    ],
  }));

  return (
    <GestureDetector gesture={composed}>
      <Animated.Image source={source} style={[styles.image, animatedStyle]} />
    </GestureDetector>
  );
}
```

**Why good:** single `GestureDetector` with composed gesture, each gesture manages its own shared values, `Simultaneous` allows all three to be ACTIVE at once

```typescript
// BAD: Separate GestureDetectors for gestures that should interact
<GestureDetector gesture={pan}>
  <GestureDetector gesture={pinch}>
    <GestureDetector gesture={rotate}>
      <Animated.Image source={source} style={animatedStyle} />
    </GestureDetector>
  </GestureDetector>
</GestureDetector>
```

**Why bad:** nested detectors without explicit composition causes gestures to compete by default -- only one activates, the rest fail

---

## Pattern 2: Exclusive Double-Tap vs Single-Tap

Double-tap and single-tap on the same element. Double-tap must have higher priority.

```typescript
const DOUBLE_TAP_MAX_DELAY = 250;

function TapableCard({ onTap, onDoubleTap }: TapHandlers) {
  const doubleTap = Gesture.Tap()
    .numberOfTaps(2)
    .maxDelay(DOUBLE_TAP_MAX_DELAY)
    .onStart(() => {
      runOnJS(onDoubleTap)();
    });

  const singleTap = Gesture.Tap()
    .onStart(() => {
      runOnJS(onTap)();
    });

  // CRITICAL: doubleTap FIRST = higher priority
  const taps = Gesture.Exclusive(doubleTap, singleTap);

  return (
    <GestureDetector gesture={taps}>
      <View style={styles.card}>
        <Text>Tap or double-tap</Text>
      </View>
    </GestureDetector>
  );
}
```

**Why good:** `Exclusive` with doubleTap first means the system waits to see if a second tap comes; if it does, doubleTap activates; if not, singleTap activates after the delay

```typescript
// BAD: Wrong priority order
const taps = Gesture.Exclusive(singleTap, doubleTap);
```

**Why bad:** singleTap has higher priority, fires immediately on first tap, doubleTap never gets recognized

---

## Pattern 3: Race -- Swipe vs Long Press

When two gestures compete and only one should win.

```typescript
const LONG_PRESS_DURATION = 400;
const MIN_SWIPE_DISTANCE = 50;

function MessageBubble({ onSwipeReply, onLongPressMenu }: MessageHandlers) {
  const translateX = useSharedValue(0);

  const swipe = Gesture.Pan()
    .activeOffsetX([-MIN_SWIPE_DISTANCE, MIN_SWIPE_DISTANCE])
    .onChange((event) => {
      translateX.value += event.changeX;
    })
    .onFinalize(() => {
      if (Math.abs(translateX.value) > MIN_SWIPE_DISTANCE) {
        runOnJS(onSwipeReply)();
      }
      translateX.value = withTiming(0);
    });

  const longPress = Gesture.LongPress()
    .minDuration(LONG_PRESS_DURATION)
    .onStart(() => {
      runOnJS(onLongPressMenu)();
    });

  // First gesture to activate wins -- the other fails
  const gesture = Gesture.Race(swipe, longPress);

  return (
    <GestureDetector gesture={gesture}>
      <Animated.View style={animatedStyle}>
        <Text>Message content</Text>
      </Animated.View>
    </GestureDetector>
  );
}
```

**Why good:** `Race` ensures only one interaction happens -- either the user swipes (reply) or long-presses (context menu), never both; `activeOffsetX` delays pan activation until meaningful horizontal movement

---

## Pattern 4: Cross-Component Relations (Drag Inside ScrollView)

When a draggable child lives inside a scrollable parent, use cross-component relations.

```typescript
function DraggableInScrollView() {
  const childPan = Gesture.Pan()
    .onChange((event) => {
      translateY.value += event.changeY;
    });

  // Wrap the native ScrollView gesture so we can reference it
  const scrollGesture = Gesture.Native();

  // Method 1: Scroll waits for drag to fail
  // (scroll only works when not touching the draggable child)
  scrollGesture.requireExternalGestureToFail(childPan);

  // Method 2: Both active simultaneously
  // (scroll AND drag work at the same time -- rare but useful for parallax)
  // childPan.simultaneousWith(scrollGesture);

  // Method 3: Child blocks scroll while dragging
  // (scroll stops when dragging starts)
  // childPan.blocksExternalGesture(scrollGesture);

  return (
    <GestureDetector gesture={scrollGesture}>
      <Animated.ScrollView>
        <View style={styles.content}>
          <GestureDetector gesture={childPan}>
            <Animated.View style={[styles.draggable, animatedStyle]} />
          </GestureDetector>
        </View>
      </Animated.ScrollView>
    </GestureDetector>
  );
}
```

**Key differences from composition:**

| Same component               | Different components                |
| ---------------------------- | ----------------------------------- |
| `Gesture.Simultaneous(a, b)` | `a.simultaneousWith(b)`             |
| `Gesture.Race(a, b)`         | `a.requireExternalGestureToFail(b)` |
| `Gesture.Exclusive(a, b)`    | `a.blocksExternalGesture(b)`        |

**Why this distinction matters:** Composition methods create a single composed gesture for one `GestureDetector`. Cross-component relations connect gestures on separate `GestureDetector` components in the view hierarchy.

---

## Pattern 5: Pan with Axis Locking

Restrict pan to horizontal or vertical based on initial movement direction.

```typescript
const AXIS_LOCK_THRESHOLD = 15;

function AxisLockedPan() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const horizontalPan = Gesture.Pan()
    .activeOffsetX([-AXIS_LOCK_THRESHOLD, AXIS_LOCK_THRESHOLD])
    .failOffsetY([-AXIS_LOCK_THRESHOLD, AXIS_LOCK_THRESHOLD])
    .onChange((event) => {
      translateX.value += event.changeX;
    });

  const verticalPan = Gesture.Pan()
    .activeOffsetY([-AXIS_LOCK_THRESHOLD, AXIS_LOCK_THRESHOLD])
    .failOffsetX([-AXIS_LOCK_THRESHOLD, AXIS_LOCK_THRESHOLD])
    .onChange((event) => {
      translateY.value += event.changeY;
    });

  // Only one direction wins
  const pan = Gesture.Race(horizontalPan, verticalPan);

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

**Why good:** `activeOffsetX` + `failOffsetY` means the horizontal pan activates when horizontal movement exceeds threshold BUT fails if vertical movement exceeds threshold first. The `Race` composition ensures only one direction wins.

# Gesture Handler - Core Patterns

> Fundamental gesture setup and individual gesture types. See [SKILL.md](../SKILL.md) for decision guidance and red flags.

**Related:** [composition.md](composition.md) for multi-gesture patterns, [swipeable.md](swipeable.md) for list rows, [advanced.md](advanced.md) for hover and manual control.

---

## Pattern 1: App Root Setup

```typescript
import { GestureHandlerRootView } from "react-native-gesture-handler";

// CRITICAL: Must be at the actual root of the app
export function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* Your navigation, providers, etc. */}
      <AppContent />
    </GestureHandlerRootView>
  );
}
```

**Why good:** single root, flex: 1 covers full screen, all gestures and relations work within this root

```typescript
// BAD: Missing GestureHandlerRootView
export function App() {
  return <AppContent />; // Gestures silently fail everywhere
}
```

**Why bad:** gestures won't be recognized anywhere in the app, and no error is thrown

### Android Modal Gotcha

```typescript
import { Modal } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";

// Android modals create a separate native view hierarchy
function MyModal({ visible, onClose }: ModalProps) {
  return (
    <Modal visible={visible} onRequestClose={onClose}>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <ModalContent />
      </GestureHandlerRootView>
    </Modal>
  );
}
```

**Why good:** Modal on Android has its own view hierarchy; without a separate root, gestures inside modals fail silently

---

## Pattern 2: Pan Gesture (Drag)

Two approaches depending on how you use position data:

### onChange for Offset Accumulation (Most Common)

```typescript
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withDecay,
} from "react-native-reanimated";

const MIN_PAN_DISTANCE = 10;

function DraggableBox() {
  const translateX = useSharedValue(0);
  const translateY = useSharedValue(0);

  const pan = Gesture.Pan()
    .minDistance(MIN_PAN_DISTANCE)
    .onChange((event) => {
      // onChange provides DELTAS (changeX, changeY)
      translateX.value += event.changeX;
      translateY.value += event.changeY;
    })
    .onFinalize((event) => {
      // Decay animation using final velocity
      translateX.value = withDecay({ velocity: event.velocityX });
      translateY.value = withDecay({ velocity: event.velocityY });
    });

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

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[styles.box, animatedStyle]} />
    </GestureDetector>
  );
}
```

**Why good:** `onChange` gives deltas, so `+=` accumulates correctly; `onFinalize` runs on any terminal state; `minDistance` prevents accidental activation

### onUpdate for Absolute Position

```typescript
function DraggableFromOrigin() {
  const startX = useSharedValue(0);
  const translateX = useSharedValue(0);

  const pan = Gesture.Pan()
    .onStart(() => {
      // Save current position at gesture start
      startX.value = translateX.value;
    })
    .onUpdate((event) => {
      // onUpdate provides CUMULATIVE translation from gesture start
      translateX.value = startX.value + event.translationX;
    });

  // ... animatedStyle and render same as above
}
```

**Why good:** `onUpdate` gives cumulative translation, combined with saved start position for absolute positioning

```typescript
// BAD: Mixing onChange deltas with onUpdate cumulative values
const pan = Gesture.Pan().onUpdate((event) => {
  translateX.value += event.translationX; // WRONG: translationX is cumulative, not delta
});
```

**Why bad:** `translationX` grows each frame, so `+=` causes exponential drift instead of linear movement

---

## Pattern 3: Tap Gesture

```typescript
const TAP_MAX_DURATION = 300;

function TappableCard({ onTap }: { onTap: () => void }) {
  const scale = useSharedValue(1);

  const tap = Gesture.Tap()
    .maxDuration(TAP_MAX_DURATION)
    .onBegin(() => {
      // Visual feedback when touch starts (BEGAN state)
      scale.value = withTiming(0.95);
    })
    .onStart(() => {
      // Gesture recognized (ACTIVE state) -- fire action
      runOnJS(onTap)();
    })
    .onFinalize(() => {
      // Reset regardless of success/failure/cancel
      scale.value = withTiming(1);
    });

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

  return (
    <GestureDetector gesture={tap}>
      <Animated.View style={[styles.card, animatedStyle]}>
        <Text>Tap me</Text>
      </Animated.View>
    </GestureDetector>
  );
}
```

**Why good:** `onBegin` for immediate visual feedback (before recognition), `onStart` for the action, `onFinalize` for guaranteed cleanup, `runOnJS` bridges worklet back to JS

### Double Tap

```typescript
const DOUBLE_TAP_MAX_DELAY = 250;

const doubleTap = Gesture.Tap()
  .numberOfTaps(2)
  .maxDelay(DOUBLE_TAP_MAX_DELAY)
  .onStart(() => {
    scale.value = scale.value === 1 ? 2 : 1;
  });
```

**Gotcha:** When combining single and double tap on the same view, use `Gesture.Exclusive(doubleTap, singleTap)` -- double-tap must be the FIRST argument (higher priority). If single-tap goes first, it fires immediately and double-tap never gets a chance.

---

## Pattern 4: Pinch Gesture (Zoom)

```typescript
function PinchableImage({ source }: { source: ImageSourcePropType }) {
  const scale = useSharedValue(1);
  const savedScale = useSharedValue(1);

  const pinch = Gesture.Pinch()
    .onUpdate((event) => {
      // event.scale is relative to gesture start (1.0 = no change)
      scale.value = savedScale.value * event.scale;
    })
    .onEnd(() => {
      savedScale.value = scale.value;
    });

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

  return (
    <GestureDetector gesture={pinch}>
      <Animated.Image source={source} style={[styles.image, animatedStyle]} />
    </GestureDetector>
  );
}
```

**Why good:** `savedScale` preserves accumulated scale between gestures; `event.scale` is multiplicative (1.0 = unchanged, 2.0 = doubled)

**Gotcha:** `event.scale` starts at 1.0 for each gesture, not from the previous scale. Always multiply by the saved value.

---

## Pattern 5: Rotation Gesture

```typescript
function RotatableView() {
  const rotation = useSharedValue(0);
  const savedRotation = useSharedValue(0);

  const rotationGesture = Gesture.Rotation()
    .onUpdate((event) => {
      // event.rotation is in radians, relative to gesture start
      rotation.value = savedRotation.value + event.rotation;
    })
    .onEnd(() => {
      savedRotation.value = rotation.value;
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${rotation.value}rad` }],
  }));

  return (
    <GestureDetector gesture={rotationGesture}>
      <Animated.View style={[styles.dial, animatedStyle]} />
    </GestureDetector>
  );
}
```

**Why good:** same saved-value pattern as pinch; rotation in radians is additive (not multiplicative like scale)

---

## Pattern 6: Long Press Gesture

```typescript
const LONG_PRESS_DURATION = 500;

function LongPressableItem({ onLongPress }: { onLongPress: () => void }) {
  const isPressed = useSharedValue(false);

  const longPress = Gesture.LongPress()
    .minDuration(LONG_PRESS_DURATION)
    .onBegin(() => {
      isPressed.value = true; // Immediate visual feedback
    })
    .onStart(() => {
      // Fires after minDuration elapses with finger still down
      runOnJS(onLongPress)();
    })
    .onFinalize(() => {
      isPressed.value = false;
    });

  // ... animated style using isPressed.value for opacity/scale

  return (
    <GestureDetector gesture={longPress}>
      <Animated.View style={animatedStyle}>
        <Text>Hold me</Text>
      </Animated.View>
    </GestureDetector>
  );
}
```

**Key distinction:** `onBegin` fires when touch is detected (visual feedback). `onStart` fires only after `minDuration` milliseconds with finger still down (action trigger). If the user lifts their finger before `minDuration`, the gesture transitions to FAILED and `onStart` never fires.

# Gesture Handler - Swipeable Patterns

> ReanimatedSwipeable for list row interactions. See [core.md](core.md) for gesture fundamentals.

**Related:** [SKILL.md](../SKILL.md) for red flags, [reference.md](../reference.md) for ReanimatedSwipeable props.

---

## Pattern 1: Swipeable List Row with Delete Action

```typescript
import { useCallback, useRef } from "react";
import { Text, View, StyleSheet, Pressable } from "react-native";
import ReanimatedSwipeable, {
  type SwipeableMethods,
} from "react-native-gesture-handler/ReanimatedSwipeable";
import Animated, {
  useAnimatedStyle,
  type SharedValue,
} from "react-native-reanimated";

const SWIPE_THRESHOLD = 40;
const OVERSHOOT_FRICTION = 8;
const DELETE_ACTION_WIDTH = 80;

function RightActions(
  progress: SharedValue<number>,
  translation: SharedValue<number>,
) {
  const animatedStyle = useAnimatedStyle(() => ({
    // Slide in from the right, anchored to the swipe translation
    transform: [{ translateX: translation.value + DELETE_ACTION_WIDTH }],
  }));

  return (
    <Animated.View style={[styles.rightAction, animatedStyle]}>
      <Text style={styles.actionText}>Delete</Text>
    </Animated.View>
  );
}

interface SwipeableRowProps {
  item: { id: string; title: string };
  onDelete: (id: string) => void;
}

function SwipeableRow({ item, onDelete }: SwipeableRowProps) {
  const swipeableRef = useRef<SwipeableMethods>(null);

  const handleSwipeOpen = useCallback(() => {
    onDelete(item.id);
    swipeableRef.current?.close();
  }, [item.id, onDelete]);

  return (
    <ReanimatedSwipeable
      ref={swipeableRef}
      friction={2}
      rightThreshold={SWIPE_THRESHOLD}
      overshootFriction={OVERSHOOT_FRICTION}
      renderRightActions={RightActions}
      onSwipeableOpen={handleSwipeOpen}
    >
      <View style={styles.row}>
        <Text style={styles.rowText}>{item.title}</Text>
      </View>
    </ReanimatedSwipeable>
  );
}

const styles = StyleSheet.create({
  row: {
    padding: 16,
    backgroundColor: "#FFFFFF",
    borderBottomWidth: 1,
    borderBottomColor: "#E5E5E5",
  },
  rowText: {
    fontSize: 16,
    color: "#1A1A1A",
  },
  rightAction: {
    width: DELETE_ACTION_WIDTH,
    backgroundColor: "#FF3B30",
    justifyContent: "center",
    alignItems: "center",
  },
  actionText: {
    color: "#FFFFFF",
    fontWeight: "600",
    fontSize: 14,
  },
});
```

**Why good:** `ReanimatedSwipeable` runs animations on native thread (not JS), `overshootFriction: 8` gives native-feeling resistance, ref for programmatic control, `onSwipeableOpen` fires when the user completes the swipe

---

## Pattern 2: Swipeable with Left + Right Actions

```typescript
const ARCHIVE_ACTION_WIDTH = 80;
const DELETE_ACTION_WIDTH = 80;

function LeftActions(
  progress: SharedValue<number>,
  translation: SharedValue<number>,
) {
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translation.value - ARCHIVE_ACTION_WIDTH }],
  }));

  return (
    <Animated.View style={[styles.archiveAction, animatedStyle]}>
      <Text style={styles.actionText}>Archive</Text>
    </Animated.View>
  );
}

function RightActions(
  progress: SharedValue<number>,
  translation: SharedValue<number>,
) {
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translation.value + DELETE_ACTION_WIDTH }],
  }));

  return (
    <Animated.View style={[styles.deleteAction, animatedStyle]}>
      <Text style={styles.actionText}>Delete</Text>
    </Animated.View>
  );
}

function EmailRow({ email, onArchive, onDelete }: EmailRowProps) {
  const swipeableRef = useRef<SwipeableMethods>(null);

  const handleOpen = useCallback(
    (direction: "left" | "right") => {
      if (direction === "left") {
        onArchive(email.id);
      } else {
        onDelete(email.id);
      }
      swipeableRef.current?.close();
    },
    [email.id, onArchive, onDelete],
  );

  return (
    <ReanimatedSwipeable
      ref={swipeableRef}
      friction={2}
      leftThreshold={ARCHIVE_ACTION_WIDTH}
      rightThreshold={DELETE_ACTION_WIDTH}
      overshootFriction={OVERSHOOT_FRICTION}
      renderLeftActions={LeftActions}
      renderRightActions={RightActions}
      onSwipeableOpen={handleOpen}
    >
      <View style={styles.emailRow}>
        <Text style={styles.subject}>{email.subject}</Text>
        <Text style={styles.preview}>{email.preview}</Text>
      </View>
    </ReanimatedSwipeable>
  );
}
```

**Why good:** `onSwipeableOpen` receives the direction string, actions slide in from their respective sides using translation offset

---

## Pattern 3: Swipeable in FlatList (Close Others on Open)

```typescript
import { useCallback, useRef } from "react";
import { FlatList } from "react-native";
import type { SwipeableMethods } from "react-native-gesture-handler/ReanimatedSwipeable";

function SwipeableList({ items, onDelete }: SwipeableListProps) {
  // Track which swipeable is currently open
  const openSwipeableRef = useRef<SwipeableMethods | null>(null);

  const handleSwipeableOpen = useCallback((ref: SwipeableMethods) => {
    // Close the previously open row before opening the new one
    if (openSwipeableRef.current && openSwipeableRef.current !== ref) {
      openSwipeableRef.current.close();
    }
    openSwipeableRef.current = ref;
  }, []);

  const renderItem = useCallback(
    ({ item }: { item: ListItem }) => (
      <SwipeableRow
        item={item}
        onDelete={onDelete}
        onSwipeableOpen={handleSwipeableOpen}
      />
    ),
    [onDelete, handleSwipeableOpen],
  );

  return (
    <FlatList
      data={items}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
    />
  );
}

// SwipeableRow passes its ref up when opened
function SwipeableRow({
  item,
  onDelete,
  onSwipeableOpen,
}: SwipeableRowWithCallbackProps) {
  const swipeableRef = useRef<SwipeableMethods>(null);

  const handleOpen = useCallback(() => {
    if (swipeableRef.current) {
      onSwipeableOpen(swipeableRef.current);
    }
  }, [onSwipeableOpen]);

  return (
    <ReanimatedSwipeable
      ref={swipeableRef}
      renderRightActions={RightActions}
      onSwipeableWillOpen={handleOpen}
    >
      <RowContent item={item} />
    </ReanimatedSwipeable>
  );
}
```

**Why good:** `onSwipeableWillOpen` fires before animation completes (faster UX), only one row open at a time prevents visual clutter, ref-based approach avoids state re-renders