SafeAreaView — was ist das, Layout mit Safe Area in React Native

Was ist SafeAreaView?

SafeAreaView ist eine React Native Komponente, die automatisch internes Padding hinzufügt, damit Inhalt nicht von Systemoberflächenelementen überlagert wird: Statusleiste, Notch, Dynamic Island und System-Navigationsleiste. Die Komponente erschien in React Native 0.50 für iOS und wurde später für Android erweitert.

Unter iOS verwendet SafeAreaView das native UIView.safeAreaInsets, das in iOS 11 (2017) eingeführt wurde. Unter Android berücksichtigt die Komponente WindowInsets — System-Insets, die seit Android 5.0 (API 21) verfügbar sind. Laut Apple (2026) haben 92% der aktiven iPhones ein Display mit Notch oder Dynamic Island.

Warum Safe Area benötigt wird

Das Konzept der Safe Area ist Teil der Apple HIG (Human Interface Guidelines) Empfehlungen. Vor dem iPhone X (2017) war der gesamte Bildschirmbereich sicher. Mit dem Aufkommen des Notch definierte Apple Bereiche, in denen kein Inhalt platziert werden sollte: der Kameraausschnitt, die Zeit- und Batterieanzeige, der Home-Indikator. Android führte mit dem Aufkommen von Notch-Displays im Jahr 2018 ein ähnliches Konzept ein.

Wie Safe Area auf iOS und Android funktioniert

Unter iOS liest SafeAreaView safeAreaInsets aus dem nativen Layout-Guide. Der obere Inset umfasst die Höhe der Statusleiste (üblicherweise 44 oder 50 Punkte für iPhones mit Notch). Der untere Inset beträgt 34 Punkte für den Home-Indikator. Android verwendet WindowInsets — oberen Inset für die Statusleiste und unteren für die Systemnavigation.

Wichtig: SafeAreaView wendet Padding automatisch an, jedoch nur für den Root-Container. Verschachtelte Komponenten erhalten keinen Schutz — jeder Bildschirm muss seinen eigenen SafeAreaView haben. Für modale Fenster und BottomSheet berücksichtigen Sie die Insets separat.

Notch, Dynamic Island und Systemleisten

Notch ist ein Hardware-Ausschnitt am oberen Bildschirmrand, der die Kamera und Sensoren enthält. Er erschien im iPhone X (2017). Dynamic Island ist ein Software-Hardware-Bereich des iPhone 14 Pro und neuer, der den Notch durch ein interaktives Element ersetzt. Beide erfordern einen oberen Inset von 50-56 pt.

Unter Android gibt es Ausschnitte in verschiedenen Formen: Tropfenform, Punch-Hole, Streifen unter der Kamera. SafeAreaView auf Android verwendet WindowInsets, die die Form des Ausschnitts berücksichtigen. Für Apps im Querformat werden seitliche Insets hinzugefügt, um zu verhindern, dass Inhalt Systemelemente überlagert.

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

Der Edge-to-edge Ansatz (Android 15+) empfiehlt, Inhalt unter den Systemleisten zu zeichnen, jedoch unter Berücksichtigung der Insets für interaktive Elemente. SafeAreaView hilft, dieses Gleichgewicht zu halten: der Hintergrund wird unter den Leisten gezeichnet, während Buttons und Text in der sicheren Zone bleiben.

Verwendung und Alternativen zu SafeAreaView

SafeAreaView ist der einfachste Weg, Inhalt zu schützen, aber nicht immer flexibel. Die Komponente wendet identisches Padding auf alle Seiten an, was unpraktisch ist, wenn unterschiedliches Padding für verschiedene Kanten benötigt wird. Beispielsweise kann seitliches Padding unnötig sein, während unteres Padding nur für einen Button benötigt wird.

Die wichtigsten Alternativen: useSafeAreaInsets aus react-native-safe-area-context (flexibelste Lösung), StatusBar.currentHeight unter Android, Platform.OS mit manueller Gerätemodellprüfung. Für komplexe Fälle verwenden Sie eine Kombination aus SafeAreaView für den Gesamtcontainer und useSafeAreaInsets für einzelne Elemente.

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

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

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

Die Bibliothek react-native-safe-area-context ist der De-facto-Standard für die Arbeit mit Safe Area in React Native. Sie wird von Expo, React Navigation und den meisten UI-Kits unterstützt. Sie bietet sowohl einen Hook als auch eine Consumer-Komponente für funktionale und klassenbasierte Ansätze.

react-native-safe-area-context für vollständige Kontrolle

react-native-safe-area-context ist eine Bibliothek, die eine flexiblere API als das integrierte SafeAreaView bietet. Der Hauptvorteil ist der Zugriff auf einzelne Inset-Werte (top, bottom, left, right) über den useSafeAreaInsets Hook, was die selektive Anwendung von Insets ermöglicht.

Die Bibliothek bietet auch SafeAreaProvider — eine Komponente, die auf der obersten Ebene der Anwendung erforderlich ist. Sie abonniert Änderungen der System-Insets beim Drehen des Bildschirms oder Öffnen der Tastatur. React Navigation verwendet diese Bibliothek standardmäßig.

SafeAreaView aus react-native-safe-area-context unterscheidet sich vom integrierten: es funktioniert auf mehr Geräten und unterstützt Animation von Inset-Änderungen. Für neue Projekte wird empfohlen, diese Bibliothek als Abhängigkeit zu installieren und ihr SafeAreaView anstelle des integrierten zu verwenden.

Häufige Fehler bei der Arbeit mit SafeAreaView

SafeAreaView wird oft falsch verwendet. Der erste Fehler ist, jede Komponente in SafeAreaView zu wickeln, was doppeltes Padding erzeugt. Die Regel: ein SafeAreaView pro root View des Bildschirms. Verschachtelte Komponenten erben Insets durch das Flex-Layout.

Der zweite Fehler ist das Ignorieren von Android. Unter Android verwendet SafeAreaView WindowInsets, die zwischen OS-Versionen variieren können. Unter Android 15+ können Systemleisten transparent sein und Insets ändern sich. Testen Sie SafeAreaView immer auf echten Geräten, nicht nur im Emulator.

Der dritte Fehler ist hartcodiertes Padding. Verwenden Sie niemals Platform.OS === 'ios' ? 44 : 24 — Inset-Werte variieren zwischen Modellen und OS-Versionen. Verwenden Sie immer System-APIs: safeAreaInsets oder useSafeAreaInsets. Dynamic Island auf dem iPhone 15 Pro hat andere Insets als der Notch auf dem iPhone X.