TouchableHighlight

TouchableHighlight is a component in React Native that provides pressable behavior with visual feedback. It wraps a single child element and responds to touch by showing a colored underlay behind the child, signaling activation. The underlayColor prop defines the color used for this feedback. When the user presses, the underlay appears; when the press is released, it disappears.

The component supports common touch events such as onPress, onPressIn, onPressOut, and onLongPress, along with optional timing controls like delayPressIn, delayPressOut, and delayLongPress. It also offers onShowUnderlay and onHideUnderlay callbacks, which fire when the highlight is displayed or hidden. A pressRetentionOffset (or hit area extension) can be configured to adjust how far the touch area extends beyond the view bounds. A disabled prop is available to temporarily disable interaction.

Usage considerations include that TouchableHighlight is suitable for simple, visible feedback on both iOS and Android. It is often employed for list items, buttons, or any tappable area where a clear pressed state improves usability. The wrapper forwards styling to its container, while underlayColor determines the visible feedback underneath the content.

Compared with other touchables, TouchableHighlight focuses on the underlay-based highlight effect, whereas newer patterns like Pressable provide broader customization. Developers choose TouchableHighlight when a straightforward pressed state with an underlay color is desired, keeping in mind its single-child requirement and basic feedback model.