피드백 · SINCE v0.1.0
Skeleton — 콘텐츠 모양에 맞춰 확장하는 Skeleton
화면별 width, height, aspectRatio를 style로 조합하고 테마 라운드와 로딩 문구를 사용하는 React Native Skeleton입니다.
Skeleton 사용 시점과 역할
Skeleton은 특정 도메인 비율을 강제하지 않는 범용 로딩 자리표시자입니다. 700ms 펄스 애니메이션과 surfaceSubtle 색상을 사용하며 radius는 테마 키로 선택합니다.
- style로 임의의 크기와 비율을 구성
- none·sm·md·lg·pill radius 토큰
- 테마 surfaceSubtle 기반의 반복 opacity 애니메이션
설치와 최소 예제
Skeleton: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Skeleton } from '@gj-kit/expo-ui';
<Skeleton accessibilityLabel="프로필을 불러오는 중" style={{ width: 120, height: 20 }} />접근성과 플랫폼 동작
accessibilityLabel을 생략하면 Provider의 loading 문자열을 사용합니다. 실제 로딩 영역의 상태와 완료 전환은 화면 컨테이너에서 함께 알려주는 것이 좋습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.