SafeAreaView — mi ez, elrendezés Safe Area-val React Native-ban

Mi az a SafeAreaView?

SafeAreaView — React Native komponens, amely automatikusan belső margókat (padding) ad hozzá, hogy a tartalmat ne takarják el a rendszerfelület elemei: állapotsor, Notch, Dynamic Island és a rendszernavigációs panel. A komponens a React Native 0.50-ben jelent meg iOS-re, később kiterjesztették Androidra is.

iOS-en a SafeAreaView a natív UIView.safeAreaInsets-t használja, amely az iOS 11-ben (2017) jelent meg. Androidon a komponens a WindowInsets-et — az Android 5.0-tól (API 21) elérhető rendszermargókat veszi figyelembe. Az Apple adatai szerint (2026) az aktív iPhone-ok 92%-a rendelkezik kivágással vagy Dynamic Island-del ellátott kijelzővel.

Miért van szükség a Safe Area-ra

A Safe Area koncepció — az Apple HIG (Human Interface Guidelines) ajánlásainak része. Az iPhone X (2017) előtt a képernyő teljes területe biztonságos volt. A Notch megjelenésével az Apple meghatározta azokat a területeket, ahol a tartalom nem helyezkedhet el: kamera kivágás, idő- és akkumulátorjelző, kezdőképernyő jelző. Az Android 2018-ban, a kivágással rendelkező kijelzők megjelenésével vezetett be hasonló koncepciót.

Hogyan működik a Safe Area iOS-en és Androidon

iOS-en a SafeAreaView a safeAreaInsets-t olvassa a natív layout-guide-ból. A felső margó magában foglalja az állapotsor magasságát (általában 44 vagy 50 pont a Notch-csal rendelkező iPhone-okon). Alsó margó — 34 pont a Home Indicator számára. Az Android a WindowInsets-et használja — felső margó az állapotsorhoz és alsó a rendszernavigációhoz.

Fontos: A SafeAreaView automatikusan alkalmazza a padding-ot, de csak a gyökér konténerre. A beágyazott komponensek nem kapnak védelmet — minden képernyőnek saját SafeAreaView-val kell rendelkeznie. Modális ablakok és BottomSheet esetén a margókat külön vegye figyelembe.

Notch, Dynamic Island és rendszerpanelek

Notch — hardveres kivágás a képernyő felső részén, amely a kamerát és érzékelőket tartalmazza. Az iPhone X-ben (2017) jelent meg. Dynamic Island — az iPhone 14 Pro és újabb modellek szoftver-hardver területe, amely a Notch-ot egy interaktív elemmel helyettesíti. Mindkettő 50-56 pt felső margót igényel.

Androidon a kivágások különböző formájúak: könnycsepp alakú, lyuk a sarokban (punch-hole), csík a kamera alatt. SafeAreaView Androidon a WindowInsets-et használja, amely figyelembe veszi a kivágás formáját. Fekvő tájolású alkalmazásokhoz oldalsó margók kerülnek hozzáadásra, hogy a tartalmat ne takarják el a rendszerelemek.

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>
);

Az Edge-to-edge megközelítés (Android 15+) a tartalom rendszerpanelek alá rajzolását javasolja, de az interaktív elemek margóinak figyelembevételével. A SafeAreaView segít fenntartani ezt az egyensúlyt: a háttér a panelek alá rajzolódik, a gombok és szöveg pedig a biztonságos zónában marad.

A SafeAreaView használata és alternatívái

SafeAreaView — a legegyszerűbb módja a tartalom védelmének, de nem mindig rugalmas. A komponens ugyanazokat a margókat alkalmazza minden oldalra, ami kényelmetlen, ha különböző padding szükséges a különböző élekhez. Például az oldalsó margók feleslegesek lehetnek, az alsó pedig csak egy gombhoz kell.

Fő alternatívák: useSafeAreaInsets a react-native-safe-area-context-ből (legrugalmasabb megoldás), StatusBar.currentHeight Androidon, Platform.OS az eszközmodell kézi ellenőrzésével. Összetett esetekhez használja a SafeAreaView kombinációját az általános konténerhez és a useSafeAreaInsets-t az egyes elemekhez.

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

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

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

A react-native-safe-area-context könyvtár — de facto szabvány a Safe Area-val való munkához React Native-ban. Támogatja az Expo, a React Navigation és a legtöbb UI készlet. Hook-ot és Consumer komponenst is biztosít a funkcionális és osztályalapú megközelítésekhez.

react-native-safe-area-context a teljes vezérléshez

react-native-safe-area-context — könyvtár, amely rugalmasabb API-t biztosít, mint a beépített SafeAreaView. A fő előny — hozzáférés az egyes margóértékekhez (top, bottom, left, right) a useSafeAreaInsets hook-on keresztül, lehetővé téve azok szelektív alkalmazását.

A könyvtár SafeAreaProvider-t is biztosít — egy komponenst, amely kötelező az alkalmazás legfelső szintjén. Feliratkozik a rendszermargók változásaira képernyő forgatásakor vagy billentyűzet nyitásakor. A React Navigation alapértelmezetten ezt a könyvtárat használja.

SafeAreaView a react-native-safe-area-context-ből különbözik a beépítettől: több eszközön működik és támogatja a margóváltozások animációját. Új projekthez ajánlott ezt a könyvtárat függőségként telepíteni és annak SafeAreaView-ját használni a beépített helyett.

Gyakori hibák a SafeAreaView használatakor

SafeAreaView gyakran helytelenül használatos. Az első hiba — minden komponens becsomagolása SafeAreaView-ba, ami dupla margókat eredményez. Szabály: egy SafeAreaView a képernyő gyökér View-jához. A beágyazott komponensek a Flex elrendezésen keresztül öröklik a margókat.

Második hiba — az Android figyelmen kívül hagyása. Androidon a SafeAreaView WindowInsets-et használ, amelyek az OS különböző verzióin eltérőek lehetnek. Android 15+ esetén a rendszerpanelek átlátszóak lehetnek, és a margók változnak. Mindig tesztelje a SafeAreaView-t valódi eszközökön, ne csak az emulátorban.

Harmadik hiba — keményre kódolt padding. Soha ne használja a Platform.OS === 'ios' ? 44 : 24 kifejezést — a margóértékek modellenként és OS-verziónként változnak. Mindig rendszer API-kat használjon: safeAreaInsets vagy useSafeAreaInsets. A Dynamic Island az iPhone 15 Pro-n más margókat használ, mint a Notch az iPhone X-en.