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.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.