React Native bietet mehrere Wege, ein Element "antippbar" zu machen. TouchableHighlight ist der älteste davon – er verdunkelt das Element kurz beim Antippen, als visuelles Feedback.

1. Beschreibung

TouchableHighlight umschließt genau EIN Kind-Element und ändert dessen Hintergrundfarbe (über die Prop underlayColor) für die Dauer des Antippens – danach kehrt die Original-Optik zurück.

2. Kurzes Beispiel

<TouchableHighlight
  underlayColor="#ddd"
  onPress={() => alert('Gedrückt!')}
>
  <Text>Drücken</Text>
</TouchableHighlight>

3. Komplettes Projekt

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 [anzahl, setAnzahl] = useState(0);

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

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

4. Erklärung

• underlayColor – die Farbe, die kurz DURCHSCHEINT, während der Nutzer den Finger gedrückt hält; sollte zur eigentlichen Hintergrundfarbe passen (meist ein etwas dunklerer Ton).
• style auf TouchableHighlight selbst betrifft den äußeren Container (Padding, Radius, Grundfarbe).
• TouchableHighlight akzeptiert GENAU EIN Kind-Element – mehrere direkte Kinder erzeugen einen Fehler; verpacken Sie mehrere Elemente in einer gemeinsamen View.

5. Ausgaben