Skip to main content
Version: 0.60

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.

Example:

renderButton: function() {
return (
<TouchableHighlight onPress={this._onPressButton}>
<Image
style={styles.button}
source={require('./myButton.png')}
/>
</TouchableHighlight>
);
},

Exampleโ€‹

Propsโ€‹


Reference

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.

TypeRequired
numberNo

onHideUnderlayโ€‹

Called immediately after the underlay is hidden.

TypeRequired
functionNo

onShowUnderlayโ€‹

Called immediately after the underlay is shown.

TypeRequired
functionNo

styleโ€‹

TypeRequired
View.styleNo

underlayColorโ€‹

The color of the underlay that will show through when the touch is active.

TypeRequired
colorNo

hasTVPreferredFocusโ€‹

(Apple TV only) TV preferred focus (see documentation for the View component).

TypeRequiredPlatform
boolNoiOS

tvParallaxPropertiesโ€‹

(Apple TV only) Object with properties to control Apple TV parallax effects.

enabled: If true, parallax effects are enabled. Defaults to true. shiftDistanceX: Defaults to 2.0. shiftDistanceY: Defaults to 2.0. tiltAngle: Defaults to 0.05. magnification: Defaults to 1.0. pressMagnification: Defaults to 1.0. pressDuration: Defaults to 0.3. pressDelay: Defaults to 0.0.

TypeRequiredPlatform
objectNoiOS

nextFocusDownโ€‹

TV next focus down (see documentation for the View component).

TypeRequiredPlatform
boolNoAndroid

nextFocusForwardโ€‹

TV next focus forward (see documentation for the View component).

TypeRequiredPlatform
boolNoAndroid

nextFocusLeftโ€‹

TV next focus left (see documentation for the View component).

TypeRequiredPlatform
boolNoAndroid

nextFocusRightโ€‹

TV next focus right (see documentation for the View component).

TypeRequiredPlatform
boolNoAndroid

nextFocusUpโ€‹

TV next focus up (see documentation for the View component).

TypeRequiredPlatform
boolNoAndroid

testOnly_pressedโ€‹

Handy for snapshot tests.

TypeRequired
boolNo