✨ TouchableHighlight

? Quick Overview

TouchableHighlight is a core React Native component used to make elements respond to touch. When pressed, it darkens or highlights its child view, giving visual feedback to the user.

? Key Concepts

Wraps a single child component
Provides visual feedback on press
Supports press events like onPress
Customizable highlight color

? Syntax / Theory

TouchableHighlight works by temporarily applying an underlay color to its child when the user presses it.

? View Code Example

// Basic TouchableHighlight syntax
<TouchableHighlight onPress={handlePress} underlayColor="#DDDDDD">
  <Text>Press Me</Text>
</TouchableHighlight>

? Code Example(s)

? View Code Example

// Simple button using TouchableHighlight
import React from "react";
import { View, Text, TouchableHighlight } from "react-native";

export default function App() {
  const handlePress = () => {
    console.log("Button pressed");
  };

  return (
    <View>
      <TouchableHighlight onPress={handlePress} underlayColor="#A5D8FF">
        <Text>Tap Here</Text>
      </TouchableHighlight>
    </View>
  );
}

? Live Output / Explanation

When the user taps the text, the background briefly changes color and the message "Button pressed" appears in the console.

? Interactive Example

Use the controls below to simulate how underlayColor works in React Native. Press and hold the button to see the effect.

Underlay Color:

Press Me

// Console Output...

? View Logic Behind this Demo

// How the simulation works conceptually
<TouchableHighlight 
  underlayColor="{selectedColor}" 
  onShowUnderlay={() => setBg(selectedColor)}
  onHideUnderlay={() => setBg('white')}
  onPress={() => log('Pressed')}
>
  <View>Press Me</View>
</TouchableHighlight>

? Use Cases

Clickable list items
Simple buttons
Card tap interactions
Menu options

✅ Tips & Best Practices

Use only one child inside TouchableHighlight
Set a clear underlayColor for good UX
Consider Pressable for complex interactions

? Try It Yourself

Create a colored button using TouchableHighlight
Change the underlay color dynamically
Log different messages for different buttons