<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

app/_layout.tsx

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:

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 { 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>

Use Margin Instead of Padding

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

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: 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.

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

Introduction

Edit this page on GitHub.

Github

Discord

Blog