TouchableHighlight
A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.
The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.
TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.
function MyComponent(props: MyComponentProps) {
return (
<View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
<Text>My Component</Text>
</View>
);
}
<TouchableHighlight
activeOpacity={0.6}
underlayColor="#DDDDDD"
onPress={() => alert('Pressed!')}>
<MyComponent />
</TouchableHighlight>;
Example
import React, {useState} from 'react';
import {StyleSheet, Text, TouchableHighlight, View} from 'react-native';
const TouchableHighlightExample = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(count + 1);
return (
<View style={styles.container}>
<TouchableHighlight onPress={onPress}>
<View style={styles.button}>
<Text>Touch Here</Text>
</View>
</TouchableHighlight>
<View style={styles.countContainer}>
<Text style={styles.countText}>{count || null}</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
},
countContainer: {
alignItems: 'center',
padding: 10,
},
countText: {
color: '#FF00FF',
},
});
export default TouchableHighlightExample;
Reference
Props
TouchableWithoutFeedback Props
Inherits TouchableWithoutFeedback Props.
activeOpacity
Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires underlayColor
to be set.
Type |
---|
number |
style
Type |
---|
View.style |
underlayColor
The color of the underlay that will show through when the touch is active.
Type |
---|
color |
onHideUnderlay
Called immediately after the underlay is hidden.
Type |
---|
function |
onShowUnderlay
Called immediately after the underlay is shown.
Type |
---|
function |
hasTVPreferredFocus
TV preferred focus (see documentation for the View component).
Type | Required | Platform |
---|---|---|
bool | No | Kepler |
nextFocusDown
TV next focus down (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusForward
TV next focus forward (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusLeft
TV next focus left (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusRight
TV next focus right (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
nextFocusUp
TV next focus up (see documentation for the View component).
Type | Required | Platform |
---|---|---|
number | No | Kepler |
testOnly_pressed
Handy for snapshot tests.
Type |
---|
bool |
alexaEntityType - Kepler Only
alexaEntityType
represents the value for the type of object that needs to be considered by Alexa UIController Interface. This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.type
field from the Alexa UIController Interface (Alexa UIController API doc)
Type |
---|
enum('Thing', 'VideoObject', 'ItemList', 'SoftwareApplication') |
alexaExternalIds - Kepler Only
This is an optional prop and specific to Alexa UIController Interface support, it maps to the entity.ExternalIds
field from the Alexa UIController Interface (Alexa UIController API doc)
entity.ExternalIds
are the identifiers for this entity unique within the scope of this endpoint. The entity.externalIds
field are opaque to Alexa and are only used to include in directives from Alexa. The identifiers reported in entity.externalIds
are required to be understood by the endpoint on all directive commands that accept an entity structure.
Type |
---|
object: {key: "string", value: "string"} |
ariaPosInSet
The value for ariaPosInSet
refers to the number of the element when the user can refer to the element by number, such as "Alexa, select number one."
This prop is required if the app wants to allow user to perform voice selection based on the number.
Note that providing the prop with a value does not result in the value being rendered automatically from the component, for a consistent user behavior, app needs to render the same ordinal value for the item.
Type |
---|
number |
aria-label
aria-label
is an accessibility prop. You can use it to specify the name of the item in voice selection, such as "Alexa, select Prime Video".
This prop is required if the app needs to allow the user to perform voice selection based on the name.
Note: Providing the prop with a value does not result in the value being rendered as the title of the component, the app must explictly render the same text value for the item.
Type |
---|
string |
ariaLabel
Deprecated. Use aria-label
instead.
The value for ariaLabel
refers to the name of the item, such as "Alexa, select Prime Video".
This prop is required if the app wants to allow user to perform voice selection based on the name.
Note that providing the prop with a value does not result in the value being rendered automatically from the component, for a consistent user behavior, app needs to render the same ordinal value for the it
Type |
---|
string |
keplerAltLabels - Kepler Only
The value for keplerAltLabels
refers to the list of alternate names for the item.
Note: This property replaces keplerAtlLabels
. keplerAtlLabels
is deprecated and will be removed in a future release.
This prop is required if the app wants to allow user to perform voice selection on the same item with different names.
Type |
---|
Array of string |
Last updated: Sep 30, 2025