📱 React Native Touchable Components (TypeScript সহ)

React Native-এ Touchable Components ব্যবহার করে ইউজারের টাচ বা প্রেস ইভেন্ট হ্যান্ডেল করা হয়। এই কম্পোনেন্টগুলো দিয়ে আমরা বাটন, ক্লিকেবল আইটেম, কার্ড, লিস্ট ইত্যাদি তৈরি করি।

🔹 Touchable Components কী?

Touchable Components এমন UI এলিমেন্ট যা ইউজার tap, press, long press করলে কোনো অ্যাকশন ট্রিগার করে। React Native-এ সবচেয়ে বেশি ব্যবহৃত Touchable Components হলো:

• Button
• TouchableOpacity
• Pressable (Modern & Recommended)

🔹 Button Component

Button হলো React Native-এর built-in সহজ বাটন। এটি কম কাস্টমাইজযোগ্য হলেও beginners-দের জন্য ভালো।

📄 Example (TypeScript)

import { Button, View, Alert } from 'react-native';

const App = () => {
  return (
    <View>
      <Button
        title="Click Me"
        onPress={() => Alert.alert('Button Pressed')}
        color="teal"
      />
    </View>
  );
};

export default App;
  

🔹 TouchableOpacity

TouchableOpacity প্রেস করলে UI-এর opacity কমে যায়, ফলে ইউজার বুঝতে পারে বাটনটি প্রেস হয়েছে।

📄 Example (TypeScript)

import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <TouchableOpacity style={styles.button} onPress={() => console.log('Pressed')}>
      <Text style={styles.text}>TouchableOpacity</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'teal',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center'
  },
  text: {
    color: '#fff',
    fontSize: 16
  }
});

export default App;
  

🔹 Pressable (Most Powerful)

Pressable হলো সবচেয়ে আধুনিক ও powerful Touchable Component। এটি দিয়ে press, long press, pressed state অনুযায়ী dynamic style দেওয়া যায়।

📄 Example (TypeScript)

import { Pressable, Text } from 'react-native';

const App = () => {
  return (
    <Pressable
      onPress={() => console.log('Pressed')}
      style={({ pressed }) => [
        {
          backgroundColor: pressed ? '#0d9488' : 'teal',
          padding: 15,
          borderRadius: 8
        }
      ]}
    >
      <Text style={{ color: 'white', textAlign: 'center' }}>
        Pressable Button
      </Text>
    </Pressable>
  );
};

export default App;
  

🔹 Comparison Table

✨ Summary

• Button → সহজ কিন্তু কম কাস্টমাইজেবল
• TouchableOpacity → opacity effect সহ custom UI
• Pressable → modern, flexible ও recommended
• Production app-এ Pressable ব্যবহার করা বেস্ট
• TypeScript ব্যবহার করলে code আরও safe হয়