액션 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
FloatingActionButton — 화면의 대표 액션을 배치하는 FloatingActionButton
아이콘 전용·확장형 표현, 세 가지 크기와 가장자리 배치, safe-area inset을 지원하는 Expo·React Native FloatingActionButton입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
FloatingActionButton 사용 시점과 역할
FloatingActionButton은 화면에서 가장 중요한 생성·추가 액션을 절대 배치하는 프리미티브입니다. RTL을 따르는 bottom-start·bottom-center·bottom-end 배치와 토큰 기반 offset에 앱이 계산한 bottomInset을 합성하며, 아이콘만 쓰는 형태와 label을 포함한 확장형을 타입으로 구분합니다.
- sm·md·lg 크기와 primary·secondary 변형
- 가장자리 placement, 토큰 offset과 bottomInset 합성
- 아이콘 전용·확장형 계약 및 loading 중 중복 입력 차단
설치와 최소 예제
FloatingActionButton: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { FloatingActionButton } from '@gj-kit/expo-ui';
<FloatingActionButton icon={PlusIcon} accessibilityLabel="기록 추가" onPress={createEntry} bottomInset={inset} />접근성과 플랫폼 동작
button 역할과 disabled·busy 상태를 제공합니다. 아이콘만 보이는 형태는 accessibilityLabel이 필수이며, label이 있는 형태는 보이는 문자열을 기본 접근성 이름으로 사용합니다. sm 크기도 hitSlop으로 최소 입력 영역을 보완합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.