How to use TouchableHighlight in React Native? Code Example

<TouchableHighlight> is used to create a wrapper over a component which can generate click events. It is different from TouchableWithoutFeedback in the sense that it can provide a visual change when clicked.

Below are the few important points regarding TouchableHighlight –

1. It highlights the underlay color by reducing the opacity of view.

2. Just like TouchableWithoutFeedback, it should have only one child. Like this –

<TouchableHighlight
  ...>
  <View>
    <Component1 />
    <Component2 />
  </View>
</TouchableHighlight>

3. There are 2 important props –

• underlayColor – Set it to the color value which you want to display when component is pressed.
• activeOpacity – The value from 0 to 1. It sets the opacity of View when pressed. By default the value is 0.85. That is, the view gets 15% transparent when pressed.

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#FF0000"
  onPress={() => alert('View Pressed!')}>

  <View>
    <Component1 />
    <Component2 />
  </View>

</TouchableHighlight>

4. React Native recommends to use Pressable api instead of TouchableHighlight because that is more future proof.

Code Example

import React, { useState } from "react";
import { StyleSheet, TouchableHighlight, Text, View } from "react-native";

const TouchableHighlightExample = () => {
  const [count, setCount] = useState(0);
  const [count1, setCount1] = useState(0);
  
  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Default TouchableHighlight</Text>
        <Text style={styles.countText}>Count: {count}</Text>
      </View>
      <TouchableHighlight
       onPress={() => setCount(count + 1)}
      >
        <View style={styles.button}> 
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>

      <View style={[styles.countContainer, {marginTop: 40}]}>
        <Text>activeOpacity=0.6 {'\n'}underlayColor='#FF00000'</Text>
        <Text style={styles.countText}>Count: {count1}</Text>
      </View>
      <TouchableHighlight
       onPress={() => setCount1(count1 + 1)}
       activeOpacity={0.6}
       underlayColor={'#FF0000'}
      >
        <View style={styles.button}>
          <Text>Red Color on Touch</Text>
        </View>
      </TouchableHighlight>
     
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

export default TouchableHighlightExample;

Output –

From the image you can see that the button is highlighted with red color when pressed. This is due to underlay color which got visible when the opacity of view is decreased by 40%.

In the code we are setting two TouchableHighlight components. 1st is with default values and second one with activeOpacity={0.6} and underlayColor={'#FF0000'}.

Live Demo

Conclusion

TouchableHighlight is a wrapper component which adds an on click event for child component. When pressed, it decreases the opacity of the children and show the underlay color.