SafeAreaView — این چیست، چیدمان با Safe Area در React Native

SafeAreaView چیست؟

SafeAreaView — کامپوننت React Native که به طور خودکار فاصله‌های داخلی (padding) اضافه می‌کند تا محتوا توسط عناصر سیستم رابط مانند نوار وضعیت، 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% آیفون‌های فعال دارای صفحه با بریدگی یا 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 را از layout-guide بومی می‌خواند. فاصله بالایی شامل ارتفاع نوار وضعیت (معمولاً 44 یا 50 پوینت برای iPhone با Notch) است. فاصله پایینی — 34 پوینت برای نشانگر خانه (Home Indicator). Android از WindowInsets استفاده می‌کند — فاصله بالایی برای نوار وضعیت و پایینی برای ناوبری سیستم.

مهم: SafeAreaView padding را به طور خودکار اعمال می‌کند، اما فقط برای کانتینر ریشه. کامپوننت‌های تودرتو محافظت نمی‌شوند — هر صفحه باید 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 — ساده‌ترین راه برای محافظت از محتوا، اما همیشه انعطاف‌پذیر نیست. کامپوننت فاصله‌های یکسانی به همه طرف‌ها اعمال می‌کند که وقتی padding متفاوتی برای لبه‌های مختلف نیاز است، ناخوشایند است. مثلاً فاصله‌های کناری ممکن است لازم نباشند، و پایینی فقط برای دکمه.

جایگزین‌های اصلی: 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 را روی دستگاه‌های واقعی تست کنید، نه فقط در شبیه‌ساز.

سومین خطا — padding های سخت‌کد شده. هرگز از Platform.OS === 'ios' ? 44 : 24 استفاده نکنید — مقادیر فاصله بین مدل‌ها و نسخه‌های سیستم‌عامل تغییر می‌کنند. همیشه از APIهای سیستم استفاده کنید: safeAreaInsets یا useSafeAreaInsets. Dynamic Island در iPhone 15 Pro فاصله‌های متفاوتی نسبت به Notch در iPhone X دارد.