React Native-এ মডাল (Modal) উইন্ডো কাজ করার পদ্ধতি

Modal কম্পোনেন্ট আপনার UI-র উপরে একটি কন্টেন্ট ভিউ প্রদর্শন করে। এটি ডায়ালগ, পপ-আপ, বটম শিট ইত্যাদি তৈরির জন্য ব্যবহৃত হয়।

বেসিক সিনট্যাক্স

<Modal
  animationType="slide"
  transparent={true}
  visible={modalVisible}
  onRequestClose={() => Alert.alert('Modal has been closed.')}
>
  Your Content Here
</Modal>

ইম্পোর্ট

import { Modal } from 'react-native';

মূল প্রপস

উদাহরণ: স্লাইড অ্যানিমেশন সহ মডাল

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

const App = () => {
  const [isVisible, setModalVisibility] = useState(false);

  return (
    
      
        
          
            Modal Window Testing!
             setModalVisibility(false)}
            />
          
        
      

       setModalVisibility(true)} />
    
  );
};

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22
  },
  myModal: {
    width: 200,
    height: 200,
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.30,
    shadowRadius: 4,
    elevation: 5
  },
  modalText: { marginBottom: 20, textAlign: 'center' },
  modalButton: { marginBottom: 50 }
});

export default App;

কীভাবে কাজ করে

• isVisible স্টেট false থাকলে মডাল লুকায় থাকে।
• "Click Me" বাটন চাপলে setModalVisibility(true) → মডাল দেখায়।
• মডালের ভিতরের "Close" বাটন চাপলে setModalVisibility(false) → মডাল লুকায়।

প্রো টিপস

• transparent={true} দিয়ে ওভারলে ইফেক্ট দিন।
• কम्प্লেক্স ফর্ম বা কনফার্মেশন ডায়ালগের জন্য Modal ব্যবহার করুন।
• অ্যাক্সেসিবিলিটির জন্য accessibilityViewIsModal প্রপ যোগ করুন।