SafeAreaView — co to jest, układ z Safe Area w React Native

Co to jest SafeAreaView?

SafeAreaView — komponent React Native, który automatycznie dodaje wewnętrzne odstępy (padding), aby treść nie była zasłaniana przez elementy systemowe interfejsu: pasek stanu, Notch, Dynamic Island i systemowy panel nawigacji. Komponent pojawił się w React Native 0.50 dla iOS i później został rozszerzony dla Android.

Na iOS SafeAreaView używa natywnego UIView.safeAreaInsets, który pojawił się w iOS 11 (2017). Na Android komponent uwzględnia WindowInsets — systemowe odstępy dostępne od Android 5.0 (API 21). Według danych Apple (2026), 92% aktywnych iPhone ma wyświetlacz z wycięciem lub Dynamic Island.

Po co jest Safe Area

Koncepcja Safe Area — część zaleceń Apple HIG (Human Interface Guidelines). Przed iPhone X (2017) cała przestrzeń ekranu była bezpieczna. Z pojawieniem się Notch Apple określiła obszary, w których treść nie powinna się znajdować: wycięcie kamery, wskaźnik czasu i baterii, wskaźnik domowy. Android wprowadził analogiczną koncepcję wraz z pojawieniem się wyświetlaczy z wycięciem w 2018 roku.

Jak działa Safe Area na iOS i Android

Na iOS SafeAreaView odczytuje safeAreaInsets z natywnego layout-guide. Górny odstęp obejmuje wysokość paska stanu (zazwyczaj 44 lub 50 punktów dla iPhone z Notch). Dolny odstęp — 34 punkty dla wskaźnika domowego (Home Indicator). Android używa WindowInsets — górny odstęp dla paska stanu i dolny dla systemowej nawigacji.

Ważne: SafeAreaView stosuje padding automatycznie, ale tylko dla kontenera głównego. Zagnieżdżone komponenty nie otrzymują ochrony — każdy ekran powinien mieć własny SafeAreaView. Dla okien modalnych i BottomSheet uwzględniaj odstępy osobno.

Notch, Dynamic Island i panele systemowe

Notch — sprzętowe wycięcie w górnej części ekranu, zawierające kamerę i czujniki. Pojawiło się w iPhone X (2017). Dynamic Island — programowo-sprzętowy obszar iPhone 14 Pro i nowszych, zastępujący Notch interaktywnym elementem. Oba wymagają górnego odstępu 50-56 pt.

Na Android wycięcia mają różne kształty: kroplowe, otwór w rogu (punch-hole), pasek pod kamerę. SafeAreaView na Android używa WindowInsets, które uwzględniają kształt wycięcia. Dla aplikacji w orientacji poziomej dodawane są boczne odstępy, aby treść nie była zasłaniana przez elementy systemowe.

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 podejście (Android 15+) zaleca rysowanie treści pod panelami systemowymi, ale z uwzględnieniem odstępów dla elementów interaktywnych. SafeAreaView pomaga zachować tę równowagę: tło rysowane jest pod panelami, a przyciski i tekst — w bezpiecznej strefie.

Użycie i alternatywy SafeAreaView

SafeAreaView — najprostszy sposób ochrony treści, ale nie zawsze elastyczny. Komponent stosuje takie same odstępy do wszystkich stron, co jest nie wygodne, gdy potrzebny jest różny padding dla różnych krawędzi. Na przykład, boczne odstępy mogą być niepotrzebne, a dolny — tylko dla przycisku.

Główne alternatywy: useSafeAreaInsets z react-native-safe-area-context (najbardziej elastyczne rozwiązanie), StatusBar.currentHeight na Android, Platform.OS z ręcznym sprawdzaniem modelu urządzenia. Do skomplikowanych przypadków używaj kombinacji SafeAreaView dla głównego kontenera i useSafeAreaInsets dla poszczególnych elementów.

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

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

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

Biblioteka react-native-safe-area-context — de facto standard pracy z Safe Area w React Native. Jest wspierana przez Expo, React Navigation i większość zestawów UI. Dostarcza zarówno hook, jak i komponent Consumer do podejścia funkcyjnego i klasowego.

react-native-safe-area-context do pełnej kontroli

react-native-safe-area-context — biblioteka zapewniająca bardziej elastyczne API niż wbudowany SafeAreaView. Główna zaleta — dostęp do poszczególnych wartości odstępów (top, bottom, left, right) przez hook useSafeAreaInsets, co pozwala stosować je wybiórczo.

Biblioteka dostarcza również SafeAreaProvider — komponent wymagany na najwyższym poziomie aplikacji. Subskrybuje zmiany systemowych odstępów przy obrocie ekranu lub otwarciu klawiatury. React Navigation domyślnie używa tej biblioteki.

SafeAreaView z react-native-safe-area-context różni się od wbudowanego: działa na większej liczbie urządzeń i obsługuje animację zmiany odstępów. Dla nowego projektu zaleca się zainstalowanie tej biblioteki jako zależności i używanie jej SafeAreaView zamiast wbudowanego.

Typowe błędy przy pracy z SafeAreaView

SafeAreaView często jest używany nieprawidłowo. Pierwszy błąd — opakowywanie każdego komponentu w SafeAreaView, co tworzy podwójne odstępy. Zasada: jeden SafeAreaView na główny View ekranu. Zagnieżdżone komponenty dziedziczą odstępy poprzez Flex-układ.

Drugi błąd — ignorowanie Androida. Na Android SafeAreaView używa WindowInsets, które mogą się różnić na różnych wersjach systemu. Na Android 15+ panele systemowe mogą być przezroczyste, a odstępy się zmieniają. Zawsze testuj SafeAreaView na rzeczywistych urządzeniach, nie tylko w emulatorze.

Trzeci błąd — sztywno ustawione padding. Nigdy nie używaj Platform.OS === 'ios' ? 44 : 24 — wartości odstępów zmieniają się między modelami i wersjami systemu. Zawsze używaj systemowych API: safeAreaInsets lub useSafeAreaInsets. Dynamic Island na iPhone 15 Pro ma inne odstępy niż Notch na iPhone X.