오버레이 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
Sheet — 모바일 하단과 넓은 화면 측면에 적응하는 Sheet
rich body와 고정 header·footer, 명시적 스크롤 소유권을 모바일 bottom·넓은 화면 logical side panel로 제공하는 Expo·React Native Sheet입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
Sheet 사용 시점과 역할
Sheet는 open과 onOpenChange를 앱에 남기는 controlled modal surface입니다. auto presentation은 작은 화면에서 bottom, 태블릿 이상에서 logical end를 선택하고 bottom·start·end를 명시할 수도 있습니다. 필수 title과 body, 선택적 description·leading·footer를 구조화하며, 단순 콘텐츠는 internal scroll로 관리하고 FlatList 같은 가상화 콘텐츠는 provided 모드에서 앱이 직접 소유하도록 분리합니다.
- auto·bottom·start·end presentation과 RTL을 따르는 logical side panel
- 고정 title·close header와 선택적 고정 footer, internal·provided 스크롤 모드
- safeAreaInsets 구조 값, keyboardOverlap 우선 교체와 Dialog overlay stack·focus·dismiss 이유 재사용
설치와 최소 예제
Sheet: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Sheet } from '@gj-kit/expo-ui';
<Sheet open={open} title="필터" onOpenChange={(next, details) => setOpen(next)}><Text>필터 조건을 선택하세요.</Text></Sheet>접근성과 플랫폼 동작
필수 title은 modal surface의 접근성 이름을 제공하고 선택적 description은 설명 관계로 연결됩니다. close action, backdrop, Escape, hardware Back과 accessibility escape는 Dialog의 topmost dismissal 경로를 사용하며 dismissDisabled가 모든 사용자 닫기 경로를 함께 막습니다. Sheet는 drag·snap point·grabber 의미를 제공하지 않으며, 그런 상호작용은 후속 선택형 BottomSheet adapter의 별도 접근성 계약으로 다룹니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.