Safe area - cskn Developers

Screen, Header, TabBar and Sheet already handle the safe area. You only need this page when you build fixed or full-bleed UI yourself. In a shell, the host reports its insets over the bridge (app.insets). In a browser, the CSS env(safe-area-inset-*) values apply. The helpers below combine both, so you never have to choose.

In CSS

UIProvider publishes the shell’s insets on its wrapper as --cskn-inset-top, -right, -bottom and -left. insetCss builds an expression that takes the largest of the shell value, the browser value and an optional minimum:

import { insetCss } from '@cskn/ui';

<div
  style={{
    position: 'fixed',
    left: 0,
    right: 0,
    bottom: 0,
    paddingBottom: insetCss('bottom', 12),
  }}
>
  <Toolbar />
</div>

insetCss('top');      // max(var(--cskn-inset-top, 0px), env(safe-area-inset-top), 0px)
insetCss('bottom', 12);

In JavaScript

import { useInsets, useUI } from '@cskn/ui';

const insets = useInsets();         // { top, right, bottom, left } in CSS px
const { insets: same } = useUI();

Outside React: getInsets() and onInsetsChange(cb), which returns an unsubscribe function. startInsetVars() writes the --cskn-inset-* variables onto the document root if you are not using UIProvider.

In a browser no inset message arrives, so the JavaScript values stay 0. Prefer insetCss, which falls back to env(safe-area-inset-*), for anything that must also work in a browser.