피드백 · SINCE v0.1.0
EmptyState — 빈 화면의 설명과 다음 행동을 안내하는 EmptyState
빈 목록과 첫 사용 화면에 제목, 설명, 아이콘과 유효한 액션을 제공하는 Expo·React Native 상태 컴포넌트입니다.
EmptyState 사용 시점과 역할
EmptyState는 Provider의 기본 제목과 empty 아이콘을 사용하며 화면에 맞는 body와 leading으로 교체할 수 있습니다. action은 label과 onPress를 한 객체로 요구해 눌러도 동작하지 않는 버튼을 만들 수 없습니다.
- Provider 기본 emptyTitle과 empty 아이콘
- 중앙 정렬된 제목·본문과 사용자 지정 leading
- label과 onPress가 함께 필요한 action 계약
설치와 최소 예제
EmptyState: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { EmptyState } from '@gj-kit/expo-ui';
<EmptyState body="첫 기록을 남겨보세요" action={{ label: '기록 만들기', onPress: create }} />접근성과 플랫폼 동작
제목과 설명은 실제 텍스트로 노출되고 action은 표준 Button 의미론을 사용합니다. 장식 아이콘을 교체할 때 불필요한 접근성 이름을 추가하지 않도록 구성합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.