# Touch and Gestures — React Native

Source: https://www.skillbyai.com/en/react-native/l-gestures

> Presses, swipes and pinches.

## Pressable and react-native-gesture-handler

For taps, use **Pressable**: it offers `onPress`, `onLongPress`, `onPressIn`/`onPressOut`, a `hitSlop` to enlarge small targets and a style function that receives `pressed`. Older components such as TouchableOpacity still exist, but Pressable is the more flexible API. For richer gestures (pan, pinch, rotate, swipe-to-delete) the community library **react-native-gesture-handler** recognises gestures on the native side, so they stay responsive even when JavaScript is busy. Its newer API builds gestures with `Gesture.Pan()`, `Gesture.Tap()` and similar, attached with a `GestureDetector`, and pairs naturally with Reanimated for gesture-driven animation. The app root needs a `GestureHandlerRootView`; check the docs for your version.

## A draggable card

Gesture handler with Reanimated shared values (sketch; check library docs).

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

export function DraggableCard() {
  const x = useSharedValue(0);
  const y = useSharedValue(0);

  const pan = Gesture.Pan()
    .onUpdate((e) => {
      x.value = e.translationX;
      y.value = e.translationY;
    })
    .onEnd(() => {
      x.value = withSpring(0);   // snap back
      y.value = withSpring(0);
    });

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

  return (
    <GestureDetector gesture={pan}>
      <Animated.View style={[{ width: 120, height: 120, borderRadius: 16, backgroundColor: "#2563eb" }, style]} />
    </GestureDetector>
  );
}
```

## Make touch targets big enough

Platform guidelines suggest roughly 44 by 44 points (iOS) or 48 by 48 dp (Android). Use padding or hitSlop for small icons.

**Quiz:** Why use react-native-gesture-handler for a pan gesture?

- [ ] It replaces the JavaScript engine
- [ ] It is required for any onPress handler
- [x] It recognises gestures natively, so they stay smooth even when JavaScript is busy
- [ ] It only works on the web

*Answer:* It recognises gestures natively, so they stay smooth even when JavaScript is busy. Native recognition avoids JS-thread delays.