Component

Safe area

Reads env(safe-area-inset-*) once and republishes it as padding, so content clears the notch, the dynamic island, and the home indicator without hardcoding device-specific numbers. The amber bars mark where the device chrome would sit.

The primitive

Content area

Padded by env(safe-area-inset-top/bottom). Zero on this display, real on a notched device.

safe area.tsx

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

Example

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

Wallet

Done

$1,204.56

Available balance

safe-area-example.tsx

<NativeSafeAreaProvider>
  <NativeSafeAreaView includeTop>
    <WalletHeader />
    <Balance />
  </NativeSafeAreaView>
</NativeSafeAreaProvider>

Capabilities

Prop	Type	Description
childrenrequired	ReactNode	—