TouchableHighlight is a wrapper component that responds to touches by decreasing the opacity of the wrapped view and showing an underlay color, providing visual feedback that the element is being pressed.
TouchableHighlight must have exactly one child component. If you need multiple children, wrap them in a View.
Usage
import { TouchableHighlight, Text, StyleSheet, Alert } from 'react-native';
function App() {
return (
<TouchableHighlight
onPress={() => Alert.alert('Pressed!')}
underlayColor="#DDDDDD"
style={styles.button}
>
<Text style={styles.text}>Press Me</Text>
</TouchableHighlight>
);
}
const styles = StyleSheet.create({
button: {
padding: 15,
backgroundColor: '#2196F3',
borderRadius: 8,
alignItems: 'center',
},
text: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
Props
Determines what the opacity of the wrapped view should be when touch is active.<TouchableHighlight activeOpacity={0.6}>
<Text>50% opacity on press</Text>
</TouchableHighlight>
underlayColor
ColorValue
default:"'black'"
The color of the underlay that shows through when the touch is active. This creates the “highlight” effect.<TouchableHighlight
underlayColor="rgba(0, 0, 0, 0.1)"
style={{ backgroundColor: 'white' }}
>
<Text>Light underlay</Text>
</TouchableHighlight>
onPress
(event: GestureResponderEvent) => void
Called when the touch is released, but not if cancelled (e.g., by a scroll).
onPressIn
(event: GestureResponderEvent) => void
Called when a touch is engaged, before onPress.
onPressOut
(event: GestureResponderEvent) => void
Called when the touch is released or cancelled.
onLongPress
(event: GestureResponderEvent) => void
Called when the user holds down the press for more than delayLongPress milliseconds.
Called immediately after the underlay is shown.
Called immediately after the underlay is hidden.
If true, disables all interactions for this component.
Delay in milliseconds from the start of the touch before onPressIn is called.
Delay in milliseconds from the release of the touch before onPressOut is called.
Delay in milliseconds from onPressIn before onLongPress is called.
Defines how far the touch can start away from the button. Extends the touchable area without changing visual layout.<TouchableHighlight hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Text>Easier to tap</Text>
</TouchableHighlight>
Defines how far the touch can move off the button before deactivating it.
Style applied to the wrapper View.
How It Works
When pressed, TouchableHighlight:
- Wraps your child in a View
- Reduces the child’s opacity to
activeOpacity
- Shows the
underlayColor through the transparent child
- Restores opacity when released
Make sure your child component has an explicit backgroundColor set, otherwise the underlay effect may not be visible.
Common Patterns
function Button({ onPress, title }) {
return (
<TouchableHighlight
onPress={onPress}
underlayColor="#1976D2"
style={{
backgroundColor: '#2196F3',
padding: 12,
borderRadius: 4,
alignItems: 'center',
}}
>
<Text style={{ color: 'white', fontWeight: 'bold' }}>
{title}
</Text>
</TouchableHighlight>
);
}
List Item
<TouchableHighlight
onPress={() => navigation.navigate('Details')}
underlayColor="#f0f0f0"
>
<View style={styles.listItem}>
<Text style={styles.title}>Item Title</Text>
<Text style={styles.subtitle}>Tap to view details</Text>
</View>
</TouchableHighlight>
With Image
<TouchableHighlight
onPress={handleImagePress}
underlayColor="transparent"
activeOpacity={0.7}
>
<View style={{ backgroundColor: '#fff' }}>
<Image
source={{ uri: 'https://example.com/image.jpg' }}
style={{ width: 200, height: 200 }}
/>
</View>
</TouchableHighlight>
Tracking Press State
function StatefulButton() {
return (
<TouchableHighlight
onPress={() => console.log('Pressed')}
onShowUnderlay={() => console.log('Underlay shown')}
onHideUnderlay={() => console.log('Underlay hidden')}
underlayColor="#ddd"
style={{ padding: 20, backgroundColor: '#fff' }}
>
<Text>Press Me</Text>
</TouchableHighlight>
);
}
Comparison with Other Touchables
- TouchableHighlight: Shows underlay color when pressed. Best for opaque backgrounds.
- TouchableOpacity: Fades opacity when pressed. Simpler and more commonly used.
- TouchableWithoutFeedback: No visual feedback. Should be avoided unless necessary.
- Pressable: Modern replacement with more flexibility and better performance.
For new projects, consider using Pressable instead, which offers more customization and better performance.