Pressable — bu nima, React Native-da bosishlarni qayta ishlash

Pressable nima?

Pressable — barcha turdagi teginishlarni qayta ishlash uchun yagona interfeysni taqdim etuvchi React Native komponenti. Uch xil Touchable komponentidan (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) farqli o‘laroq, Pressable ularning barchasini moslashuvchan holat va stilizatsiya tizimi bilan bitta komponentda almashtiradi.

Komponent React Native 0.63 da (sentyabr 2020) taqdim etilgan. Meta ma’lumotlariga ko‘ra (2026), React Native-dagi yangi loyihalarning 70% i Touchable komponentlari o‘rniga Pressable dan foydalanadi. Pressable Touchable ning asosiy muammosini — tarqoq API va turli effektlar uchun komponentlar o‘rtasida almashish zaruriyatini hal qiladi.

Pressable falsafasi

TouchableOpacity dan farqli o‘laroq, bu erda bosish effekti qat’iy belgilangan (shaffoflikni o‘zgartirish), Pressable joriy holatni qabul qiluvchi funksiyani taqdim etadi. Dasturchi teginishga vizual reaksiyani o‘zi belgilaydi: rangni, masshtabni, soyani yoki effektlar kombinatsiyasini o‘zgartirish. Bu UX ustidan to‘liq nazorat beradi.

Pressable holatlari: pressed, hovered, focused

Pressable uchta o‘zaro ta’sir holatini belgilaydi: pressed (barmoq ekranda), hovered (kursor element ustida Web/TV da), focused (element klaviatura fokusida). Har bir holat tegishli chaqiruvni faollashtiradi va stillar funksiyasiga va bola render funksiyasiga uzatiladi.

Muhim: hovered va focused faqat ko‘rsatgichni qo‘llab-quvvatlovchi platformalarda ishlaydi (Web, Android TV, Apple TV). Mobil qurilmalarda faqat pressed mavjud. Platformalararo ilovalar uchun vizual reaksiyalarni ushbu cheklovni hisobga olgan holda loyihalashtiring.

<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 va chaqiruvlari

Pressable API to‘rtta asosiy chaqiruvni o‘z ichiga oladi: onPress (qo‘yib yuborish bilan to‘liq bosish), onLongPress (uzun bosish), onPressIn (teginish boshlanishi) va onPressOut (teginish tugashi). onPressIn va onPressOut kombinatsiyasi maxsus animatsiyalar yaratishga imkon beradi.

Qo‘shimcha propslar: delayLongPress (uzun bosish kechikishi, standart 500 ms), pressRetentionOffset (bosish bekor qilinadigan maydon), android_ripple (Android da ripple effekti). Muhim: Ripple faqat Android 5+ da ishlaydi.

<Pressable
  onPress={() => console.log('Bosildi')}
  onLongPress={() => console.log('Uzun bosish')}
  onPressIn={() => console.log('Barmoq pastga')}
  onPressOut={() => console.log('Barmoq yuqoriga')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress faqat barmoq komponent ichida (pressRetentionOffset ni hisobga olgan holda) ko‘tarilganda chaqiriladi. Agar foydalanuvchi barmog‘ini chegaradan tashqariga olib chiqsa, onPress ishlamaydi, bu noto‘g‘ri bosishlarning oldini oladi. onPressOut har qanday holatda qo‘yib yuborilganda chaqiriladi.

hitSlop: teginish maydonini kengaytirish

hitSlop — teginish maydonini komponentning ko‘rinadigan chegaralaridan tashqariga kengaytiruvchi Pressable propsidir. Bu kichik elementlar uchun juda muhim: ikonkalar, chekbokslar, radio tugmalar. Apple HIG minimal teginish nishoni o‘lchami sifatida 44x44 nuqtani tavsiya qiladi. hitSlop vizual o‘lchamni o‘zgartirmasdan ushbu talabni bajarishga imkon beradi.

hitSlop { top, bottom, left, right } obyektini yoki barcha tomonlar uchun yagona sonni qabul qiladi. Qiymatlar mantiqiy piksel (dp/pt) larda beriladi. 24x24 ikonkalar uchun 44x44 teginish nishoniga erishish uchun har tomondan kamida 10-12 hitSlop tavsiya etiladi.

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

pressRetentionOffset — hitSlop ning teskarisi: foydalanuvchi bosishni bekor qilmasdan komponent chegaralaridan tashqariga chiqishi mumkin bo‘lgan maydonni belgilaydi. Standart hitSlop ga teng. Agar bosish chegaradan tashqarida saqlanishi kerak bo‘lsa, pressRetentionOffset ni oshiring.

Pressable vs Touchable: qachon o‘tish kerak

Pressable vs Touchable — teginishlarni qayta ishlash uchun komponent tanlashda asosiy savol. TouchableOpacity, TouchableHighlight va TouchableWithoutFeedback eskirgan komponentlar bo‘lib, ular o‘chirilmaydi, ammo yangi imkoniyatlar olmaydi. Meta yangi loyihalar uchun Pressable ni tavsiya qiladi.

Pressable ning asosiy afzalliklari: barcha turdagi effektlar uchun yagona API, maxsus stilizatsiya uchun pressed holatiga kirish, hovered/focused holatlarini qo‘llab-quvvatlash, hitSlop va pressRetentionOffset, qo‘shimcha sozlamalarsiz onLongPress chaqiruvi. TouchableOpacity faqat oddiy shaffoflikni o‘zgartirish uchun mos keladi.

Pressable dan foydalanish misollari

Pressable minimal kod bilan murakkab interaktiv elementlar yaratishga imkon beradi. Quyida — bosilganda masshtabni o‘zgartiruvchi va Android da ripple effektiga ega animatsiyali tugma namunasi. Bunday tugma TouchableOpacity + Animated kombinatsiyasini almashtiradi.

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

Muhim: Pressable da animatsiyalar uchun useNativeDriver: true dan foydalaning. Bu animatsiyani native oqimga o‘tkazadi va tez bosishlarda kadr yo‘qotishlarining oldini oladi. Transform va shaffoflik uchun native drayver barcha platformalarda qo‘llab-quvvatlanadi.