SafeArea

SafeArea keeps native content clear of the notch, the status bar, and the home indicator. On web it's a Box — safe-area concerns are a device-shell problem, not a browser problem — so the same cross-platform code reads the same on both targets.

What it is

A platform-conditional wrapper. On web the implementation renders a regular Box; on native the component imported from @usemotif/react-native wraps React Native's SafeAreaView. Both accept the same prop set so cross-platform screens stay portable — you don't need a platform branch at the call site.

Install

SafeArea is exported from usemotif. No separate install.

import { SafeArea } from 'usemotif';

API

function SafeArea(props: SafeAreaProps): JSX.Element

Examples

Native screen root:

export function HomeScreen() {
return (
  <SafeArea flex={1} bg="$colors.surface.base">
    <Header />
    <ScrollView flex={1}>
      <Feed />
    </ScrollView>
    <TabBar />
  </SafeArea>
);
}

Cross-platform notes

On web SafeArea renders a regular Box. The CSS env(safe-area-inset-*) variables are not applied automatically — wire them yourself in the platform-shell layer if a web-target shell needs them. On native SafeArea wraps SafeAreaView from React Native; padding for the notch, the status bar, and the home indicator is applied by the runtime.