Using Modal & BottomSheet in React Native

Modal এবং BottomSheet হলো React Native-এ UI interaction এর জন্য বহুল ব্যবহৃত দুইটি কম্পোনেন্ট। এগুলো ব্যবহার করে আপনি পপআপ, ফর্ম, অপশন লিস্ট, সতর্ক বার্তা ইত্যাদি সুন্দরভাবে দেখাতে পারেন।

🔶 Modal কী?

Modal হল একটি পপআপ ভিউ যা মূল স্ক্রিনের উপর overlay আকারে দেখানো হয়। সাধারণত Alert, Form, Confirmation popup, Loader ইত্যাদি দেখানোর জন্য Modal ব্যবহৃত হয়।

📌 Basic Modal Example


import React, { useState } from "react";
import { View, Text, Modal, Button, StyleSheet } from "react-native";

export default function App() {
  const [open, setOpen] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Open Modal" onPress={() => setOpen(true)} />

      <Modal visible={open} transparent={true} animationType="slide">
        <View style={styles.modalBackground}>
          <View style={styles.modalBox}>
            <Text style={{ fontSize: 18, marginBottom: 10 }}>This is a Modal Popup</Text>
            <Button title="Close" onPress={() => setOpen(false)} />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, justifyContent: "center", alignItems: "center"
  },
  modalBackground: {
    flex: 1, backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center", alignItems: "center"
  },
  modalBox: {
    width: 300, backgroundColor: "#fff", padding: 20, borderRadius: 10
  }
});

এই Modal স্ক্রিনে overlay তৈরি করে এবং ব্যাকগ্রাউন্ড ডিম করে।

🔹 Useful Modal Props

visible: Modal show/hide নিয়ন্ত্রণ করে।
animationType: fade / slide / none
transparent: Modal background transparent করবে।
onRequestClose: Android back button press handle করে।

🔶 BottomSheet কী?

BottomSheet হলো একটি sliding panel যা স্ক্রিনের নিচ থেকে ওপরে উঠে আসে। Options menu, Filters, Action menus, Form, Upload menu ইত্যাদি দেখানোর জন্য খুবই জনপ্রিয়।

📌 BottomSheet Example (react-native-raw-bottom-sheet)


import React, { useRef } from "react";
import { View, Button, Text, StyleSheet } from "react-native";
import RBSheet from "react-native-raw-bottom-sheet";

export default function App() {
  const refRBSheet = useRef();

  return (
    <View style={styles.container}>
      <Button title="Open BottomSheet" onPress={() => refRBSheet.current.open()} />

      <RBSheet
        ref={refRBSheet}
        height={250}
        openDuration={300}
        customStyles={{
          container: {
            padding: 20,
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20
          }
        }}
      >
        <Text style={{ fontSize: 18, marginBottom: 10 }}>Upload Options</Text>
        <Text>📁 Choose from Files</Text>
        <Text>📸 Open Camera</Text>
      </RBSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1, justifyContent: "center", alignItems: "center"
  }
});

✔ Where to Use BottomSheet?

ফিল্টার অপশন
ফটো/ফাইল আপলোড নির্বাচন
Settings menu
Quick actions menu
Form বা ছোট input

🔶 Modal vs BottomSheet

Feature	Modal	BottomSheet
Position	Center Overlay	Bottom Slide-Up
Best Use	Alert, Form	Options, Filters
User Experience	Stops Interaction	Feels Non-Intrusive

📌 Summary

Modal এবং BottomSheet React Native UI-কে আরও Interactive, Clean এবং User-friendly করে তোলে। Popup messages, options, form, filters—সবকিছুতেই এগুলো ব্যবহার করা হয়। আপনার অ্যাপের UX উন্নত করতে এই দুইটি কম্পোনেন্ট অত্যন্ত গুরুত্বপূর্ণ।

Using Modal & BottomSheet