Pressable — nedir, React Native'de basma işleme

Pressable nedir?

Pressable, her türlü dokunmayı işlemek için birleşik bir arayüz sağlayan bir React Native bileşenidir. Üç farklı Touchable bileşeninden (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) farklı olarak Pressable, hepsini esnek bir durum ve stil sistemiyle değiştirir.

Bileşen React Native 0.63'te (Eylül 2020) tanıtıldı. Meta'ya (2026) göre, React Native'deki yeni projelerin %70'i Touchable bileşenleri yerine Pressable kullanıyor. Pressable, Touchable'ın temel sorununu çözer — parçalanmış bir API ve farklı efektler için bileşenler arasında geçiş yapma ihtiyacı.

Pressable Felsefesi

Basma efektinin sabit olduğu (opaklık değişimi) TouchableOpacity'nin aksine Pressable, geçerli durumu alan bir işlev sağlar. Geliştirici, bir basmaya görsel olarak nasıl yanıt verileceğine karar verir: renk, ölçek, gölge veya efektlerin bir kombinasyonunu değiştirme. Bu, UX üzerinde tam kontrol sağlar.

Pressable durumları: pressed, hovered, focused

Pressable üç etkileşim durumu tanımlar: pressed (ekranda parmak), hovered (Web/TV'de öğenin üzerinde imleç), focused (klavye odağındaki öğe). Her durum ilgili geri çağrıyı tetikler ve stil işlevine ve alt işleme işlevine iletilir.

Önemli: hovered ve focused yalnızca işaretçi desteği olan platformlarda (Web, Android TV, Apple TV) çalışır. Mobil cihazlarda yalnızca pressed kullanılabilir. Platformlar arası uygulamalar için, bu sınırlamayı dikkate alarak görsel tepkiler tasarlayın.

<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 ve geri çağrılar

Pressable API dört ana geri çağrı içerir: onPress (bırakma ile tam basma), onLongPress (uzun basma), onPressIn (dokunma başlangıcı) ve onPressOut (dokunma sonu). onPressIn ve onPressOut kombinasyonu, özel animasyonlar oluşturmayı sağlar.

Ek prop'lar: delayLongPress (uzun basma gecikmesi, varsayılan 500 ms), pressRetentionOffset (basmanın iptal edildiği alan), android_ripple (Android'de ripple efekti). Not: Ripple yalnızca Android 5+'te çalışır.

<Pressable
  onPress={() => console.log('Basıldı')}
  onLongPress={() => console.log('Uzun basma')}
  onPressIn={() => console.log('Parmak aşağı')}
  onPressOut={() => console.log('Parmak yukarı')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress yalnızca parmak bileşen alanı içinde (pressRetentionOffset dikkate alınarak) kaldırıldığında çağrılır. Kullanıcı parmağını sınırların dışına hareket ettirirse onPress tetiklenmez ve yanlış basmalar önlenir. onPressOut bırakıldığında her durumda çağrılır.

hitSlop: dokunma alanını genişletme

hitSlop, dokunma alanını bileşenin görünür sınırlarının ötesine genişleten bir Pressable prop'udur. Bu küçük öğeler için kritiktir: simgeler, onay kutuları, radyo düğmeleri. Apple HIG, minimum dokunma hedefi boyutu olarak 44×44 nokta önerir. hitSlop, görsel boyutu değiştirmeden bu gereksinimi karşılamayı sağlar.

hitSlop bir { top, bottom, left, right } nesnesini veya tüm taraflar için tek bir sayıyı kabul eder. Değerler mantıksal piksel (dp/pt) cinsinden belirtilir. 24×24 simgeler için, 44×44 dokunma hedefine ulaşmak için her tarafta en az 10–12 hitSlop önerilir.

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

pressRetentionOffset — hitSlop'un tersi: kullanıcının basmayı iptal etmeden bileşen sınırlarının dışına çıkabileceği alanı tanımlar. Varsayılan olarak hitSlop'a eşittir. Basmanın sınırların dışına çıkıldığında da devam etmesini istiyorsanız pressRetentionOffset'i artırın.

Pressable vs Touchable: ne zaman geçilmeli

Pressable vs Touchable — dokunma işleme için bir bileşen seçerken önemli bir sorudur. TouchableOpacity, TouchableHighlight ve TouchableWithoutFeedback, kaldırılmayacak ancak yeni özellik almayacak eski bileşenlerdir. Meta yeni projeler için Pressable'ı önerir.

Pressable'ın ana avantajları: tüm efekt türleri için birleşik API, özel stil için pressed durumuna erişim, hovered/focused durum desteği, hitSlop ve pressRetentionOffset, ek yapılandırma gerektirmeyen onLongPress geri çağrısı. TouchableOpacity yalnızca basit opaklık değişiklikleri için uygundur.

Pressable kullanım örnekleri

Pressable, minimum kodla karmaşık etkileşimli öğeler oluşturmayı sağlar. Aşağıda, basıldığında ölçek değişimi ve Android'de ripple efekti olan bir animasyonlu düğme örneği verilmiştir. Böyle bir düğme, TouchableOpacity + Animated kombinasyonunun yerini alır.

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

Önemli: Pressable'da animasyonlar için useNativeDriver: true kullanın. Bu, animasyonu yerel iş parçacığına taşıyarak hızlı basmalarda kare düşüşlerini önler. transform ve opacity için native sürücü tüm platformlarda desteklenir.