Pressable — was ist das, Druckverarbeitung in React Native

Was ist Pressable?

Pressable ist eine React Native Komponente, die eine einheitliche Schnittstelle zur Verarbeitung aller Arten von Berührungen bietet. Im Gegensatz zu drei verschiedenen Touchable-Komponenten (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) ersetzt Pressable sie alle durch ein flexibles Zustands- und Styling-System.

Die Komponente wurde in React Native 0.63 (September 2020) eingeführt. Laut Meta (2026) verwenden 70% der neuen React Native Projekte Pressable anstelle von Touchable-Komponenten. Pressable löst das Hauptproblem von Touchable — eine fragmentierte API und die Notwendigkeit, zwischen Komponenten für verschiedene Effekte zu wechseln.

Philosophie von Pressable

Im Gegensatz zu TouchableOpacity, wo der Drück-Effekt fest vorgegeben ist (Opazitätsänderung), stellt Pressable eine Funktion bereit, die den aktuellen Zustand erhält. Der Entwickler entscheidet, wie visuell auf einen Druck reagiert wird: Farbänderung, Skalierung, Schatten oder eine Kombination von Effekten. Dies gibt volle Kontrolle über die UX.

Pressable-Zustände: pressed, hovered, focused

Pressable definiert drei Interaktionszustände: pressed (Finger auf Bildschirm), hovered (Cursor über Element auf Web/TV), focused (Element im Tastaturfokus). Jeder Zustand löst den entsprechenden Callback aus und wird an die Styling-Funktion und die Child-Render-Funktion übergeben.

Wichtig: hovered und focused funktionieren nur auf Plattformen mit Zeigerunterstützung (Web, Android TV, Apple TV). Auf mobilen Geräten ist nur pressed verfügbar. Für plattformübergreifende Anwendungen gestalten Sie visuelle Reaktionen unter Berücksichtigung dieser Einschränkung.

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
  onPress={handlePress}>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Release' : 'Press'}
    </Text>
  )}
</Pressable>

Pressable API und Callbacks

Die Pressable API umfasst vier Haupt-Callbacks: onPress (vollständiger Druck mit Loslassen), onLongPress (langer Druck), onPressIn (Berührungsbeginn) und onPressOut (Berührungsende). Die Kombination von onPressIn und onPressOut ermöglicht die Erstellung benutzerdefinierter Animationen.

Zusätzliche Props: delayLongPress (Verzögerung des langen Drucks, Standard 500 ms), pressRetentionOffset (Bereich, außerhalb dessen der Druck abgebrochen wird), android_ripple (Ripple-Effekt auf Android). Hinweis: Ripple funktioniert nur auf Android 5+.

<Pressable
  onPress={() => console.log('Gedrückt')}
  onLongPress={() => console.log('Langes Drücken')}
  onPressIn={() => console.log('Finger runter')}
  onPressOut={() => console.log('Finger hoch')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress wird nur aufgerufen, wenn der Finger innerhalb des Komponentenbereichs (unter Berücksichtigung von pressRetentionOffset) angehoben wird. Wenn der Benutzer seinen Finger außerhalb der Grenzen bewegt, wird onPress nicht ausgelöst, was falsche Drucke verhindert. onPressOut wird beim Loslassen in jedem Fall aufgerufen.

hitSlop: Erweiterung des Berührungsbereichs

hitSlop ist eine Pressable-Prop, die den Berührungsbereich über die sichtbaren Komponentengrenzen hinaus erweitert. Dies ist kritisch für kleine Elemente: Symbole, Kontrollkästchen, Optionsschaltflächen. Apple HIG empfiehlt eine minimale Berührungszielgröße von 44×44 Punkten. hitSlop ermöglicht die Einhaltung dieser Anforderung ohne Änderung der visuellen Größe.

hitSlop akzeptiert ein Objekt { top, bottom, left, right } oder eine einzelne Zahl für alle Seiten. Werte werden in logischen Pixeln (dp/pt) angegeben. Für 24×24 Symbole wird ein hitSlop von mindestens 10–12 auf jeder Seite empfohlen, um das 44×44 Berührungsziel zu erreichen.

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handleIconPress}
  style={styles.iconButton}>
  <Icon name="star" size={24} />
</Pressable>

pressRetentionOffset — das Gegenteil von hitSlop: definiert den Bereich, in dem der Benutzer die Komponentengrenzen verlassen kann, ohne den Druck abzubrechen. Standardmäßig gleich hitSlop. Wenn der Druck beim Verlassen der Grenzen bestehen bleiben soll, erhöhen Sie pressRetentionOffset.

Pressable vs Touchable: wann umsteigen

Pressable vs Touchable — eine Schlüsselfrage bei der Auswahl einer Komponente zur Berührungsverarbeitung. TouchableOpacity, TouchableHighlight und TouchableWithoutFeedback sind veraltete Komponenten, die nicht entfernt werden, aber keine neuen Funktionen erhalten. Meta empfiehlt Pressable für neue Projekte.

Hauptvorteile von Pressable: eine einheitliche API für alle Effekttypen, Zugriff auf den pressed-Zustand für benutzerdefiniertes Styling, Unterstützung für hovered/focused-Zustände, hitSlop und pressRetentionOffset, onLongPress-Callback ohne zusätzliche Konfiguration. TouchableOpacity ist nur für einfache Opazitätsänderungen geeignet.

Pressable-Anwendungsbeispiele

Pressable ermöglicht die Erstellung komplexer interaktiver Elemente mit minimalem Code. Nachfolgend ein Beispiel für einen animierten Button mit Skalierungsänderung bei Druck und Ripple-Effekt auf Android. Ein solcher Button ersetzt die Kombination von TouchableOpacity + Animated.

const AnimatedButton = ({ title, onPress }) => {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
      style={styles.button}>
      <AnimatedView style={[styles.inner, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </AnimatedView>
    </Pressable>
  );
};

Wichtig: Verwenden Sie useNativeDriver: true für Animationen in Pressable. Dies lagert die Animation in den nativen Thread aus und verhindert Bildrateneinbrüche bei schnellen Drücken. Der native Treiber wird für transform und opacity auf allen Plattformen unterstützt.