표시 · SINCE v0.3.0
Avatar — 이미지 실패에도 초성으로 폴백하는 Avatar
프로필 이미지, 유니코드 초성 폴백, sm·md·lg 크기와 명시적 장식 여부를 제공하는 Expo·React Native Avatar입니다.
Avatar 사용 시점과 역할
Avatar는 source가 없거나 로드에 실패하면 name에서 한글과 유니코드를 안전하게 처리한 초성을 만듭니다. 의미 있는 이미지는 alt를, 인접 이름과 중복되는 이미지는 decorative를 타입으로 반드시 선택해야 합니다.
- sm, md, lg 테마 control 크기
- 이미지 미지정·로드 실패 시 name 기반 초성 폴백
- fallback 노드와 안전하게 제한된 imageProps 지원
설치와 최소 예제
Avatar: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { Avatar } from '@gj-kit/expo-ui';
<Avatar name="김가람" source={{ uri: profileUrl }} alt="김가람 프로필 사진" />접근성과 플랫폼 동작
정보성 Avatar는 image 역할과 필수 alt를 제공하고 내부 Image는 중복 노출하지 않습니다. decorative가 true이면 전체 Avatar를 접근성 트리에서 숨깁니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.