Pressable-Komponente in React Native

Pressable ist die modernste, flexibelste Touch-Komponente von React Native – der empfohlene Nachfolger für die verschiedenen älteren "Touchable*"-Komponenten.

1. Beschreibung

Anders als TouchableOpacity/TouchableHighlight erlaubt Pressable, dass style eine FUNKTION sein kann, die den aktuellen Press-Zustand als Argument bekommt – so lässt sich das Aussehen während des Drückens völlig frei gestalten, statt nur eine feste Unterlegfarbe zu haben.

2. Kurzes Beispiel

<Pressable
  style={({ pressed }) => ({ opacity: pressed ? 0.5 : 1 })}
  onPress={() => console.log('Gedrückt!')}
>
  <Text>Drücken</Text>
</Pressable>

3. Komplettes Projekt

npx create-expo-app pressable-demo
cd pressable-demo

App.js

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

export default function App() {
  const [protokoll, setProtokoll] = useState([]);

  function eintragen(ereignis) {
    setProtokoll((aktuell) => [ereignis, ...aktuell].slice(0, 5));
  }

  return (
    <View style={styles.container}>
      <Pressable
        style={({ pressed }) => [
          styles.button,
          { backgroundColor: pressed ? '#1e40af' : '#2563eb' },
        ]}
        onPressIn={() => eintragen('Gedrückt (onPressIn)')}
        onPressOut={() => eintragen('Losgelassen (onPressOut)')}
        onLongPress={() => eintragen('Lang gedrückt (onLongPress)')}
        onPress={() => eintragen('Kompletter Tap (onPress)')}
      >
        {({ pressed }) => (
          <Text style={styles.buttonText}>
            {pressed ? 'Wird gedrückt...' : 'Drücken oder lang drücken'}
          </Text>
        )}
      </Pressable>

      <View style={styles.protokoll}>
        {protokoll.map((eintrag, index) => (
          <Text key={index} style={styles.protokollZeile}>{eintrag}</Text>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 80, alignItems: 'center' },
  button: { paddingVertical: 14, paddingHorizontal: 28, borderRadius: 8 },
  buttonText: { color: '#fff', fontWeight: '600' },
  protokoll: { marginTop: 24, alignItems: 'flex-start' },
  protokollZeile: { color: '#6b7280', marginBottom: 4 },
});

4. Erklärung

style als FUNKTION – bekommt {{ pressed }} als Argument und kann darauf basierend unterschiedliche Styles zurückgeben; auch Kind-Elemente (children) dürfen eine Funktion sein, wie hier für den Button-Text.
onPressIn/onPressOut – feuern beim BERÜHREN bzw. LOSLASSEN, unabhängig davon, ob daraus ein vollständiger Tap wird.
onLongPress – feuert nach einer konfigurierbaren Mindest-Haltezeit (Standard ca. 500ms).
onPress – feuert nur bei einem VOLLSTÄNDIGEN, kurzen Tap (drücken UND wieder loslassen INNERHALB der Komponente).

5. Ausgaben

Ausgabe

Ein blauer Button "Drücken oder lang drücken", der beim Gedrückthalten dunkler wird und den Text zu "Wird gedrückt..." ändert. Darunter sammelt sich ein Protokoll der letzten fünf Ereignisse, z. B. "Gedrückt (onPressIn)", "Losgelassen (onPressOut)", "Kompletter Tap (onPress)" – bei langem Gedrückthalten zusätzlich "Lang gedrückt (onLongPress)".

Tipp: Pressable ist heute die von der React-Native-Dokumentation selbst empfohlene Standardwahl für neue Projekte – TouchableOpacity/TouchableHighlight bleiben aus Kompatibilitätsgründen erhalten, sind aber für neuen Code meist die zweite Wahl.