SafeAreaView — bu nədir, React Native-də Safe Area ilə düzülüş

SafeAreaView nədir?

SafeAreaView — məzmunun sistem interfeys elementləri (status sətri, Notch, Dynamic Island və sistem naviqasiya paneli) tərəfindən örtülməməsi üçün avtomatik olaraq daxili boşluqlar (padding) əlavə edən React Native komponentidir. Komponent iOS üçün React Native 0.50-də ortaya çıxdı və sonra Android üçün genişləndirildi.

iOS-da SafeAreaView iOS 11-də (2017) ortaya çıxan native UIView.safeAreaInsets istifadə edir. Android-də komponent Android 5.0-dən (API 21) mövcud olan WindowInsets-i — sistem boşluqlarını nəzərə alır. Apple məlumatlarına görə (2026), aktiv iPhone-ların 92%-i kəsik və ya Dynamic Island olan displeyə malikdir.

Safe Area nəyə lazımdır

Safe Area konsepsiyası — Apple HIG (Human Interface Guidelines) tövsiyələrinin bir hissəsidir. iPhone X-dən (2017) əvvəl ekranın bütün sahəsi təhlükəsiz idi. Notch-un ortaya çıxması ilə Apple məzmunun yerləşməməli olduğu sahələri təyin etdi: kamera kəsikliyi, saat və batareya göstəricisi, ev göstəricisi. Android 2018-ci ildə kəsikli displeylərin ortaya çıxması ilə analoji konsepsiyanı tətbiq etdi.

Safe Area iOS və Android-də necə işləyir

iOS-da SafeAreaView native layout-guide-dən safeAreaInsets oxuyur. Yuxarı boşluq status sətrinin hündürlüyünü (Notch-lı iPhone üçün adətən 44 və ya 50 punkt) əhatə edir. Aşağı boşluq — Ev Göstəricisi (Home Indicator) üçün 34 punkt. Android WindowInsets istifadə edir — status sətri üçün yuxarı boşluq və sistem naviqasiyası üçün aşağı boşluq.

Vacib: SafeAreaView padding-i avtomatik tətbiq edir, ancaq yalnız kök konteyner üçün. İç-içə yerləşdirilmiş komponentlər qorunmur — hər ekran öz SafeAreaView-inə malik olmalıdır. Modal pəncərələr və BottomSheet üçün boşluqları ayrıca nəzərə alın.

Notch, Dynamic Island və sistem panelləri

Notch — ekranın yuxarı hissəsində kamera və sensorları əhatə edən aparat kəsikliyidir. iPhone X-də (2017) ortaya çıxdı. Dynamic Island — iPhone 14 Pro və daha yeni modellərdə Notch-ı interaktiv elementlə əvəz edən proqram-aparat sahəsidir. Hər ikisi 50-56 pt yuxarı boşluq tələb edir.

Android-də kəsiklər müxtəlif formalarda olur: damcı formalı, küncdə dəlik (punch-hole), kamera altında zolaq. SafeAreaView Android-də kəsik formasını nəzərə alan WindowInsets istifadə edir. Üfiqi istiqamətdəki tətbiqlər üçün məzmunun sistem elementləri tərəfindən örtülməməsi üçün yan boşluqlar əlavə edilir.

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 yanaşması (Android 15+) məzmunun sistem panellərinin altında çəkilməsini, lakin interaktiv elementlər üçün boşluqların nəzərə alınmasını tövsiyə edir. SafeAreaView bu tarazlığı qorumağa kömək edir: fon panellərin altında çəkilir, dümələr və mətn isə təhlükəsiz zonada yerləşir.

SafeAreaView istifadəsi və alternativləri

SafeAreaView — məzmunu qorumağın ən sadə yolu, lakin həmişə çevik deyil. Komponent bütün tərəflərə eyni boşluqları tətbiq edir ki, bu da müxtəlif kənarlar üçün fərqli padding lazım olduqda əlverişsizdir. Məsələn, yan boşluqlar lazım olmaya bilər, aşağı boşluq isə yalnız dümə üçün.

Əsas alternativlər: useSafeAreaInsets react-native-safe-area-context-dən (ən çevik həll), Android-də StatusBar.currentHeight, cihaz modelinin əl ilə yoxlanması ilə Platform.OS. Mürəkkəb hallar üçün ümumi konteyner üçün SafeAreaView və ayrı elementlər üçün useSafeAreaInsets kombinasiyasından istifadə edin.

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 kitabxanası — React Native-də Safe Area ilə iş üçün de-fakto standartdır. Expo, React Navigation və əksər UI dəstləri tərəfindən dəstəklənir. Həm funksional, həm də sinif yanaşmaları üçün hook və Consumer komponenti təmin edir.

Tam nəzarət üçün react-native-safe-area-context

react-native-safe-area-context — daxili SafeAreaView-dən daha çevik API təmin edən kitabxana. Əsas üstünlüyü — useSafeAreaInsets hook-u vasitəsilə ayrı boşluq dəyərlərinə (top, bottom, left, right) giriş imkanı, bu da onları seçməli tətbiq etməyə imkan verir.

Kitabxana həmçinin tətbiqin yuxarı səviyyəsində məcburi olan SafeAreaProvider komponentini təmin edir. O, ekranın döndərilməsi və ya klaviaturanın açılması zamanı sistem boşluqlarındakı dəyişikliklərə abunə olur. React Navigation bu kitabxananı standart olaraq istifadə edir.

SafeAreaView react-native-safe-area-context-dən daxili olandan fərqlənir: daha çox cihazda işləyir və boşluq dəyişikliklərinin animasiyasını dəstəkləyir. Yeni layihə üçün bu kitabxananı asılılıq kimi quraşdırmaq və onun SafeAreaView-indən istifadə etmək tövsiyə olunur.

SafeAreaView ilə işləyərkən tipik səhvlər

SafeAreaView tez-tez səhv istifadə olunur. Birinci səhv — hər komponenti SafeAreaView-ə bürümək, bu da qoşa boşluqlar yaradır. Qayda: ekranın kök View-i üçün bir SafeAreaView. İç-içə komponentlər boşluqları Flex düzülüşü vasitəsilə miras alır.

İkinci səhv — Android-i nəzərdən qaçırmaq. Android-də SafeAreaView müxtəlif ƏS versiyalarında fərqlənə bilən WindowInsets istifadə edir. Android 15+-də sistem panelləri şeffaf ola bilər və boşluqlar dəyişir. SafeAreaView-i həmişə real cihazlarda sınayın, yalnız emulyatorda yox.

Üçüncü səhv — sərt təyin edilmiş padding. Heç vaxt Platform.OS === 'ios' ? 44 : 24 istifadə etməyin — boşluq dəyərləri modellər və ƏS versiyaları arasında dəyişir. Həmişə sistem API-lərindən istifadə edin: safeAreaInsets və ya useSafeAreaInsets. iPhone 15 Pro-da Dynamic Island iPhone X-dəki Notch-dan fərqli boşluqlara malikdir.