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 adding a view to the view hierarchy, which can 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.

Example:

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

NOTE: TouchableHighlight must have one child (not zero or more than one)
If you wish to have several child components, wrap them in a View.

Props #

TouchableWithoutFeedback props... #

activeOpacity number #

Determines what the opacity of the wrapped view should be when touch is active.

onHideUnderlay function #

Called immediately after the underlay is hidden

onShowUnderlay function #

Called immediately after the underlay is shown

style View#style #

underlayColor color #

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

ioshasTVPreferredFocus bool #

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

iostvParallaxProperties object #

(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.

You can edit the content above on GitHub and send us a pull request!

← Prev Next →

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis