드래그 가능한 유리 알약 인디케이터와 곡선형 리퀴드 글래스 효과를 갖춘 Expo Router용 하단 탭 바
요약
Expo Router에서 사용할 수 있는 곡선형 리퀴드 글래스 효과의 하단 탭 바 컴포넌트입니다. Skia와 Reanimated를 활용하여 드래그 가능한 유리 알약 인디케이터와 부드러운 애니메이션을 구현했습니다.
핵심 포인트
- Skia를 이용한 아치형 디자인 및 리퀴드 글래스 질감 렌더링
- Reanimated의 듀얼 스프링 시스템으로 자연스러운 애니메이션 구현
- Gesture Handler를 통한 드래그 가능한 유리 알약 인디케이터 제공
- Expo Router의 tabBar 속성과 즉시 연동 가능한 컴파운드 패턴 적용
곡선형 리퀴드 글래스 (liquid glass) 효과와 드래그 가능한 유리 알약 (glass pill) 인디케이터를 특징으로 하는 Expo Router 하단 탭 바입니다.
https://
github.com/rit3zh/expo-curved-bottom-tabs
아치형 디자인과 리퀴드 글래스 (liquid glass) 질감을 가진 Expo 하단 탭 바 컴포넌트입니다. 중앙의 유리 알약은 손가락으로 드래그할 수 있으며, 특정 탭 위에서 손을 떼면 해당 탭으로 이동합니다. 하단의 아치는 Skia를 사용하여 렌더링되며, Reanimated의 듀얼 스프링 (dual-spring) 시스템이 알약의 애니메이션을 구동합니다 (앞쪽 가장자리는 빠르게 스냅되고, 뒤쪽 가장자리는 부드럽게 따라옵니다). Gesture Handler가 드래그 제스처를 관리합니다. 컴포넌트 인터페이스는 컴파운드 패턴 (compound pattern)을 따르므로, Expo Router의 tabBar 속성에 바로 연결하여 사용할 수 있습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 X @qingq77 (검증됨)의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기0