Skip to main content

​
Overview

The useSafeArea hook returns the safe area insets for handling device notches, status bars, and other system UI. It is a convenience wrapper around useHostContext.
For most resources, use the <SafeArea> component instead — it applies both safe area padding and viewport height constraints automatically.

​
Import

import { useSafeArea } from 'sunpeak';

​
Signature

function useSafeArea(): SafeAreaInsets

​
Returns

​
return
SafeAreaInsets
Safe area insets object. Defaults to all zeros when unavailable.
{
  top: number;
  bottom: number;
  left: number;
  right: number;
}

​
Usage

import { useSafeArea } from 'sunpeak';

function MyResource() {
  const safeArea = useSafeArea();

  return (
    <div style={{ paddingTop: safeArea.top, paddingBottom: safeArea.bottom }}>
      Content with safe area padding.
    </div>
  );
}