피드백 · SINCE v0.1.0
Toast — 짧은 작업 결과를 알리는 Toast
success, error, info, warning 결과를 테마 색상과 Provider 아이콘으로 알리는 Expo·React Native Toast입니다.
Toast 사용 시점과 역할
Toast는 화면 하단에 fixed 또는 absolute로 배치되며 bottomOffset으로 safe area와 다른 하단 UI를 피할 수 있습니다. useToastController는 기본 2800ms 후 메시지를 지우고 durationMs로 시간을 조절합니다.
- error, success, info, warning 네 가지 결과 상태
- Provider toast 아이콘과 상태별 strong/on-color 토큰
- useToastController의 showToast, clearToast, durationMs
설치와 최소 예제
Toast: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Toast } from '@gj-kit/expo-ui';
{toast ? <Toast message={toast.message} variant={toast.variant} bottomOffset={96 + bottomInset} /> : null}접근성과 플랫폼 동작
polite live region으로 메시지를 읽어 현재 포커스를 갑자기 이동시키지 않습니다. Toast 컨테이너는 pointerEvents가 없어 뒤의 화면 조작을 가로막지 않습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.