오버레이 · SINCE v0.1.0
Dialog — 앱 조합을 존중하는 최소 Dialog
React Native Modal과 dismiss 가능한 백드롭을 제공하면서 패널·액션·키보드 정책을 앱에 맡기는 최소 Dialog 컴포넌트입니다.
Dialog 사용 시점과 역할
Dialog는 visible과 onDismiss로 제어되는 투명 fade Modal입니다. 기본적으로 백드롭을 누르면 닫히며 dismissOnBackdrop을 false로 바꿀 수 있고, 내부 Pressable은 탭 이벤트가 백드롭으로 전파되지 않게 합니다.
- visible과 onDismiss를 사용하는 controlled Modal
- 선택 가능한 백드롭 dismiss와 fade 애니메이션
- DialogPanel, ConfirmActionRow 등 원하는 children 조합
설치와 최소 예제
Dialog: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Dialog } from '@gj-kit/expo-ui';
<Dialog visible={visible} onDismiss={close}><DialogPanel title="설정">{content}</DialogPanel></Dialog>접근성과 플랫폼 동작
백드롭은 Provider의 close 문자열을 접근성 이름으로 사용하고 Android 뒤로 가기는 onRequestClose로 연결됩니다. 포커스 트랩, 포털, safe area와 고급 키보드 회피는 앱이 책임집니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.