Safe Area Provider

네이티브 앱이 URL 파라미터로 전달한 노치/홈바 영역 값을 읽는 모듈입니다. 네이티브 앱이 WebView URL에 ?top=44&bottom=34 형태로 값을 주입하면, SafeAreaProvider가 파싱하여 컨텍스트로 제공합니다.

빠른 시작

tsx

// App.tsx
import { SafeAreaProvider } from "@b1nd/aid-kit/safe-area-provider";

export const App = () => (
  <SafeAreaProvider>
    <YourApp />
  </SafeAreaProvider>
);

tsx

// Header.tsx
import { useSafeArea } from "@b1nd/aid-kit/safe-area-provider";

const Header = () => {
  const { top } = useSafeArea();

  return (
    <header style={{ paddingTop: top }}>
      <h1>타이틀</h1>
    </header>
  );
};

tsx

// BottomNav.tsx
const BottomNav = () => {
  const { bottom } = useSafeArea();

  return (
    <nav style={{ paddingBottom: bottom }}>
      {/* 탭 버튼들 */}
    </nav>
  );
};

API 레퍼런스

SafeAreaProvider

URL의 ?top= / ?bottom= 파라미터를 읽어 컨텍스트로 제공합니다. 값이 없거나 파싱 실패 시 0이 기본값입니다.

tsx

<SafeAreaProvider>
  <App />
</SafeAreaProvider>

useSafeArea()

현재 안전 영역 값을 반환합니다.

const { top, bottom } = useSafeArea();
// top: number    — 상단 노치 높이 (px)
// bottom: number — 하단 홈 인디케이터 높이 (px)