Button vs TouchableOpacity vs Pressable
choosing the right touchable.
Button is minimal and platform-styled with limited customization; TouchableOpacity wraps children with an opacity fade; Pressable is the modern, flexible primitive exposing rich press states.
WHAT THIS TESTS This checks familiarity with React Native's interaction primitives and the reasoning to pick the right one for a given need.
A GOOD ANSWER COVERS Button is the simplest option. It renders with platform-default appearance, takes props like title, onPress, color, and disabled, and is intentionally not very customizable, so you cannot freely restyle it or put arbitrary children inside. TouchableOpacity is a wrapper that accepts any children and provides feedback by reducing the opacity of the wrapped view while pressed, with a configurable activeOpacity. It is part of the older Touchable family alongside TouchableHighlight and TouchableWithoutFeedback. Pressable is the modern, recommended primitive. It detects a range of interactions including onPress, onPressIn, onPressOut, and onLongPress, supports hover on platforms that have it, exposes a pressed state through a function-as-style or function-as-children API so you can apply any visual feedback, and offers configuration like hitSlop and pressRetentionOffset. Pressable is the most appropriate when you need custom feedback, multiple interaction callbacks, or precise control over the touch target, which is most production buttons.
COMMON WRONG ANSWERS Saying Button can be styled like any view. Treating the three as interchangeable. Not realizing Pressable supersedes the older Touchable components for new code.
LIKELY FOLLOW-UPS How does the pressed state API of Pressable work? What is hitSlop for? When is TouchableOpacity still acceptable?
ONE CONCRETE EXAMPLE A custom brand button uses Pressable with a style function that returns a darker background when pressed is true, sets hitSlop to enlarge the touch target, and handles onPress for the action and onLongPress for a secondary menu. Achieving the same dynamic pressed styling with plain Button is not possible, and TouchableOpacity would only give an opacity fade rather than a true pressed color.
Interview question
Why is Pressable typically preferred over Button for a custom-styled production button with multiple interaction states?
- a.Pressable exposes a pressed state and multiple callbacks, allowing arbitrary custom feedback that Button cannot provideCorrect
- b.TouchableOpacity is deprecated and unusable, leaving Pressable as the only option
- c.Button cannot trigger onPress, so it is unsuitable for any real interaction
- d.Button renders faster but blocks long-press events entirely
Why? this is the answer
Pressable gives a pressed state plus onPressIn, onPressOut, and onLongPress, enabling fully custom feedback, whereas Button is minimally styleable. Button still handles onPress fine, and TouchableOpacity is not deprecated, just less flexible.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #pressable
- #touchableopacity
- #button
- #interaction
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