<SafeAreaView />

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

One provides safe area support via a lightweight implementation for web (@vxrn/safe-area) and uses react-native-safe-area-context on native. The web implementation is optimized for bundle size and doesn’t require native module dependencies.

Usage

import { SafeAreaView, Slot } from 'one'

export default function Layout() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <Slot />
    </SafeAreaView>
  )
}

Props

SafeAreaView extends all standard View props and adds:

Examples

import { SafeAreaView } from 'one'

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

// Only apply to top and bottom
<SafeAreaView edges={['top', 'bottom']}>
  {/* Content */}
</SafeAreaView>

<SafeAreaView mode="margin" style={{ flex: 1 }}>
  {/* Content */}
</SafeAreaView>

Hooks

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: Uses a lightweight custom implementation (@vxrn/safe-area) that reads CSS env(safe-area-inset-*) values. This is automatically aliased from react-native-safe-area-context on web, reducing bundle size while maintaining full API compatibility.
• iOS: Uses native safe area APIs via react-native-safe-area-context, accounting for status bar, notch/Dynamic Island, and home indicator
• Android: Uses native safe area APIs, accounting for status bar, navigation bar, and display cutouts

One automatically sets up SafeAreaProvider - no additional setup needed.

Related

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