레이아웃 · SINCE v0.1.0
StickyActionBar — 하단 inset을 반영하는 StickyActionBar
웹에서는 sticky 하단 바, 네이티브에서는 safe-area 패딩을 합성할 수 있는 화면 액션 컨테이너입니다.
StickyActionBar 사용 시점과 역할
StickyActionBar는 주요 저장·완료 버튼을 화면 아래에 배치하고 bottomInset을 기본 패딩에 더합니다. 웹 sticky와 elevation은 제공하지만 키보드 회피와 실제 inset 측정은 앱이 소유합니다.
- 웹 position sticky와 bottom 0 동작
- bottomInset을 테마 하단 패딩에 합성
- 표면 색상, 상단 구분선과 elevation을 테마에서 적용
설치와 최소 예제
StickyActionBar: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { StickyActionBar } from '@gj-kit/expo-ui';
<StickyActionBar bottomInset={useBottomInset()}><Button label="완료" onPress={submit} /></StickyActionBar>접근성과 플랫폼 동작
컨테이너는 별도 의미를 만들지 않으며 내부 Button 등의 의미론을 유지합니다. 키보드가 포커스된 입력이나 액션을 가리지 않도록 앱 레이아웃에서 함께 조정해야 합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.