Expo·React Native UI 컴포넌트 49종

Expo와 React Native 화면의 글꼴 크기, 행간, 굵기와 색상을 GJ Kit 테마 역할로 일관되게 표현하는 Text 컴포넌트입니다.

primary, outline, destructive, inverse 변형과 세 가지 크기, 로딩 상태를 제공하는 Expo·React Native 버튼입니다.

아이콘만 보이는 액션에 필수 접근성 라벨, 버튼 변형, 로딩과 비활성 상태를 제공하는 React Native IconButton입니다.

action·filter·removable 의미를 판별 유니언으로 분리하고 선택 상태와 제거 액션의 접근성을 지키는 Expo·React Native Chip입니다.

아이콘 전용·확장형 표현, 세 가지 크기와 가장자리 배치, safe-area inset을 지원하는 Expo·React Native FloatingActionButton입니다.

라벨, 글자 수, 보조 액션, 도움말과 오류 상태를 지원하는 테마 기반 Expo·React Native 텍스트 입력 컴포넌트입니다.

검색 placeholder와 아이콘을 UiProvider에서 받아 앱 전반의 검색 입력을 간결하게 통일하는 Expo SearchField입니다.

render prop으로 입력 제어에 라벨, 도움말, 오류와 필수 상태의 접근성 관계를 전달하는 Expo·React Native FormField입니다.

리터럴 단일 값을 보존하고 웹 combobox·listbox 키보드 탐색과 네이티브 adaptive radio 선택면을 제공하는 Expo·React Native Select입니다.

리터럴 value 타입을 보존하며 segmented·underline 두 표현을 제공하는 Expo와 React Native용 탭 컴포넌트입니다.

웹의 실제 anchor와 네이티브 Linking, 라우터 onPress 흐름을 하나의 상호 배타적 계약으로 제공하는 Expo·React Native Link입니다.

필수 title과 content를 controlled open 상태, heading·expanded·controls 관계로 연결하는 Expo·React Native Collapsible입니다.

16·18·20·24 크기와 사용자 지정 체크 마크를 지원하는 원형 선택 표시 컴포넌트입니다.

선택 표시와 임의의 행 콘텐츠를 결합하고 selected·disabled 상태를 노출하는 React Native 선택 행입니다.

현재 상태에 따라 전체 선택·전체 해제 라벨을 자동 전환하는 Expo·React Native 선택 제어 행입니다.

보이는 라벨 또는 접근성 라벨을 필수로 요구하고 mixed 상태와 웹 Space 입력을 지원하는 크로스플랫폼 Checkbox입니다.

React Native 기본 Switch를 토큰 테마와 필수 라벨 계약으로 감싼 iOS·Android·Web 설정 토글입니다.

단일 선택 값을 타입으로 제한하고 방향키·Home·End 키보드 탐색을 제공하는 Expo·React Native RadioGroup입니다.

단일 숫자와 두 thumb 범위를 타입으로 분리하고 키보드·접근성 액션·RTL 좌표를 지원하는 무의존 Expo·React Native Slider입니다.

toolbar 안의 toggle button 집합에서 single·multiple controlled 상태, roving focus와 방향키 탐색을 제공하는 Expo·React Native ToggleGroup입니다.

카드와 패널의 배경, 테두리, 여백, 라운드와 elevation을 테마 토큰으로 구성하는 React Native Surface입니다.

outlined·elevated·filled 표면과 외부·내부 레이아웃 분리, 토큰 패딩·라운드를 제공하는 정적 Expo·React Native Card입니다.

이미지·영상·지도 등 미디어 슬롯의 width/height 비율을 React Native aspectRatio 스타일로 유지하는 레이아웃 프리미티브입니다.

최대 콘텐츠 폭과 반응형 여백을 한곳에서 관리하는 Expo·React Native 레이아웃 프레임입니다.

콘텐츠 구역의 title, subtitle, actions와 본문 간격을 테마 규칙으로 정리하는 React Native Section 컴포넌트입니다.

웹에서는 sticky 하단 바, 네이티브에서는 safe-area 패딩을 합성할 수 있는 화면 액션 컨테이너입니다.

화면별 width, height, aspectRatio를 style로 조합하고 테마 라운드와 로딩 문구를 사용하는 React Native Skeleton입니다.

빈 목록과 첫 사용 화면에 제목, 설명, 아이콘과 유효한 액션을 제공하는 Expo·React Native 상태 컴포넌트입니다.

오류 제목, 안내 문구, 아이콘과 선택적 재시도 버튼을 일관되게 제공하는 React Native 오류 상태 컴포넌트입니다.

success, error, info, warning 결과를 테마 색상과 Provider 아이콘으로 알리는 Expo·React Native Toast입니다.

useToastQueue와 연결해 FIFO, maxVisible·maxQueued, dedupe, pause·resume, live region과 action·close를 제공하는 Expo·React Native ToastViewport입니다.

neutral, info, success, warning, error 상태와 sm·md 크기를 제공하는 Expo·React Native Badge 컴포넌트입니다.

info, success, warning, error 안내에 제목·본문·액션·닫기를 조합하고 live region을 명시적으로 제어하는 Alert입니다.

테마 아이콘 크기와 color role을 사용하고 기본 로딩 접근성 라벨을 제공하는 Expo·React Native Spinner입니다.

value와 max 기반 진행률, 알 수 없는 진행 상태, 모션 감소와 접근성 값을 지원하는 React Native ProgressBar입니다.

프로필 이미지, 유니코드 초성 폴백, sm·md·lg 크기와 명시적 장식 여부를 제공하는 Expo·React Native Avatar입니다.

가로·세로 선, 테마 색상, 두께, inset과 spacing을 제공하고 separator 의미를 선택적으로 노출하는 Divider입니다.

title, description, leading, trailing과 세 가지 크기를 조합하고 정적·인터랙티브 계약을 타입으로 나누는 ListItem입니다.

실제 HTML table, 네이티브 list, controlled 정렬·다중 선택과 명시적 로딩·오류·갱신 상태를 제공하는 Expo·React Native DataTable입니다.

1-based numbered items·pages와 opaque cursor 탐색, semantic web navigation과 네이티브 adaptive 표현을 제공하는 Expo·React Native Pagination입니다.

controlled single·multiple 모드와 헤더·패널 ARIA 관계, 키보드 상호작용을 제공하는 Expo·React Native Accordion입니다.

React Native Modal과 dismiss 가능한 백드롭을 제공하면서 패널·액션·키보드 정책을 앱에 맡기는 최소 Dialog 컴포넌트입니다.

최대 폭 550의 표면 안에 title, description, leading, children과 footer를 정렬하는 React Native 다이얼로그 패널입니다.

모바일에서는 하단, 넓은 화면에서는 중앙에 표시하고 리터럴 액션 값·취소·busy·safe-area 계약을 제공하는 Expo·React Native ActionSheet입니다.

rich body와 고정 header·footer, 명시적 스크롤 소유권을 모바일 bottom·넓은 화면 logical side panel로 제공하는 Expo·React Native Sheet입니다.

controlled open 상태, 컴포넌트가 소유하는 trigger·title·close와 웹 non-modal·네이티브 adaptive 표현을 제공하는 Expo·React Native Popover입니다.

44px 아이콘 액션을 직접 소유하고 웹 시각 tooltip·네이티브 accessibilityHint로 짧은 보조 설명을 전달하는 Expo·React Native Tooltip입니다.

웹 menuitem 키보드 탐색과 네이티브 adaptive action surface를 같은 리터럴 값 계약으로 제공하는 Expo·React Native Menu입니다.

취소·확인 버튼, destructive 변형과 양쪽 로딩 상호 배제를 제공하는 Expo·React Native 확인 액션 행입니다.