<SafeAreaView />

SafeAreaView renders content within the safe area boundaries of a device, avoiding notches, status bars, and home indicators.

One.UI.SafeArea is One’s shared safe area API. It uses One’s native host on iOS and Android and CSS environment insets on web, with no separate safe area package in your app.

Usage

import { One, Slot } from 'one'

export default function Layout() {
  return (
    <One.UI.SafeArea.View style={{ flex: 1 }}>
      <Slot />
    </One.UI.SafeArea.View>
  )
}

Props

One.UI.SafeArea.View extends all standard View props and adds:

Prop	Type	Default	Description
`mode`	`'padding' \| 'margin'`	`'padding'`	How to apply the safe area insets
`edges`	`Edge[]`	All edges	Which edges to apply insets to

Examples

Apply to Specific Edges

import { One } from 'one'

// Only apply to top (useful for screens with bottom tabs)
<One.UI.SafeArea.View edges={['top']}>
  {/* Content */}
</One.UI.SafeArea.View>

// Only apply to top and bottom
<One.UI.SafeArea.View edges={['top', 'bottom']}>
  {/* Content */}
</One.UI.SafeArea.View>

Use Margin Instead of Padding

<One.UI.SafeArea.View mode="margin" style={{ flex: 1 }}>
  {/* Content */}
</One.UI.SafeArea.View>

Hooks

useSafeAreaInsets

Get the current safe area insets for custom layouts:

import { useSafeAreaInsets } from 'one'

function MyComponent() {
  const insets = useSafeAreaInsets()

  return (
    <View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>
      {/* Content */}
    </View>
  )
}

Returns { top, right, bottom, left } in pixels.

Platform Behavior

Web: Reads CSS env(safe-area-inset-*) values.
iOS: Reads native safe area APIs for the status bar, notch or Dynamic Island, and home indicator.
Android: Reads native window insets for status bars, navigation bars, and display cutouts.

One mounts the safe area provider at its root on every platform, so there is no setup. Libraries that import react-native-safe-area-context, such as React Navigation, resolve to One’s safe area and read the same insets. If your app declares react-native-safe-area-context in its own package.json, One leaves that package alone and your copy is used.

Layouts - Using SafeAreaView in layouts
Stack - Stack navigation with safe areas

PreviousScrollBehavior

Presentations

Edit this page on GitHub.