Fluxo UIFluxo UIv0.4.93

Safe Area View

A lightweight wrapper that applies env(safe-area-inset-*) padding (or margin) so UI clears iOS notches, status bars, and the home indicator.

Basic Usage

Respecting the notch and home indicator

SafeAreaView applies env(safe-area-inset-*) padding so your UI clears iOS notches and home bars. The mock device on the right shows the simulated effect using inline insets.

App Header
Body content here
Bottom action
The SafeAreaView wrapper applies the iOS safe-area insets as padding (or margin). On a real device, no JS or CSS variable override is needed — env(safe-area-inset-top) / -bottom are picked up automatically.
import { SafeAreaView } from 'fluxo-ui';

<SafeAreaView edges={['top', 'bottom']} fillBackground>
    {/* page content */}
</SafeAreaView>

Edges & Modes

Targeted edges

Pass any combination of 'top' | 'right' | 'bottom' | 'left' | 'horizontal' | 'vertical' | 'all'. The wrapper applies env(safe-area-inset-*) only to the chosen edges.

edges="top"
edges={['bottom', 'horizontal']}
edges="all"

Padding vs margin

Use mode='margin' when you want the wrapper itself to sit inside the safe area without nudging its inner padding.

mode="padding" — content sits inside the safe area.
mode="margin" — the wrapper itself is pushed inward.
<SafeAreaView edges="top" mode="padding">Header area</SafeAreaView>
<SafeAreaView edges={['bottom', 'horizontal']} mode="margin">…</SafeAreaView>
<SafeAreaView edges="all" as="main" fillBackground>…</SafeAreaView>

Import

import { SafeAreaView } from 'fluxo-ui';
import type { SafeAreaViewProps, SafeAreaEdge, SafeAreaMode } from 'fluxo-ui';

Props

edges
SafeAreaEdge | SafeAreaEdge[]"'all'"

Which insets to apply. Supports 'top' | 'right' | 'bottom' | 'left' | 'all' | 'horizontal' | 'vertical', or an array of those.

mode
'padding' | 'margin'"'padding'"

Apply the insets as padding (default) or margin.

as
keyof JSX.IntrinsicElements"'div'"

HTML element to render as (e.g., 'main', 'section', 'header', 'footer').

fillBackground
boolean"false"

Apply the theme background to the wrapper so notch areas look consistent.

children
ReactNode

Content rendered inside the safe area wrapper.

className
string

Additional CSS class for the wrapper.

Features

env(safe-area-inset-*)

Reads native iOS safe-area insets via the standard CSS env() values.

Per-edge control

Apply to any combination: top / right / bottom / left / horizontal / vertical / all.

Padding or margin

mode="padding" (default) pushes content inward; mode="margin" pushes the wrapper itself.

Polymorphic

Render as any element via as= ('main', 'section', 'header', 'footer', …).

Optional fill background

Set fillBackground to extend --eui-bg behind the wrapper so notch areas look consistent.

Zero JS overhead

Purely CSS variables — no resize observers or measurement work.