TouchableHighlight
TouchableHighlight is a touchable component in React Native that darkens or changes the background color of its child when pressed, commonly used for list items and menu rows.
Basic Usage
Customizing the Underlay Color
The underlayColor prop defines the background color displayed briefly beneath the component while it is being pressed.
Requiring a Single Child
Unlike TouchableOpacity, TouchableHighlight requires exactly one direct child element, meaning multiple elements must be wrapped inside a single View.
TouchableHighlight vs TouchableOpacity
TouchableHighlight provides a background highlight effect, making it well suited for list rows, while TouchableOpacity provides a fade effect, better suited for standalone buttons.
TouchableHighlight vs Pressable
Pressable can replicate the same highlight behavior using its function-based style prop, and is generally recommended for new projects due to its additional flexibility and unified API.
Conclusion
TouchableHighlight remains a useful component for creating highlighted list interactions in React Native, though many modern codebases are transitioning toward Pressable for greater flexibility and consistency.
