Pressable: A More Powerful Way to Handle Touches

WHY IT EXISTS: React Native needed a single, core component that could reliably detect and respond to the various stages of a user's press interaction. While a simple onPress is often enough, complex UI requires knowing how a user is pressing an element—are they holding it, just tapping, or sliding their finger away? Pressable provides this granular control.

THE MENTAL MODEL: Think of Pressable as an invisible detection field you can wrap around any component. It doesn't have its own appearance. Instead, it just watches for touch events within its area and reports back a detailed sequence: touch down, touch up, long hold, and more.

HOW IT WORKS: When a user presses a Pressable-wrapped element, events fire in a specific order. First, onPressIn is called immediately. If the user lifts their finger, onPressOut is called, followed by onPress. If they hold their finger for a set duration (default 500ms), onLongPress is called. onPressOut will still fire when they finally release. To account for imprecise touches, you can use hitSlop to expand the area where a press can start, and pressRetentionOffset to expand the area where a press can move to and still be counted.

WHEN TO USE IT: Use Pressable whenever you need more than a simple tap handler. This is ideal for creating custom buttons that change style while pressed, list items that show menus on a long press, or small icons that need a larger, more forgiving tap area to improve user experience.

WHEN NOT TO USE IT: For a standard, platform-styled button where you only need a single onPress action and no custom feedback, the basic Button component can be simpler. Pressable is for when you need to control the interaction's look and feel from scratch.

ONE CANONICAL EXAMPLE: Creating a button that provides visual feedback during the press. You can wrap a View in a Pressable and pass a function to the style prop. This function receives an object with a pressed boolean. You can then return a different style, like a darker background color, when pressed is true, giving the user instant feedback that their touch has registered.