📱 React Native (TypeScript) এ Modal & BottomSheet ব্যবহার

Mobile App-এ Modal ও BottomSheet ব্যবহার করা হয় গুরুত্বপূর্ণ তথ্য দেখানো, ফর্ম, অপশন বা কনফার্মেশন UI তৈরি করার জন্য। এই টিউটোরিয়ালে আমরা File-based React Native + TypeScript ব্যবহার করে Modal ও BottomSheet শিখব।

🔹 Modal কী?

Modal হলো একটি popup UI যা পুরো স্ক্রিন বা স্ক্রিনের উপর দেখানো হয়। এটি সাধারণত ব্যবহার করা হয়:

• Login / Signup ফর্ম
• Confirmation Message
• Alert বা Important Info

📂 File Structure (Example)

app/
 ├── modal/
 │   └── index.tsx
 └── index.tsx
  

🧑‍💻 Modal Example (TypeScript)

import { View, Text, Modal, Button } from 'react-native';
import { useState } from 'react';

export default function ModalScreen() {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Open Modal" onPress={() => setVisible(true)} />

      <Modal visible={visible} animationType="slide" transparent>
        <View style={{ 
          flex: 1, 
          backgroundColor: 'rgba(0,0,0,0.5)', 
          justifyContent: 'center',
          alignItems: 'center'
        }}>
          <View style={{ backgroundColor: '#fff', padding: 20, borderRadius: 10 }}>
            <Text>This is a Modal</Text>
            <Button title="Close" onPress={() => setVisible(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}
  

✅ Output: “Open Modal” বাটনে ক্লিক করলে স্ক্রিনের উপর একটি popup খুলবে এবং “Close” বাটনে ক্লিক করলে বন্ধ হবে।

🔹 BottomSheet কী?

BottomSheet হলো স্ক্রিনের নিচ থেকে উঠে আসা একটি UI component। এটি সাধারণত ব্যবহার করা হয়:

• Action Menu
• Filter / Sort Options
• Share / Settings Panel

React Native-এ BottomSheet বানাতে সবচেয়ে জনপ্রিয় লাইব্রেরি হলো: @gorhom/bottom-sheet

📦 Installation

npm install @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler
  

🧑‍💻 BottomSheet Example (TypeScript)

import { View, Text, Button } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { useRef } from 'react';

export default function BottomSheetScreen() {
  const bottomSheetRef = useRef<BottomSheet>(null);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button 
        title="Open BottomSheet" 
        onPress={() => bottomSheetRef.current?.expand()} 
      />

      <BottomSheet
        ref={bottomSheetRef}
        snapPoints={['25%', '50%']}
        index={-1}
      >
        <View style={{ padding: 20 }}>
          <Text>This is BottomSheet Content</Text>
        </View>
      </BottomSheet>
    </View>
  );
}
  

✅ Output: “Open BottomSheet” বাটনে ক্লিক করলে স্ক্রিনের নিচ থেকে একটি BottomSheet উঠে আসবে।

⚖️ Modal vs BottomSheet

✅ Summary

• Modal simple popup UI তৈরি করতে ব্যবহৃত হয়
• BottomSheet modern mobile UX এর জন্য জনপ্রিয়
• TypeScript ব্যবহার করলে code হয় safer ও scalable
• File-based structure প্রজেক্ট maintain করা সহজ করে

🎯 এই দুইটি component ভালোভাবে শিখলে আপনি professional-level React Native UI তৈরি করতে পারবেন।