입력 · SINCE v0.1.0
SearchField — 검색 흐름에 맞춘 pill 형태 SearchField
검색 placeholder와 아이콘을 UiProvider에서 받아 앱 전반의 검색 입력을 간결하게 통일하는 Expo SearchField입니다.
SearchField 사용 시점과 역할
SearchField는 검색 제출 키, 자동 포커스, controlled value를 지원하는 좁은 목적의 입력입니다. leading을 전달하지 않으면 Provider의 검색 아이콘을 사용하고 placeholder도 현재 언어 문자열에서 가져옵니다.
- value와 onChangeText로 상태를 앱이 소유하는 controlled 입력
- 기본 search return key와 onSubmitEditing 지원
- Provider의 strings.searchPlaceholder와 icons.search를 기본값으로 사용
설치와 최소 예제
SearchField: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { SearchField } from '@gj-kit/expo-ui';
<SearchField value={query} onChangeText={setQuery} onSubmitEditing={search} />접근성과 플랫폼 동작
플랫폼 TextInput의 기본 입력 의미론과 포커스 동작을 유지합니다. 검색 영역의 화면 제목이나 인접 라벨로 입력 목적이 분명해지도록 구성하는 것이 좋습니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.