Touchable Highlight in react native

TouchableHighlight is a React Native component used to make views respond to touch events by darkening or highlighting the view when pressed. It is commonly used to create interactive buttons and clickable UI elements.

• Provides visual feedback by highlighting the component when pressed.
• Used to handle touch events like button clicks.
• Wraps other components like Text, View, or Image to make them touchable.

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      
      <TouchableHighlight
        onPress={() => Alert.alert("Button Pressed")}
        underlayColor="lightgray"
      >
        <Text style={{ fontSize: 18 }}>Click Me</Text>
      </TouchableHighlight>

    </View>
  );
}

• TouchableHighlight makes the Text clickable.
• onPress runs when the user taps the button.
• underlayColor shows highlight color when pressed.

Syntax

<TouchableHighlight>
    // Child Component
</TouchableHighlight>

Props for Touchable Highlight Component

These props are used to control the touch behavior, appearance, and highlight effect of the TouchableHighlight component when pressed.

• onPress – Function called when the component is pressed.
• underlayColor – Sets the highlight color when pressed.
• activeOpacity – Controls opacity level during press.
• style – Applies custom styles to the component.
• disabled – Disables touch interaction when true.
• onLongPress – Function called when pressed for a long time.
• delayPressIn – Delay before press action starts.
• delayPressOut – Delay before press action ends.

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.

1. 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.

2. For iOS users, simply scan the QR code using the Camera app.

3. 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.

- 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>
  );
}

We have a button, and when the user clicks on it, the TouchableHighlight functionality is demonstrated.

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: