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 ड्राइवर सभी प्लेटफ़ॉर्म पर समर्थित है।