Pressable: A More Powerful Way to Handle Touches
The Pressable API wraps any component to detect granular press stages like press-in, press-out, and long-press. Use it for custom interactive elements. The main footgun is forgetting to use hitSlop on small targets, making them difficult to tap.
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.
Interview question
For which scenario is React Native's Pressable component most beneficial compared to a simple Button or View with an onPress handler?
- a.When you need to ensure the component is always rendered with native performance optimizations.
- b.When you need to prevent accidental presses by requiring a double-tap gesture.
- c.When you want to detect specific touch stages like a finger pressing down, holding, or releasing.Correct
- d.When you need a standard, platform-styled button with minimal custom logic.
Why? this is the answer
Pressable's core purpose is to provide granular control over touch interactions, allowing detection of events like onPressIn, onLongPress, and onPressOut. The card explicitly states that for standard, platform-styled buttons with minimal logic, the basic Button component is simpler, making option D incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #mobile
- #ui
- #gestures
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles