SafeAreaView — co to je, rozvržení s Safe Area v React Native

Co je SafeAreaView?

SafeAreaView — komponenta React Native, která automaticky přidává vnitřní okraje (padding), aby obsah nebyl překryt systémovými prvky rozhraní: stavovým řádkem, Notch, Dynamic Island a systémovým navigačním panelem. Komponenta se objevila v React Native 0.50 pro iOS a později byla rozšířena pro Android.

Na iOS SafeAreaView používá nativní UIView.safeAreaInsets, který se objevil v iOS 11 (2017). Na Android komponenta zohledňuje WindowInsets — systémové okraje dostupné od Android 5.0 (API 21). Podle údajů Apple (2026) má 92% aktivních iPhone displej s výřezem nebo Dynamic Island.

Proč je Safe Area potřeba

Koncepce Safe Area — součást doporučení Apple HIG (Human Interface Guidelines). Před iPhone X (2017) byl celý prostor obrazovky bezpečný. S příchodem Notch Apple definoval oblasti, kde by se obsah neměl nacházet: výřez kamery, indikátor času a baterie, domovský indikátor. Android zavedl podobnou koncepci s příchodem displejů s výřezem v roce 2018.

Jak Safe Area funguje na iOS a Android

Na iOS SafeAreaView čte safeAreaInsets z nativního layout-guide. Horní okraj zahrnuje výšku stavového řádku (obvykle 44 nebo 50 bodů pro iPhone s Notch). Dolní okraj — 34 bodů pro domovský indikátor (Home Indicator). Android používá WindowInsets — horní okraj pro stavový řádek a dolní pro systémovou navigaci.

Důležité: SafeAreaView aplikuje padding automaticky, ale pouze pro kořenový kontejner. Vnořené komponenty nezískávají ochranu — každá obrazovka by měla mít vlastní SafeAreaView. Pro modální okna a BottomSheet zohledněte okraje samostatně.

Notch, Dynamic Island a systémové panely

Notch — hardwarový výřez v horní části obrazovky obsahující kameru a senzory. Objevil se v iPhone X (2017). Dynamic Island — softwarově-hardwarová oblast iPhone 14 Pro a novějších, která nahrazuje Notch interaktivním prvkem. Oba vyžadují horní okraj 50-56 pt.

Na Android mají výřezy různé tvary: kapkovitý, otvor v rohu (punch-hole), proužek pod kamerou. SafeAreaView na Android používá WindowInsets, které zohledňují tvar výřezu. Pro aplikace v horizontální orientaci se přidávají boční okraje, aby obsah nebyl překryt systémovými prvky.

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

Přístup Edge-to-edge (Android 15+) doporučuje kreslit obsah pod systémovými panely, ale s ohledem na okraje pro interaktivní prvky. SafeAreaView pomáhá udržet tuto rovnováhu: pozadí se kreslí pod panely, tlačítka a text v bezpečné zóně.

Použití a alternativy SafeAreaView

SafeAreaView — nejjednodušší způsob ochrany obsahu, ale ne vždy flexibilní. Komponenta aplikuje stejné okraje na všechny strany, což je nepohodlné, když je potřeba různý padding pro různé okraje. Například boční okraje mohou být zbytečné a dolní jen pro tlačítko.

Hlavní alternativy: useSafeAreaInsets z react-native-safe-area-context (nejflexibilnější řešení), StatusBar.currentHeight na Android, Platform.OS s ruční kontrolou modelu zařízení. Pro složité případy použijte kombinaci SafeAreaView pro obecný kontejner a useSafeAreaInsets pro jednotlivé prvky.

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

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

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

Knihovna react-native-safe-area-context — de facto standard pro práci s Safe Area v React Native. Je podporována Expo, React Navigation a většinou UI kitů. Poskytuje jak hook, tak komponentu Consumer pro funkční a třídní přístupy.

react-native-safe-area-context pro úplnou kontrolu

react-native-safe-area-context — knihovna poskytující flexibilnější API než vestavěný SafeAreaView. Hlavní výhoda — přístup k jednotlivým hodnotám okrajů (top, bottom, left, right) přes hook useSafeAreaInsets, což umožňuje jejich selektivní aplikaci.

Knihovna také poskytuje SafeAreaProvider — komponentu povinnou na nejvyšší úrovni aplikace. Odebírá změny systémových okrajů při otáčení obrazovky nebo otevření klávesnice. React Navigation tuto knihovnu používá ve výchozím nastavení.

SafeAreaView z react-native-safe-area-context se liší od vestavěného: funguje na více zařízeních a podporuje animaci změny okrajů. Pro nový projekt se doporučuje nainstalovat tuto knihovnu jako závislost a používat její SafeAreaView místo vestavěného.

Typické chyby při práci s SafeAreaView

SafeAreaView je často používán nesprávně. První chyba — obalování každé komponenty do SafeAreaView, což vytváří dvojité okraje. Pravidlo: jeden SafeAreaView na kořenový View obrazovky. Vnořené komponenty dědí okraje přes Flex rozvržení.

Druhá chyba — ignorování Android. Na Android SafeAreaView používá WindowInsets, které se mohou lišit na různých verzích OS. Na Android 15+ mohou být systémové panely průhledné a okraje se mění. Vždy testujte SafeAreaView na reálných zařízeních, nejen v emulátoru.

Třetí chyba — pevně nastavený padding. Nikdy nepoužívejte Platform.OS === 'ios' ? 44 : 24 — hodnoty okrajů se mění mezi modely a verzemi OS. Vždy používejte systémová API: safeAreaInsets nebo useSafeAreaInsets. Dynamic Island na iPhone 15 Pro má jiné okraje než Notch na iPhone X.