Touch and Gestures

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).

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.

त्वरित जाँच: Why use react-native-gesture-handler for a pan gesture?

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