Pressable — wat is het, afhandeling van tikken in React Native

Wat is Pressable?

Pressable — een React Native-component die een uniforme interface biedt voor het afhandelen van alle soorten aanrakingen. In tegenstelling tot drie verschillende Touchable-componenten (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback), vervangt Pressable ze allemaal door één met een flexibel systeem van statussen en styling.

De component werd geïntroduceerd in React Native 0.63 (september 2020). Volgens Meta-gegevens (2026) gebruikt 70% van de nieuwe projecten op React Native Pressable in plaats van Touchable-componenten. Pressable lost het belangrijkste probleem van Touchable op — versnipperde API en de noodzaak om tussen componenten te schakelen voor verschillende effecten.

Filosofie van Pressable

In tegenstelling tot TouchableOpacity, waar het druk-effect vastligt (wijziging van doorzichtigheid), biedt Pressable een functie die de huidige status ontvangt. De ontwikkelaar beslist zelf hoe visueel te reageren op een aanraking: kleur, schaal, schaduw of een combinatie van effecten wijzigen. Dit geeft volledige controle over de UX.

Pressable-statussen: pressed, hovered, focused

Pressable definieert drie interactiestatussen: pressed (vinger op het scherm), hovered (cursor boven het element op Web/TV), focused (element in toetsenbordfocus). Elke status activeert de bijbehorende callback en wordt doorgegeven aan de stijlfunctie en de renderfunctie van kinderen.

Belangrijk: hovered en focused werken alleen op platforms met aanwijzerondersteuning (Web, Android TV, Apple TV). Op mobiele apparaten is alleen pressed beschikbaar. Voor cross-platform-applicaties ontwerpt u visuele reacties met deze beperking in gedachten.

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

API en callbacks van Pressable

Pressable API bevat vier hoofdcallbacks: onPress (volledig indrukken met loslaten), onLongPress (lang indrukken), onPressIn (begin van aanraking) en onPressOut (einde van aanraking). De combinatie van onPressIn en onPressOut maakt het mogelijk om aangepaste animaties te maken.

Aanvullende props: delayLongPress (vertraging van lang indrukken, standaard 500 ms), pressRetentionOffset (gebied waarbuiten het indrukken wordt geannuleerd), android_ripple (ripple-effect op Android). Belangrijk: Ripple werkt alleen op Android 5+.

<Pressable
  onPress={() => console.log('Ingedrukt')}
  onLongPress={() => console.log('Lang indrukken')}
  onPressIn={() => console.log('Vinger omlaag')}
  onPressOut={() => console.log('Vinger omhoog')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress wordt alleen aangeroepen wanneer de vinger binnen het componentgebied (rekening houdend met pressRetentionOffset) wordt opgetild. Als de gebruiker de vinger buiten de grenzen beweegt, wordt onPress niet geactiveerd, wat valse tikken voorkomt. onPressOut wordt in elk geval bij loslaten aangeroepen.

hitSlop: aanraakgebied uitbreiden

hitSlop — een Pressable-prop die het aanraakgebied buiten de zichtbare grenzen van de component uitbreidt. Dit is cruciaal voor kleine elementen: pictogrammen, checkboxes, radioknoppen. Apple HIG beveelt een minimale touch target-grootte van 44x44 punten aan. hitSlop maakt het mogelijk om aan deze vereiste te voldoen zonder de visuele grootte te wijzigen.

hitSlop accepteert een object { top, bottom, left, right } of een enkel getal voor alle zijden. Waarden worden opgegeven in logische pixels (dp/pt). Voor pictogrammen van 24x24 wordt een hitSlop van minimaal 10-12 aan elke kant aanbevolen om een touch target van 44x44 te bereiken.

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

pressRetentionOffset — de omgekeerde van hitSlop: definieert het gebied waarbinnen de gebruiker buiten de grenzen van de component kan gaan zonder het indrukken te annuleren. Standaard gelijk aan hitSlop. Als u wilt dat het indrukken behouden blijft bij het verlaten van de grenzen, verhoogt u pressRetentionOffset.

Pressable vs Touchable: wanneer overstappen

Pressable vs Touchable — de belangrijkste vraag bij het kiezen van een component voor aanraakafhandeling. TouchableOpacity, TouchableHighlight en TouchableWithoutFeedback zijn verouderde componenten die niet worden verwijderd, maar geen nieuwe functies krijgen. Meta beveelt Pressable aan voor nieuwe projecten.

Belangrijkste voordelen van Pressable: uniforme API voor alle soorten effecten, toegang tot de pressed-status voor aangepaste styling, ondersteuning voor hovered/focused-statussen, hitSlop en pressRetentionOffset, onLongPress-callback zonder extra configuratie. TouchableOpacity is alleen geschikt voor eenvoudige wijziging van de doorzichtigheid.

Voorbeelden van Pressable-gebruik

Pressable maakt het mogelijk om complexe interactieve elementen te maken met minimale code. Hieronder — een voorbeeld van een geanimeerde knop met schaalwijziging bij indrukken en een ripple-effect op Android. Zo'n knop vervangt de combinatie 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>
  );
};

Belangrijk: gebruik useNativeDriver: true voor animaties in Pressable. Dit verplaatst de animatie naar de native thread, waardoor frameverlies bij snel indrukken wordt voorkomen. Voor transform en doorzichtigheid wordt de native driver op alle platforms ondersteund.