React Native offers several ways to make an element "tappable". TouchableHighlight is the oldest of them – it briefly darkens the element on tap, as visual feedback.

1. Description

TouchableHighlight wraps exactly ONE child element and changes its background color (via the underlayColor prop) for the duration of the tap – afterward, the original look returns.

2. Short example

<TouchableHighlight
  underlayColor="#ddd"
  onPress={() => alert('Pressed!')}
>
  <Text>Press</Text>
</TouchableHighlight>

3. Complete project

npx create-expo-app touchablehighlight-demo
cd touchablehighlight-demo

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

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.counter}>{count}</Text>
      <TouchableHighlight
        style={styles.button}
        underlayColor="#1e40af"
        onPress={() => setCount(count + 1)}
      >
        <Text style={styles.buttonText}>+ 1</Text>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  counter: { fontSize: 48, marginBottom: 24 },
  button: { backgroundColor: '#2563eb', paddingVertical: 12, paddingHorizontal: 32, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

4. Explanation

• underlayColor – the color that briefly SHOWS THROUGH while the user holds the finger down; should complement the actual background color (usually a slightly darker shade).
• style on TouchableHighlight itself affects the outer container (padding, radius, base color).
• TouchableHighlight accepts EXACTLY ONE child element – multiple direct children cause an error; wrap multiple elements in a shared View.

5. Outputs