Pressable — шта је то, обрада притискау React Native

Шта је Pressable?

Pressable — React Native компонента која пружа јединствени интерфејс за обраду свих врста додира. За разлику од три различите Touchable компоненте (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback), Pressable их замењује једном са флексибилним системом стања и стилизације.

Компонента је представљена у React Native 0.63 (септембар 2020). Према подацима Meta (2026), 70% нових пројеката на React Native користи Pressable уместо Touchable компонената. Pressable решава кључни проблем Touchable — разбацани API и потребу за пребацивањем између компонената за различите ефекте.

Филозофија Pressable

За разлику од TouchableOpacity, где је ефекат притиска чврсто дефинисан (промена опакова), Pressable пружа функцију која прима тренутно стање. Програмер сам одлучује како визуелно реаговати на додир: променити боју, размер, сенку или комбинацију ефеката. То пружа пуну контролу над UX-ом.

Стања Pressable: pressed, hovered, focused

Pressable дефинише три стања интеракције: pressed (прст на екрану), hovered (курсор изнад елемента на Web/TV), focused (елемент у фокусу тастатуре). Свако стање активира одговарајући повратни позив и прослевђује се функцији стилова и функцији рендеровања деце.

Важно: hovered и focused раде само на платформама са подршком показивача (Web, Android TV, Apple TV). На мобилним уређајима доступно је само pressed. За вишеплатформске апликације, дизајнирајте визуелне реакције имајући у виду ово ограничење.

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

API и повратни позиви Pressable

API Pressable укључује четири главна повратна позива: onPress (пуно притискање са отпуштањем), onLongPress (дуго притискање), onPressIn (почетак додира) и onPressOut (крај додира). Комбинација onPressIn и onPressOut омогућава стварање прилагођених анимација.

Додатни props: delayLongPress (кашњење дугог притиска, подразумевано 500 ms), pressRetentionOffset (област изван које се притисак поништава), android_ripple (ripple ефекат на Android-у). Важно: Ripple ради само на Android 5+.

<Pressable
  onPress={() => console.log('Притиснуто')}
  onLongPress={() => console.log('Дуго притискање')}
  onPressIn={() => console.log('Прст доле')}
  onPressOut={() => console.log('Прст горе')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress се позива само ако се прст подигне унутар области компоненте (узимајући у обзир pressRetentionOffset). Ако корисник помакне прст изван граница, onPress се не окида, што спречава лажне притиске. onPressOut се позива у сваком случају при отпуштању.

hitSlop: проширење области додира

hitSlop — Pressable prop који проширује област додира изван видљивих граница компоненте. Критично је за мале елементе: иконице, чекбоксове, радио дугмиће. Apple HIG препоручује минималну величину touch target од 44x44 тачака. hitSlop омогућава испуњење овог захтева без промене визуелне величине.

hitSlop прихвата објекат { top, bottom, left, right } или један број за све стране. Вредности се наводе у логичким пикселима (dp/pt). За иконице 24x24, препоручује се hitSlop од најмање 10-12 сваке стране да би се постигао touch target од 44x44.

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

pressRetentionOffset — обрнути hitSlop: одређује област у којој корисник може изћи изван граница компоненте а да се притисак не поништи. Подразумевано једнак као hitSlop. Ако желите да се притисак задржи при изласку изван граница, повећајте pressRetentionOffset.

Pressable vs Touchable: када прећи

Pressable vs Touchable — кључно питање при избору компоненте за обраду додира. TouchableOpacity, TouchableHighlight и TouchableWithoutFeedback су застареле компоненте које неће бити уклоњене, али не добијају нове могућности. Meta препоручује Pressable за нове пројекте.

Главне предности Pressable: јединствени API за све врсте ефеката, приступ стању pressed за прилагођену стилизацију, подршка стања hovered/focused, hitSlop и pressRetentionOffset, повратни позив onLongPress без додатног подешавања. TouchableOpacity је погодан само за једноставну промену прозирности.

Примери коришћења Pressable

Pressable омогућава стварање сложених интерактивних елемената са минимумом кода. Испод је пример анимираног дугмета са променом размера при притиску и ripple ефектом на Android-у. Такво дугме замењује комбинацију 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>
  );
};

Важно: користите useNativeDriver: true за анимације у Pressable. То пребацује анимацију у нативни ток, спречавајући падове кадрова при брзим притисцима. За transform и опаков, нативни погон је подржан на свим платформама.