What is the TouchableHighlight in react native ?

28 Jun, 2021
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 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 2: Now create a project by the following command.
expo init TouchableHighlightDemo
Step 3: Now go into your project folder i.e. TouchableHighlightDemocd 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.
App.js
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
Picked
React-Native
React-Native Component
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Roadmap to Learn JavaScript For Beginners
How to float three div side by side using CSS?
Difference Between PUT and PATCH Request
ReactJS | Router
Axios in React: A Guide for Beginners