Touchable Components in React Native (Button, Pressable, TouchableOpacity)

React Native-এ যেকোনো clickable অথবা touch-based element তৈরি করতে Touchable Components ব্যবহার করা হয়। যেহেতু Mobile App-এ সব interaction “Touch”-এর মাধ্যমে হয়, তাই React Native এই touch event handle করার জন্য বিভিন্ন component প্রদান করেছে।

React Native এর জনপ্রিয় Touchable Component গুলো হলো —

Button
TouchableOpacity
Pressable

এখন প্রতিটি Component বিস্তারিতভাবে শিখে নেওয়া যাক।

📌 1. Button Component

Button হলো React Native এর সবচেয়ে simple touch component। এটির styling কাস্টমাইজ করা যায় না (except color)। সহজ কাজের জন্য এটি ব্যবহার করা হয়।

🔹 Button Example

import { Button, View } from "react-native";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Button 
        title="Click Me"
        color="teal"
        onPress={() => alert("Button Pressed!")}
      />
    </View>
  );
}

Button সাধারণত basic UI-তে ব্যবহার করা হয়।

📌 2. TouchableOpacity

TouchableOpacity হলো React Native এর সবচেয়ে জনপ্রিয় touchable element। এটি চাপ দেওয়ার সময় light fade বা opacity effect তৈরি করে।

এর মাধ্যমে আপনি fully customizable buttons তৈরি করতে পারেন।

🔹 TouchableOpacity Example

import { TouchableOpacity, Text, View } from "react-native";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <TouchableOpacity 
        style={{
          backgroundColor: "teal",
          padding: 15,
          borderRadius: 8,
          alignItems: "center"
        }}
        onPress={() => alert("TouchableOpacity Pressed!")}
      >
        <Text style={{ color: "#fff", fontSize: 18 }}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
}

এটি Custom Button তৈরি করার জন্য সবচেয়ে বেশি ব্যবহৃত component।

📌 3. Pressable Component

Pressable হলো React Native-এর সবচেয়ে powerful touchable component। কারণ এটি touch-এর বিভিন্ন state detect করতে পারে—

onPress
onLongPress
onPressIn
onPressOut

এছাড়াও dynamic style apply করা যায় (press করলে button ছোট করা, রং পরিবর্তন করা ইত্যাদি)।

🔹 Pressable Example

import { Pressable, Text, View } from "react-native";

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <Pressable
        onPress={() => alert("Pressed!")}
        style={({ pressed }) => ({
          backgroundColor: pressed ? "#006666" : "teal",
          padding: 15,
          borderRadius: 8,
          alignItems: "center"
        })}
      >
        <Text style={{ color: "white", fontSize: 18 }}>Pressable Button</Text>
      </Pressable>
    </View>
  );
}

Pressable এমন জিনিসগুলোর জন্য best যেখানে interaction বেশি কমপ্লেক্স।

📌 4. Comparison Table

Component	Features	Best Use Case
Button	Simple, Minimal styling	Basic buttons
TouchableOpacity	Opacity effect, Full styling	Custom Buttons, Cards
Pressable	Multiple Press States, Advanced UI	Interactive components

✅ Conclusion

React Native-এ touchable components খুবই গুরুত্বপূর্ণ। আপনার UI কেমন হবে এবং কতটা interactive হবে, তার উপর ভিত্তি করে Button, TouchableOpacity বা Pressable ব্যবহার করবেন।

👉 Next Topic Suggestion: React Native Navigation (Stack + Tab)

Touchable Components (Button, Pressable, TouchableOpacity)