Component

Safe area

Applies the device's safe-area insets as padding, so content clears the notch, the dynamic island, and the home indicator without hardcoding offsets. The amber bars mark where the device chrome would sit.

Standalone

Content area

Content respects the top and bottom safe areas. Padding is 0 in this preview; on a notched phone, extra inset is applied automatically.

safe area.tsx

<NativeSafeAreaProvider>
  <NativeSafeAreaView includeTop includeBottom>
    <Content />
  </NativeSafeAreaView>
</NativeSafeAreaProvider>

Example

An app header pinned just beneath the top inset, kept clear of the status bar without hardcoding any device-specific offset.

Dashboard

Done

Overview

This week's summary

safe-area-example.tsx

<NativeSafeAreaProvider>
  <NativeSafeAreaView includeTop>
    <AppHeader />
    <MainContent />
  </NativeSafeAreaView>
</NativeSafeAreaProvider>

Capabilities

Prop	Type	Description
childrenrequired	ReactNode	-