What is the TouchableHighlight in react native ?

TouchableHighlight is a component that is used to provide a wrapper to Views 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>

Props

Now let’s start with the implementation.

Step-by-Step Implementation

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

Next, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

• For the Android users,
  • For the Android Emulator, press "a" as mentioned in the image below.
  • For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.
• For iOS users, simply scan the QR code using the Camera app.
• If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

- Import libraries: Import required libraries at the top of the file.

// import required libraries
import React from "react";
// import TouchableHighlight and other components from react-native
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Alert,
} from "react-native";

- StyleSheet: Create a StyleSheet for the Components.

// create styles for the components
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",
  },
});

- TouchableHighlight: Create a TouchableHighlight component, with a Text component as it's child and display a Alert message when user tap on it.

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

- App Component: Wrap the TouchableHighlight component in a View and return it in the App component. Also, ensure to export the App.

// create a main functional component
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>
  );
}

In the following example, we have a button, and when the user clicks on it, the TouchableHighlight functionality is demonstrated.

Complete Source Code:

App.js:

// import required libraries
import React from "react";
// import TouchableHighlight and other components from react-native
import {
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Alert,
} from "react-native";

// create a main functional component
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>
  );
}

// create styles for the components
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",
  },
});

Output: