MOBILE
thaiphan  

REACT-NATIVE TOUCHABLEHIGHLIGHT NOT WORKING

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 Comment