Pressable — cos’è, gestione delle pressioni in React Native

Cos’è Pressable?

Pressable è un componente React Native che fornisce un’interfaccia unificata per gestire tutti i tipi di tocchi. A differenza di tre diversi componenti Touchable (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback), Pressable li sostituisce tutti con un sistema flessibile di stati e stili.

Il componente è stato introdotto in React Native 0.63 (settembre 2020). Secondo Meta (2026), il 70% dei nuovi progetti React Native utilizza Pressable invece dei componenti Touchable. Pressable risolve il problema chiave di Touchable — un’API frammentata e la necessità di passare da un componente all’altro per effetti diversi.

Filosofia di Pressable

A differenza di TouchableOpacity, dove l’effetto di pressione è fisso (cambio di opacità), Pressable fornisce una funzione che riceve lo stato corrente. Lo sviluppatore decide come reagire visivamente a una pressione: cambiare colore, scala, ombra o una combinazione di effetti. Questo dà il controllo completo sull’UX.

Stati di Pressable: pressed, hovered, focused

Pressable definisce tre stati di interazione: pressed (dito sullo schermo), hovered (cursore sull’elemento su Web/TV), focused (elemento con focus da tastiera). Ogni stato attiva il callback corrispondente e viene passato alla funzione di stile e alla funzione di rendering figlio.

Importante: hovered e focused funzionano solo su piattaforme con supporto del puntatore (Web, Android TV, Apple TV). Su dispositivi mobili, è disponibile solo pressed. Per applicazioni multipiattaforma, progetta le reazioni visive tenendo conto di questa limitazione.

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

API e callback di Pressable

L’API di Pressable include quattro callback principali: onPress (pressione completa con rilascio), onLongPress (pressione lunga), onPressIn (inizio tocco) e onPressOut (fine tocco). La combinazione di onPressIn e onPressOut consente di creare animazioni personalizzate.

Props aggiuntive: delayLongPress (ritardo della pressione lunga, default 500 ms), pressRetentionOffset (area oltre la quale la pressione viene annullata), android_ripple (effetto ripple su Android). Nota: Ripple funziona solo su Android 5+.

<Pressable
  onPress={() => console.log('Premuto')}
  onLongPress={() => console.log('Pressione lunga')}
  onPressIn={() => console.log('Dito giù')}
  onPressOut={() => console.log('Dito su')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress viene chiamato solo se il dito viene sollevato all’interno dell’area del componente (considerando pressRetentionOffset). Se l’utente sposta il dito fuori dai limiti, onPress non viene attivato, prevenendo pressioni false. onPressOut viene chiamato in ogni caso al rilascio.

hitSlop: espandere l’area tattile

hitSlop è una prop di Pressable che estende l’area tattile oltre i limiti visibili del componente. Questo è fondamentale per elementi piccoli: icone, caselle di controllo, pulsanti radio. Apple HIG raccomanda una dimensione minima del bersaglio tattile di 44×44 punti. hitSlop consente di soddisfare questo requisito senza modificare la dimensione visiva.

hitSlop accetta un oggetto { top, bottom, left, right } o un singolo numero per tutti i lati. I valori sono specificati in pixel logici (dp/pt). Per le icone 24×24, si consiglia un hitSlop di almeno 10–12 su ciascun lato per raggiungere il bersaglio tattile di 44×44.

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

pressRetentionOffset — l’inverso di hitSlop: definisce l’area in cui l’utente può uscire dai limiti del componente senza annullare la pressione. Per impostazione predefinita, è uguale a hitSlop. Se hai bisogno che la pressione persista quando si esce dai limiti, aumenta pressRetentionOffset.

Pressable vs Touchable: quando migrare

Pressable vs Touchable — una domanda chiave nella scelta di un componente per la gestione dei tocchi. TouchableOpacity, TouchableHighlight e TouchableWithoutFeedback sono componenti obsoleti che non verranno rimossi ma non riceveranno nuove funzionalità. Meta raccomanda Pressable per i nuovi progetti.

Vantaggi principali di Pressable: API unificata per tutti i tipi di effetti, accesso allo stato pressed per stili personalizzati, supporto degli stati hovered/focused, hitSlop e pressRetentionOffset, callback onLongPress senza configurazione aggiuntiva. TouchableOpacity è adatto solo per semplici cambi di opacità.

Esempi di utilizzo di Pressable

Pressable consente di creare elementi interattivi complessi con un codice minimo. Di seguito è riportato un esempio di un pulsante animato con cambio di scala alla pressione ed effetto ripple su Android. Tale pulsante sostituisce la combinazione 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>
  );
};

Importante: usa useNativeDriver: true per le animazioni in Pressable. Questo scarica l’animazione sul thread nativo, prevenendo cadute di frame durante pressioni rapide. Il driver nativo è supportato per transform e opacity su tutte le piattaforme.