SafeAreaView — ما هو، التصميم مع Safe Area في React Native

ما هو SafeAreaView؟

SafeAreaView هو مكون React Native يضيف حشوة داخلية تلقائياً حتى لا يتداخل المحتوى مع عناصر واجهة النظام: شريط الحالة، Notch، Dynamic Island وشريط التنقل النظامي. ظهر المكون في React Native 0.50 لـ iOS وتم توسيعه لاحقاً لـ Android.

على iOS، يستخدم SafeAreaView UIView.safeAreaInsets الأصلي، المقدم في iOS 11 (2017). على Android، يراعي المكون WindowInsets — الهوامش النظامية المتاحة منذ Android 5.0 (API 21). وفقاً لـ Apple (2026)، 92% من iPhones النشطة لديها شاشة مع قطع أو Dynamic Island.

لماذا تحتاج Safe Area

مفهوم Safe Area هو جزء من توصيات Apple HIG (Human Interface Guidelines). قبل iPhone X (2017)، كان كافة مساحة الشاشة آمنة. مع ظهور Notch، حددت Apple المناطق حيث لا يجب وضع المحتوى: قطع الكاميرا، مؤشر الوقت والبطارية، مؤشر الصفحة الرئيسية. طبق Android مفهوماً مماثلاً مع ظهور شاشات بقطع في 2018.

كيف تعمل Safe Area على iOS و Android

على iOS، SafeAreaView يقرأ safeAreaInsets من دليل التصميم الأصلي. يشمل الهامش العلوي ارتفاع شريط الحالة (عادة 44 أو 50 نقطة لأجهزة iPhone مع Notch). الهامش السفلي هو 34 نقطة لمؤشر الصفحة الرئيسية. يستخدم Android WindowInsets — هامش علوي لشريط الحالة وهامش سفلي لتنقل النظام.

مهم: يطبق SafeAreaView الحشوة تلقائياً، ولكن فقط للحاوية الجذرية. المكونات المتداخلة لا تتلقى حماية — كل شاشة يجب أن تكون مع SafeAreaView الخاص بها. بالنسبة لنوافذ المودال و BottomSheet، راعي الهوامش بشكل منفصل.

Notch و Dynamic Island وألواح النظام

Notch هو قطع جهازي في الجزء العلوي من الشاشة يحتوي على الكاميرا والمستشعرات. ظهر في iPhone X (2017). Dynamic Island هو منطقة برمجية-جهازية في iPhone 14 Pro وأحدث، تحل محل Notch كعنصر تفاعلي. كلاهما يتطلبان هامشًا علوياً من 50-56 pt.

على Android، القطوع تأتي بأشكال مختلفة: شكل الدمعة، punch-hole، شريط تحت الكاميرا. SafeAreaView على Android يستخدم WindowInsets، والتي تراعي شكل القطع. للتطبيقات في الوضع الأفقي، تتم إضافة هوامش جانبية لمنع تداخل المحتوى مع عناصر النظام.

import React from 'react';
import { SafeAreaView, View, Text } from 'react-native';

const App = () => (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={styles.content}>
      <Text>Content is safe from Notch and system bars</Text>
    </View>
  </SafeAreaView>
);

يوصي نهج Edge-to-edge (Android 15+) برسم المحتوى تحت ألواح النظام، ولكن مع مراعاة الهوامش للعناصر التفاعلية. يساعد SafeAreaView في الحفاظ على هذا التوازن: يتم رسم الخلفية تحت الألواح، بينما تبقى الأزرار والنصوص في المنطقة الآمنة.

الاستخدام وبدائل SafeAreaView

SafeAreaView هو أبسط طريقة لحماية المحتوى، ولكنها ليست مرنة دائماً. يطبق المكون نفس الحشوة على جميع الجوانب، وهذا غير مريح عندما تكون حشوة مختلفة مطلوبة لحواف مختلفة. على سبيل المثال، قد تكون الحشوة الجانبية غير ضرورية، بينما قد تكون الحشوة السفلية مطلوبة فقط لزر.

البدائل الرئيسية: useSafeAreaInsets من react-native-safe-area-context (أكثر حل مرن)، StatusBar.currentHeight على Android، Platform.OS مع التحقق اليدوي من نموذج الجهاز. للحالات المعقدة، استخدم مزيجاً من SafeAreaView للحاوية العامة و useSafeAreaInsets للعناصر الفردية.

import { useSafeAreaInsets } from 'react-native-safe-area-context';

const CustomHeader = () => {
  const insets = useSafeAreaInsets();

  return (
    <View style={{ paddingTop: insets.top }}>
      <Header />
    </View>
  );
};

مكتبة react-native-safe-area-context هي المعيار الفعلي للعمل مع Safe Area في React Native. هي مدعومة من قبل Expo، React Navigation ومعظم أدوات UI. توفر كلاً من hook ومكون Consumer للأساليب الوظيفية والقائمة على الفصول.

react-native-safe-area-context للتحكم الكامل

react-native-safe-area-context هي مكتبة توفر API أكثر مرونة من SafeAreaView المضمن. الميزة الرئيسية هي الوصول إلى قيم الهوامش الفردية (top، bottom، left، right) من خلال hook useSafeAreaInsets، مما يسمح بالتطبيق الانتقائي للهوامش.

توفر المكتبة أيضاً SafeAreaProvider — مكون مطلوب في المستوى العلوي للتطبيق. يشترك في تغييرات الهوامش النظامية عند تدوير الشاشة أو فتح لوحة المفاتيح. يستخدم React Navigation هذه المكتبة افتراضياً.

SafeAreaView من react-native-safe-area-context يختلف عن المضمن: يعمل على عدد أكبر من الأجهزة ويدعم رسم متحرك لتغير الهوامش. للمشاريع الجديدة، يوصى بتثبيت هذه المكتبة كاعتماد واستخدام SafeAreaView الخاص بها بدلاً من المضمن.

الأخطاء الشائعة عند العمل مع SafeAreaView

SafeAreaView غالباً ما يستخدم بشكل غير صحيح. الخطأ الأول هو تطويق كل مكون في SafeAreaView، مما يخلق حشوة مزدوجة. القاعدة: SafeAreaView واحد لكل View جذري للشاشة. المكونات المتداخلة ترث الهوامش من خلال تصميم Flex.

الخطأ الثاني هو تجاهل Android. على Android، يستخدم SafeAreaView WindowInsets، والتي قد تختلف بين إصدارات نظام التشغيل. على Android 15+، قد تكون ألواح النظام شفافة وتتغير الهوامش. اختبر SafeAreaView دائماً على أجهزة حقيقية، ليس فقط في المحاكي.

الخطأ الثالث هو الحشو المكتوب بشكل ثابت. لا تستخدم أبداً Platform.OS === 'ios' ? 44 : 24 — قيم الهوامش تختلف بين الطرازات وإصدارات نظام التشغيل. استخدم دائماً API النظام: safeAreaInsets أو useSafeAreaInsets. Dynamic Island على iPhone 15 Pro له هوامش مختلفة عن Notch على iPhone X.