useSafeArea

Import

import { useSafeArea } from "@seed-design/lynx-react";

useSafeArea는 @seed-design/lynx-react 패키지에 포함되어 있습니다. host 앱이 주입하는 lynx.__globalProps.safeAreaInsetTop / safeAreaInsetBottom 값을 우선 읽고, 값이 없으면 Lynx CSS env(safe-area-inset-*)를 fallback으로 반환합니다.

Usage

기본 사용

import { useSafeArea } from "@seed-design/lynx-react";

function Screen() {
  const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();

  return (
    <view
      style={{
        paddingTop: `calc(16px + ${safeAreaInsetTop})`,
        paddingBottom: safeAreaInsetBottom,
      }}
    >
      <text>Content</text>
    </view>
  );
}

Box와 함께 사용

import { Box } from "@seed-design/lynx-react";

function Screen() {
  return (
    <Box pt="safeArea" pb="safeArea">
      <text>Content</text>
    </Box>
  );
}

Box pt="safeArea" / pb="safeArea"도 내부적으로 useSafeArea와 같은 safe area resolve 로직을 사용합니다.

동작 방식

값 소스 우선순위는 다음과 같습니다.

1. lynx.__globalProps.safeAreaInsetTop / safeAreaInsetBottom
2. env(safe-area-inset-top) / env(safe-area-inset-bottom)

host가 0이 아닌 유효한 숫자 값을 주입하면 해당 값을 px 문자열로 변환합니다. 값이 없거나 0이면 CSS env() 문자열을 반환하고, 실제 px 해석은 Lynx layout 단계에 맡깁니다.

API

Return

사용 시 주의사항

• host global props가 없으면 CSS env(safe-area-inset-*) fallback을 반환합니다. 이 값은 JavaScript에서 px로 resolve되지 않고 style/layout 단계에서 해석됩니다.
• BottomSheet.Content처럼 컴포넌트 구조상 safe area가 필요한 경우에는 컴포넌트 내부에서 bottom safe area를 처리합니다.
• v1에서는 top/bottom만 지원합니다. left/right/p/px/py safe area shorthand는 열지 않습니다.
• BG → FG 딥링크 진입처럼 native safe area 계산 타이밍이 흔들릴 수 있는 환경에서는 host 앱이 lynx.__globalProps.safeAreaInsetTop / safeAreaInsetBottom을 안정적으로 주입하는지 확인해야 합니다.