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, где эффект нажатия жёстко задан (изменение opacity), Pressable предоставляет функцию, получающую текущее состояние. Разработчик сам решает, как визуально реагировать на нажатие: изменить цвет, масштаб, тень или комбинацию эффектов. Это даёт полный контроль над UX.

Состояния Pressable: pressed, hovered, focused

Pressable определяет три состояния взаимодействия: pressed (палец на экране), hovered (курсор над элементом на Web/TV), focused (элемент в фокусе клавиатуры). Каждое состояние активирует соответствующий колбэк и передаётся в функцию стилей и дочернюю render-функцию.

Важно: 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

Pressable API включает четыре основных колбэка: onPress (полное нажатие с отпусканием), onLongPress (долгое нажатие), onPressIn (начало касания) и onPressOut (окончание касания). Комбинация onPressIn и onPressOut позволяет создавать кастомные анимации.

Дополнительные пропсы: delayLongPress (задержка длинного нажатия, по умолчанию 500 ms), pressRetentionOffset (область, за пределами которой нажатие отменяется), android_ripple (эффект ripple на Android). Важно: Ripple работает только на Android 5+.

<Pressable
  onPress={() => console.log('Pressed')}
  onLongPress={() => console.log('Long press')}
  onPressIn={() => console.log('Finger down')}
  onPressOut={() => console.log('Finger up')}
  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, расширяющий область касания за пределы видимых границ компонента. Это критично для маленьких элементов: иконок, чекбоксов, радио-кнопок. Apple HIG рекомендует минимальный размер touch target 44x44 точки. hitSlop позволяет соблюсти это требование без изменения визуального размера.

hitSlop принимает объект { top, bottom, left, right } или единое число для всех сторон. Значения задаются в логических пикселях (dp/pt). Для иконок 24x24 рекомендуется hitSlop минимум 10-12 с каждой стороны, чтобы достичь 44x44 touch target.

<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 и opacity нативный драйвер поддерживается на всех платформах.