Pressable — یہ کیا ہے، React Native میں دباؤ کی پروسیسنگ

Pressable کیا ہے؟

Pressable ایک React Native جزو ہے جو ہر قسم کے ٹچ کو سنبھالنے کے لیے ایک متحد انٹرفیس فراہم کرتا ہے۔ تین مختلف Touchable اجزاء (TouchableHighlight، TouchableOpacity، TouchableWithoutFeedback) کے برعکس، Pressable ان سب کو ایک لچکدار حالت اور اسٹائلنگ سسٹم سے بدل دیتا ہے۔

یہ جزو React Native 0.63 (ستمبر 2020) میں متعارف کرایا گیا تھا۔ Meta (2026) کے مطابق، React Native پر 70% نئے منصوبے Touchable اجزاء کے بجائے Pressable استعمال کرتے ہیں۔ Pressable Touchable کے اہم مسئلے کو حل کرتا ہے — بکھرا ہوا API اور مختلف اثرات کے لیے اجزاء کے درمیان سوئچ کرنے کی ضرورت۔

Pressable کا فلسفہ

TouchableOpacity کے برعکس، جہاں دباؤ کا اثر طے شدہ ہے (اوپاسیٹی تبدیلی)، Pressable ایک فنکشن فراہم کرتا ہے جو موجودہ حالت وصول کرتا ہے۔ ڈویلپر فیصلہ کرتا ہے کہ دباؤ پر بصری طور پر کیسے رد عمل ظاہر کرنا ہے: رنگ، پیمانہ، سایہ یا اثرات کا مرکب تبدیل کرنا۔ یہ UX پر مکمل کنٹرول دیتا ہے۔

Pressable کی حالتیں: pressed، hovered، focused

Pressable تین تعامل حالتیں بیان کرتا ہے: pressed (اسکرین پر انگلی)، hovered (ویب/TV پر عنصر پر کرسر)، focused (کی بورڈ فوکس میں عنصر)۔ ہر حالت متعلقہ کال بیک کو متحرک کرتی ہے اور اسٹائل فنکشن اور چائلڈ رینڈر فنکشن کو بھیجی جاتی ہے۔

اہم: hovered اور focused صرف پوائنٹر سپورٹ والے پلیٹ فارمز (ویب، 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>

Pressable API اور کال بیکس

Pressable API میں چار اہم کال بیکس شامل ہیں: onPress (چھوڑنے کے ساتھ مکمل دباؤ)، onLongPress (لمبا دباؤ)، onPressIn (ٹچ کا آغاز) اور onPressOut (ٹچ کا اختتام)۔ onPressIn اور onPressOut کا امتزاج کسٹم اینیمیشنز بنانے کی اجازت دیتا ہے۔

اضافی پراپس: delayLongPress (لمبے دباؤ میں تاخیر، طے شدہ 500 ms)، pressRetentionOffset (وہ علاقہ جس کے باہر دباؤ منسوخ ہو جاتا ہے)، android_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 پراپ ہے جو ٹچ ایریا کو جزو کی ظاہری حدود سے باہر بڑھاتا ہے۔ یہ چھوٹے عناصر کے لیے ضروری ہے: آئیکنز، چیک باکسز، ریڈیو بٹن۔ Apple HIG کم از کم ٹچ ٹارگٹ سائز 44×44 پوائنٹس تجویز کرتا ہے۔ hitSlop بصری سائز تبدیل کیے بغیر اس ضرورت کو پورا کرنے کی اجازت دیتا ہے۔

hitSlop ایک آبجیکٹ { top, bottom, left, right } یا تمام اطراف کے لیے ایک عدد قبول کرتا ہے۔ اقدار منطقی پکسلز (dp/pt) میں متعین کی جاتی ہیں۔ 24×24 آئیکنز کے لیے، 44×44 ٹچ ٹارگٹ حاصل کرنے کے لیے ہر طرف کم از کم 10–12 hitSlop تجویز کیا جاتا ہے۔

<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 بمقابلہ Touchable: کب منتقل ہوں

Pressable بمقابلہ Touchable — ٹچ ہینڈلنگ کے لیے جزو منتخب کرتے وقت ایک اہم سوال۔ TouchableOpacity، TouchableHighlight اور TouchableWithoutFeedback پرانے اجزاء ہیں جو حذف نہیں ہوں گے لیکن نئی خصوصیات حاصل نہیں کریں گے۔ Meta نئے منصوبوں کے لیے Pressable تجویز کرتا ہے۔

Pressable کے اہم فوائد: تمام اثرات کی اقسام کے لیے متحد API، کسٹم اسٹائلنگ کے لیے pressed حالت تک رسائی، hovered/focused حالت کی حمایت، hitSlop اور pressRetentionOffset، اضافی ترتیب کے بغیر onLongPress کال بیک۔ TouchableOpacity صرف سادہ اوپاسیٹی تبدیلیوں کے لیے موزوں ہے۔

Pressable استعمال کی مثالیں

Pressable کم سے کوڈ کے ساتھ پیچیدہ انٹرایکٹو عناصر بنانے کی اجازت دیتا ہے۔ نیچے دباؤ پر پیمانہ تبدیلی اور 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>
  );
};

اہم: Pressable میں اینیمیشنز کے لیے useNativeDriver: true استعمال کریں۔ یہ اینیمیشن کو مقامی تھریڈ پر منتقل کرتا ہے، تیز دباؤ پر فریم ڈراپ کو روکتا ہے۔ transform اور opacity کے لیے native ڈرائیور تمام پلیٹ فارمز پر تعاون یافتہ ہے۔