What is the difference between TouchableOpacity, TouchableHighlight, and Pressable?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid React Native basics — a prerequisite for any developer role.
Answer
All three make content tappable, but with different visual feedback and capabilities: TouchableOpacity: the most commonly used. Reduces opacity of the wrapped content on press, creating a visual feedback effect: <TouchableOpacity onPress={handlePress} activeOpacity={0.7}> <Text>Tap Me</Text> </TouchableOpacity>. activeOpacity (0-1): how opaque during press (default 0.2). Simple, clean effect. TouchableHighlight: highlights the wrapped content with an underlay color on press. Requires a single child (wrap in View if needed). Can look heavy on complex UIs: <TouchableHighlight onPress={handlePress} underlayColor="#ddd"> <View><Text>Tap Me</Text></View> </TouchableHighlight>. Pressable (modern — recommended): most flexible — provides pressed state to children, supports onLongPress, onPressIn, onPressOut, custom feedback, HitSlop. Can use a function as child to access pressed state: <Pressable onPress={handlePress} style={({ pressed }) => [styles.button, pressed && styles.pressed]} > {({ pressed }) => <Text style={{ opacity: pressed ? 0.7 : 1 }}>Tap Me</Text>} </Pressable>. Recommendation: prefer Pressable for new code — it's the most powerful and is the direction React Native is heading. TouchableOpacity is still very common and perfectly valid. Avoid TouchableNativeFeedback (Android-only ripple) unless you specifically want the Android ripple effect.
Common Mistake
A common mistake is memorizing definitions without understanding implications. When asked this question, go one level deeper — explain what happens when this concept is misused or ignored.