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 ড্রাইভার সব প্ল্যাটফর্মে সমর্থিত।