Pressable — mi ez, érintések kezelése a React Native-ban

Mi az a Pressable?

Pressable — egy React Native komponens, amely egységes interfészt biztosít minden típusú érintés kezelésére. Három különböző Touchable komponenssel (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) ellentétben a Pressable egyetlen komponenssel helyettesíti őket, rugalmas állapot és stílusrendszerrel.

A komponens a React Native 0.63-ban (2020 szeptemberében) került bevezetésre. A Meta adatai szerint (2026) az új React Native projektek 70%-a Pressable-t használ a Touchable komponensek helyett. A Pressable megoldja a Touchable fő problémáját — a töredezett API-t és a különböző effektekhez szükséges komponensek közötti váltogatást.

A Pressable filozófiája

Ellentétben a TouchableOpacity-val, ahol a nyomás effektus mereven meghatározott (átlátszóság változása), a Pressable egy függvényt biztosít, amely megkapja az aktuális állapotot. A fejlesztő maga dönti el, hogyan reagáljon vizuálisan az érintésre: színt, méretet, árnyékot vagy effektusok kombinációját változtat. Ez teljes kontrollt ad az UX felett.

Pressable állapotok: pressed, hovered, focused

Pressable három interakciós állapotot határoz meg: pressed (ujj a képernyőn), hovered (kurzor az elem felett Web/TV-n), focused (elem billentyűzet fókuszban). Minden állapot aktiválja a megfelelő visszahívást és továbbítódik a stílusfüggvénynek és a gyermek renderelő függvénynek.

Fontos: a hovered és focused csak mutatótámogatással rendelkező platformokon működik (Web, Android TV, Apple TV). Mobileszközökön csak a pressed érhető el. Többplatformos alkalmazásokhoz tervezze a vizuális reakciókat ezt a korlátozást figyelembe véve.

<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 és visszahívások

Pressable API négy fő visszahívást tartalmaz: onPress (teljes lenyomás elengedéssel), onLongPress (hosszú lenyomás), onPressIn (érintés kezdete) és onPressOut (érintés vége). Az onPressIn és onPressOut kombinációja lehetővé teszi egyedi animációk létrehozását.

További propsok: delayLongPress (hosszú lenyomás késleltetése, alapértelmezett 500 ms), pressRetentionOffset (terület, amelyen túl a lenyomás törlődik), android_ripple (ripple effektus Androidon). Fontos: A Ripple csak Android 5+-on működik.

<Pressable
  onPress={() => console.log('Lenyomva')}
  onLongPress={() => console.log('Hosszú lenyomás')}
  onPressIn={() => console.log('Ujj le')}
  onPressOut={() => console.log('Ujj fel')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress csak akkor hívódik meg, ha az ujj a komponens területén belül (a pressRetentionOffset figyelembevételével) kerül felemelésre. Ha a felhasználó az ujját a határokon kívülre mozdítja, az onPress nem aktiválódik, megelőzve a téves lenyomásokat. Az onPressOut minden esetben meghívódik elengedéskor.

hitSlop: az érintési terület kiterjesztése

hitSlop — egy Pressable prop, amely kiterjeszti az érintési területet a komponens látható határain túl. Ez kritikus a kis elemeknél: ikonok, jelölőnégyzetek, választógombok. Az Apple HIG minimális érintési célméretként 44x44 pontot ajánl. A hitSlop lehetővé teszi e követelmény teljesítését a vizuális méret megváltoztatása nélkül.

A hitSlop elfogad egy { top, bottom, left, right } objektumot vagy egyetlen számot minden oldalra. Az értékek logikai pixelben (dp/pt) vannak megadva. 24x24-es ikonok esetén legalább 10-12 hitSlop ajánlott minden oldalon a 44x44-es érintési cél eléréséhez.

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

pressRetentionOffset — a hitSlop ellentéte: meghatározza azt a területet, ahol a felhasználó túlléphet a komponens határain anélkül, hogy a lenyomás érvénytelenítődne. Alapértelmezett egyenlő a hitSlop-pal. Ha szeretné, hogy a lenyomás megmaradjon a határok elhagyásakor, növelje a pressRetentionOffset értékét.

Pressable vs Touchable: mikor váltsunk

Pressable vs Touchable — a kulcskérdés az érintéskezelő komponens kiválasztásakor. A TouchableOpacity, TouchableHighlight és TouchableWithoutFeedback elavult komponensek, amelyek nem kerülnek eltávolításra, de nem kapnak új funkciókat. A Meta a Pressable-t ajánlja új projektekhez.

A Pressable fő előnyei: egységes API minden effektustípushoz, hozzáférés a pressed állapothoz egyedi stílushoz, hovered/focused állapotok támogatása, hitSlop és pressRetentionOffset, onLongPress visszahívás külön konfiguráció nélkül. A TouchableOpacity csak egyszerű átlátszóságváltoztatásra alkalmas.

Pressable használati példák

Pressable lehetővé teszi összetett interaktív elemek létrehozását minimális kóddal. Alább — egy animált gomb példája, amely lenyomáskor méretet vált és ripple effektussal rendelkezik Androidon. Egy ilyen gomb helyettesíti a TouchableOpacity + Animated kombinációt.

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>
  );
};

Fontos: használja a useNativeDriver: true értéket a Pressable animációihoz. Ez áthelyezi az animációt a natív szálba, megelőzve a kockavesztést gyors lenyomásoknál. A transform és átlátszóság esetén a natív meghajtó minden platformon támogatott.