SafeAreaView — bu nima, React Native da Safe Area bilan joylashtirish

SafeAreaView nima?

SafeAreaView — kontentni tizim interfeysi elementlari (holat satri, Notch, Dynamic Island va tizim navigatsiya paneli) tomonidan to'sib qo'yilmasligi uchun avtomatik ravishda ichki chekinishlar (padding) qo'shadigan React Native komponenti. Komponent iOS uchun React Native 0.50 da paydo bo'ldi va keyinchalik Android uchun kengaytirildi.

iOS da SafeAreaView iOS 11 (2017) da paydo bo'lgan native UIView.safeAreaInsets dan foydalanadi. Android da komponent Android 5.0 (API 21) dan mavjud bo'lgan WindowInsets — tizim chekinishlarini hisobga oladi. Apple ma'lumotlariga ko'ra (2026), faol iPhone larning 92 foizi kesik yoki Dynamic Island ga ega displeyga ega.

Safe Area nima uchun kerak

Safe Area tushunchasi — Apple HIG (Human Interface Guidelines) tavsiyalarining bir qismidir. iPhone X (2017) dan oldin ekranning butun maydoni xavfsiz edi. Notch paydo bo'lishi bilan Apple kontent joylashmasligi kerak bo'lgan maydonlarni belgiladi: kamera kesigi, vaqt va batareya ko'rsatkichi, uy ko'rsatkichi. Android 2018 yilda kesikli displeylar paydo bo'lishi bilan o'xshash tushunchani joriy qildi.

Safe Area iOS va Android da qanday ishlaydi

iOS da SafeAreaView native layout-guide dan safeAreaInsets ni o'qiydi. Yuqori chekinish holat satri balandligini (Notch li iPhone uchun odatda 44 yoki 50 punkt) o'z ichiga oladi. Pastki chekinish — Uy Ko'rsatkichi (Home Indicator) uchun 34 punkt. Android WindowInsets dan foydalanadi — holat satri uchun yuqori chekinish va tizim navigatsiyasi uchun pastki chekinish.

Muhim: SafeAreaView padding ni avtomatik qo'llaydi, lekin faqat ildiz konteyner uchun. Ichma-ich komponentlar himoya olmaydi — har bir ekran o'z SafeAreaView iga ega bo'lishi kerak. Modal oynalar va BottomSheet uchun chekinishlarni alohida hisobga oling.

Notch, Dynamic Island va tizim panellari

Notch — ekranning yuqori qismida kamera va sensorlarni o'z ichiga olgan apparat kesigi. iPhone X (2017) da paydo bo'lgan. Dynamic Island — iPhone 14 Pro va undan yangi modellarda Notch ni interaktiv element bilan almashtiruvchi dasturiy-apparat maydoni. Ikkalasi ham 50-56 pt yuqori chekinishni talab qiladi.

Android da kesiklar turli shakllarda bo'ladi: tomchi shaklidagi, burchakdagi teshik (punch-hole), kamera ostidagi chiziq. SafeAreaView Android da kesik shaklini hisobga oluvchi WindowInsets dan foydalanadi. Gorizontal yo'nalishdagi ilovalar uchun kontent tizim elementlari tomonidan to'sib qo'yilmasligi uchun yon chekinishlar qo'shiladi.

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 yondashuvi (Android 15+) kontentni tizim panellari ostida chizishni, lekin interaktiv elementlar uchun chekinishlarni hisobga olishni tavsiya qiladi. SafeAreaView bu muvozanatni saqlashga yordam beradi: fon panellar ostida chiziladi, tugmalar va matn esa xavfsiz zonada joylashadi.

SafeAreaView dan foydalanish va alternativlar

SafeAreaView — kontentni himoya qilishning eng oddiy usuli, lekin har doim ham moslashuvchan emas. Komponent barcha tomonlarga bir xil chekinishlarni qo'llaydi, bu har xil qirralar uchun turli padding kerak bo'lganda noqulay. Masalan, yon chekinishlar kerak bo'lmasligi mumkin, pastki chekinish esa faqat tugma uchun.

Asosiy alternativlar: useSafeAreaInsets react-native-safe-area-context dan (eng moslashuvchan yechim), Android da StatusBar.currentHeight, qurilma modelini qo'lda tekshirish bilan Platform.OS. Murakkab holatlar uchun umumiy konteyner uchun SafeAreaView va alohida elementlar uchun useSafeAreaInsets kombinatsiyasidan foydalaning.

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 kutubxonasi — React Native da Safe Area bilan ishlash uchun de-fakto standartdir. Expo, React Navigation va aksariyat UI to'plamlari tomonidan qo'llab-quvvatlanadi. Funktsional va sinf yondashuvlari uchun ham hook, ham Consumer komponentini taqdim etadi.

To'liq nazorat uchun react-native-safe-area-context

react-native-safe-area-context — o'rnatilgan SafeAreaView dan ko'ra moslashuvchanroq API ni taqdim etuvchi kutubxona. Asosiy afzalligi — useSafeAreaInsets hook i orqali alohida chekinish qiymatlariga (top, bottom, left, right) kirish imkoniyati, bu ularni tanlab qo'llash imkonini beradi.

Kutubxona shuningdek SafeAreaProvider — ilovaning yuqori darajasida majburiy bo'lgan komponentni taqdim etadi. U ekran aylantirilganda yoki klaviatura ochilganda tizim chekinishlaridagi o'zgarishlarga obuna bo'ladi. React Navigation ushbu kutubxonadan standart sifatida foydalanadi.

SafeAreaView react-native-safe-area-context dan o'rnatilganidan farq qiladi: ko'proq qurilmalarda ishlaydi va chekinish o'zgarishlari animatsiyasini qo'llab-quvvatlaydi. Yangi loyiha uchun ushbu kutubxonani bog'liqlik sifatida o'rnatish va uning SafeAreaView idan o'rnatilgan o'rniga foydalanish tavsiya etiladi.

SafeAreaView bilan ishlashda odatiy xatolar

SafeAreaView ko'pincha noto'g'ri ishlatiladi. Birinchi xato — har bir komponentni SafeAreaView ga o'rash, bu ikki tomonlama chekinishlarni keltirib chiqaradi. Qoida: ekranning ildiz View i uchun bitta SafeAreaView. Ichma-ich komponentlar chekinishlarni Flex joylashtirish orqali meros qilib oladi.

Ikkinchi xato — Android ni e'tiborsiz qoldirish. Android da SafeAreaView turli OT versiyalarida farq qilishi mumkin bo'lgan WindowInsets dan foydalanadi. Android 15+ da tizim panellari shaffof bo'lishi mumkin va chekinishlar o'zgaradi. SafeAreaView ni har doim real qurilmalarda sinab ko'ring, faqat emulyatorda emas.

Uchinchi xato — qattiq o'rnatilgan padding. Hech qachon Platform.OS === 'ios' ? 44 : 24 dan foydalanmang — chekinish qiymatlari modellar va OT versiyalari o'rtasida o'zgaradi. Har doim tizim API laridan foydalaning: safeAreaInsets yoki useSafeAreaInsets. iPhone 15 Pro dagi Dynamic Island iPhone X dagi Notch dan farqli chekinishlarga ega.