getSafeAreaInsets

Deprecated

This function is deprecated — explicitly marked as such in the SDK JSDoc. Use SafeAreaInsets.get() instead.

// Before (deprecated)
import { getSafeAreaInsets } from '@apps-in-toss/web-framework';
const inset = getSafeAreaInsets(); // number

// Recommended
import { SafeAreaInsets } from '@apps-in-toss/web-framework';
const insets = SafeAreaInsets.get(); // { top, bottom, left, right }

Returns the safe area inset as a single number. SafeAreaInsets.get() returns a { top, bottom, left, right } object, giving you per-edge control.

Signature

import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

/** @deprecated Use SafeAreaInsets.get() instead. */
declare function getSafeAreaInsets(): number;

Parameters

None.

Returns

• number — the safe area inset value in pixels. Does not distinguish between edges.

Permission

No permission required — getSafeAreaInsets is not bound to a PermissionName. For the typical permission flow used by other namespaces, see Guides — Permissions pattern.

Migration guide

How to migrate from getSafeAreaInsets to SafeAreaInsets.get():

// Before
import { getSafeAreaInsets } from '@apps-in-toss/web-framework';

function Page() {
  const inset = getSafeAreaInsets();
  return <div style={{ paddingBottom: inset }}>...</div>;
}

// After
import { SafeAreaInsets } from '@apps-in-toss/web-framework';
import { useState, useEffect } from 'react';

function Page() {
  const [insets, setInsets] = useState(() => SafeAreaInsets.get());

  useEffect(() => {
    // Subscribe to safe area updates when screen mode changes.
    const cleanup = SafeAreaInsets.subscribe({
      onEvent: (newInsets) => setInsets(newInsets),
    });
    return cleanup;
  }, []);

  return (
    <div style={{
      paddingTop: insets.top,
      paddingBottom: insets.bottom,
      paddingLeft: insets.left,
      paddingRight: insets.right,
    }}>
      ...
    </div>
  );
}

Try it live

→Open in sdk-example

Related APIs

• getPlatformOS — returns the current platform OS.
• getOperationalEnvironment — returns the current execution environment.

Related guides

• Guides — Permissions pattern — permission flow used by other namespaces (reference only; getSafeAreaInsets doesn't require a permission).
• Recipes — Safe-area-aware layout

External references

• @apps-in-toss/web-framework — SDK package. The actual exports are re-exported from @apps-in-toss/web-bridge.
• CSS environment variable counterpart: env(safe-area-inset-*) — the CSS standard approach to safe area, but SDK APIs provide more accurate values in the mini-app runtime.