Edit

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('image!myButton')}
      />
    </TouchableHighlight>
  );
},

NOTE: TouchableHighlight supports only one child

If you wish to have to have several child components, wrap them in a View.

Props

• TouchableWithoutFeedback props...

• activeOpacity
• onHideUnderlay
• onShowUnderlay
• style
• underlayColor

Methods

• computeSyntheticState

---

Reference

Props

activeOpacity

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

Type	Required
number	No

---

onHideUnderlay

Called immediately after the underlay is hidden

Type	Required
function	No

---

onShowUnderlay

Called immediately after the underlay is shown

Type	Required
function	No

---

style

Type	Required
View	No

---

underlayColor

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

Type	Required
string	No

Methods

computeSyntheticState()

computeSyntheticState(props);