SafeAreaView — vad är det, layout med Safe Area i React Native

Vad är SafeAreaView?

SafeAreaView — React Native-komponent som automatiskt lägger till inre marginaler (padding) så att innehåll inte täcks av systemets gränssnittselement: statusfält, Notch, Dynamic Island och systemets navigeringspanel. Komponenten dök upp i React Native 0.50 för iOS och utökades senare för Android.

På iOS använder SafeAreaView det inbyggda UIView.safeAreaInsets, som introducerades i iOS 11 (2017). På Android tar komponenten hänsyn till WindowInsets — systemmarginaler tillgängliga från Android 5.0 (API 21). Enligt Apple-data (2026) har 92% av aktiva iPhones en skärm med urtag eller Dynamic Island.

Varför Safe Area behövs

Konceptet Safe Area — en del av Apples HIG-rekommendationer (Human Interface Guidelines). Före iPhone X (2017) var hela skärmytan säker. Med Notchens uppkomst definierade Apple områden där innehåll inte bör placeras: kameraurtag, tid- och batteriindikator, hemindikator. Android införde ett liknande koncept med uppkomsten av skärmar med urtag 2018.

Hur Safe Area fungerar på iOS och Android

På iOS läser SafeAreaView safeAreaInsets från den inbyggda layout-guiden. Den övre marginalen inkluderar statusfältets höjd (vanligtvis 44 eller 50 punkter för iPhone med Notch). Nedre marginal — 34 punkter för hemindikatorn (Home Indicator). Android använder WindowInsets — övre marginal för statusfältet och nedre för systemnavigering.

Viktigt: SafeAreaView tillämpar padding automatiskt, men endast för rotbehållaren. Nästlade komponenter får inget skydd — varje skärm bör ha sin egen SafeAreaView. För modala fönster och BottomSheet, ta hänsyn till marginaler separat.

Notch, Dynamic Island och systempaneler

Notch — ett hårdvaruurtag i den övre delen av skärmen som innehåller kamera och sensorer. Dök upp i iPhone X (2017). Dynamic Island — ett mjukvaru-hårdvaruområde på iPhone 14 Pro och nyare som ersätter Notch med ett interaktivt element. Båda kräver en övre marginal på 50-56 pt.

På Android har urtag olika former: tårform, hål i hörnet (punch-hole), remsa under kameran. SafeAreaView på Android använder WindowInsets som tar hänsyn till urtagets form. För applikationer i liggande orientering läggs sidomarginaler till så att innehåll inte täcks av systemelement.

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-metoden (Android 15+) rekommenderar att innehåll ritas under systempaneler, men med hänsyn till marginaler för interaktiva element. SafeAreaView hjälper till att upprätthålla denna balans: bakgrunden ritas under panelerna, knappar och text i den säkra zonen.

Användning och alternativ till SafeAreaView

SafeAreaView — det enklaste sättet att skydda innehåll, men inte alltid flexibelt. Komponenten tillämpar samma marginaler på alla sidor, vilket är obekvämt när olika padding behövs för olika kanter. Till exempel kan sidomarginaler vara onödiga och den nedre endast för en knapp.

Huvudalternativ: useSafeAreaInsets från react-native-safe-area-context (mest flexibla lösningen), StatusBar.currentHeight på Android, Platform.OS med manuell kontroll av enhetsmodell. För komplexa fall, använd en kombination av SafeAreaView för den allmänna behållaren och useSafeAreaInsets för enskilda element.

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

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

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

Biblioteket react-native-safe-area-context — de facto-standard för arbete med Safe Area i React Native. Det stöds av Expo, React Navigation och de flesta UI-verktygssatser. Det tillhandahåller både en hook och en Consumer-komponent för funktionella och klassbaserade tillvägagångssätt.

react-native-safe-area-context för full kontroll

react-native-safe-area-context — bibliotek som tillhandahåller ett mer flexibelt API än den inbyggda SafeAreaView. Den främsta fördelen — åtkomst till enskilda marginalvärden (top, bottom, left, right) via hooken useSafeAreaInsets, vilket möjliggör selektiv tillämpning.

Biblioteket tillhandahåller också SafeAreaProvider — en komponent som är obligatorisk på applikationens översta nivå. Den prenumererar på förändringar i systemmarginaler vid skärmrotation eller tangentbordsöppning. React Navigation använder detta bibliotek som standard.

SafeAreaView från react-native-safe-area-context skiljer sig från den inbyggda: fungerar på fler enheter och stöder animation av marginalförändringar. För ett nytt projekt rekommenderas att installera detta bibliotek som ett beroende och använda dess SafeAreaView istället för den inbyggda.

Vanliga misstag vid arbete med SafeAreaView

SafeAreaView används ofta felaktigt. Första misstaget — att linda varje komponent i SafeAreaView, vilket skapar dubbla marginaler. Regel: en SafeAreaView per rotskärmvy. Nästlade komponenter ärver marginaler genom Flex-layout.

Andra misstaget — att ignorera Android. På Android använder SafeAreaView WindowInsets, som kan variera på olika OS-versioner. På Android 15+ kan systempaneler vara transparenta och marginaler ändras. Testa alltid SafeAreaView på verkliga enheter, inte bara i emulatorn.

Tredje misstaget — hårdkodad padding. Använd aldrig Platform.OS === 'ios' ? 44 : 24 — marginalvärden ändras mellan modeller och OS-versioner. Använd alltid system-API:er: safeAreaInsets eller useSafeAreaInsets. Dynamic Island på iPhone 15 Pro har andra marginaler än Notch på iPhone X.