GitHubCreative Dev & WebGLtech-infocode

mrousavy/react-native-pressable-opacity

mrousavy·@mrousavy·Jun 16, 2022

개요 React Native를 위한 `<PressableOpacity>`와 `<NativePressableOpacity>` 컴포넌트다. 터치 시 투명도 피드백을 제공하는 단순하지만 성능 최적화된 버튼 컴포넌트다.

핵심 내용 `<PressableOpacity>`는 Reanimated 기반으로 JS 스레드 없이 네이티브에서 직접 opacity 애니메이션을 처리한다. `<NativePressableOpacity>`는 iOS의 UIButton 스타일 피드백을 네이티브로 구현한다.

기존 대비 차별점 기존 TouchableOpacity는 JS 스레드에서 opacity를 처리해 heavy render 상황에서 피드백이 느릴 수 있다. 이 컴포넌트는 네이티브 스레드에서 직접 처리해 항상 즉각적인 터치 피드백을 보장한다.

활용 가능성 React Native 앱의 버튼, 카드, 리스트 아이템 등 모든 터치 가능 영역에서 부드러운 opacity 피드백을 제공하는 데 활용할 수 있다.

참고 자료 - 원본

TypeScript52
#react-native#pressable#opacity#touch-feedback

Related in Creative Dev & WebGL