ما هي الـ Modal في React Native وكيف يتم التعامل مع النوافذ المنبثقة بشكل سليم؟

الإجابة المختصرة

مكون Modal يعرض محتوى في نافذة تطفو فوق شاشة التطبيق الحالية، ويعتمد على وحدات النظام الأصلية مع دعم حركات الظهور والتلاشي وإغلاق مفتاح الرجوع في أندرويد.

الشرح

يوفر Modal خصائص مثل animationType ("slide" أو "fade")، و transparent لجعل الخلفية شبه شفافة، وخاصية onRequestClose الإلزامية للتعامل مع نقر المستخدم على زر الرجوع الفعلي في هواتف أندرويد. في أجهزة iOS الحديثة، يتم استخدام Presentation Controllers لتطبيق نمط البطاقات المنسدلة (Page Sheets).

مثال بالكود

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

function ConfirmModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose} // ضروري لأجهزة أندرويد
    >
      <View style={styles.backdrop}>
        <View style={styles.modalCard}>
          <Text>هل أنت متأكد؟</Text>
          <Pressable onPress={onClose}><Text>إلغاء</Text></Pressable>
        </View>
      </View>
    </Modal>
  );
}

أخطاء شائعة

• نسيان توفير خاصية onRequestClose مما يجعل زر الرجوع في أندرويد غير مستجيب تماماً أثناء فتح الـ Modal.

أسئلة متابعة

• ما هو مكون SafeAreaView وكيف تطور في React Native وتكامله مع react-native-safe-area-context؟

المصادر

• React Native docs — Modal