What is the TouchableHighlight in react native ?

TouchableHighlight is a component that is used to provide a wrapper to Views in order to make them respond correctly to touch-based input. On press down the TouchableHighlight component has its opacity decreased which allows the underlying View or other component’s style to get highlighted.

This component must have only one child component. If there is more than one child component then wrap them inside a View component. It is necessary that there be a child component of TouchableHighlight.

Syntax:

<TouchableHighlight>
    // Child Component
</TouchableHighlight>

TouchableHighlight Props:

• onPress: It is used to specify a function that is called when the touch is released.
• disabled: If its value is true disable all interactions. The default is ‘false’.
• style: It is used to specify the style of the TouchableHighlight component
• activeOpacity: It is used to specify the opacity value of the wrapped View when the touch is active. It takes a value between 0 and 1 and the default value is 0.85.
• underlayColor: It is used to specify the color of the underlay that is shown when the touch is active.

Now let’s start with the implementation:

Step 1: Open your terminal and install expo-cli by the following command.

npm install -g expo-cli

Step 2: Now create a project by the following command.

expo init TouchableHighlightDemo

Step 3: Now go into your project folder i.e. TouchableHighlightDemo

cd TouchableHighlightDemo

Project Structure: It will look like the following:

Example: Now let’s implement the TouchableHighlight. In the following example, we have a button, and when the user clicks on it, the TouchableHighlight functionality is demonstrated.

import React from 'react';
import { StyleSheet,
         Text, 
         View, 
         TouchableHighlight, 
         Alert } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>

      <TouchableHighlight onPress={() => {
        Alert.alert("Touchable Highlight pressed.");
      }}
        style={styles.touchable}
        activeOpacity={0.5}
        underlayColor="#67c904"
      >
        <Text style={styles.text}>Click Me!</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  touchable: {
    height: 50,
    width: 200,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#4287f5'
  },
  text: {
    color: "#fff"
  }
});

Start the server by using the following command.

npm run android

Output: If your emulator did not open automatically then you need to do it manually. First, go to your android studio and run the emulator. Now start the server again.

Reference: https://reactnative.dev/docs/touchablehighlight