React-native TouchableHighlight not working

react native touchablehighlight

TouchableHighlight is a React-Native components that is used to respond to users touch.

The main problem of using this component is a difference between the API in some versions of React Native. There are some cases when TouchableHighlight elements are not really highlighted with no errors in the console.

Here is a short guide how to make this component work.

How to fix TouchableHighlight in React-Native

First of all, you need to define the onPress function, because some examples are shown without it (and in older versions it worked).

Here is a working code fragment written using ES6 syntax:

  renderElement() {
    return (
      <TouchableHighlight
        onPress={this.handlePress}>
      <Text>Highlighted</Text>
    </TouchableHighlight>
    );
  }

  handlePress() {
    console.log('element pressed');
  }

Don’t forget that onPress is written with an uppercase ‘P’.

When you finish you should be able to see the highlighting working in the emulator.

If you still can’t fix the problem, check the examples from the official documentation.

Leave a Reply

1 Comment on "React-native TouchableHighlight not working"


Guest
Alex
1 year 5 months ago

Thanks. I have been following a slightly out of date course and in the process converting React.createClass into ES6 classes. The one problem i had was the TouchHighlight.