Gesture Handler's Touchable: Button We Wish We Had Sooner
Article Summary
Jakub Piasecki from Software Mansion just solved React Native's button problem. After shipping 9 different button components, they built one to replace them all.
React Native Gesture Handler evolved into a mess of overlapping button components over the years. The team at Software Mansion recognized this during a consulting engagement with a large financial app and decided to consolidate everything into a single, powerful solution called Touchable.
Key Takeaways
- New Touchable component replaces 9 deprecated button components with one unified API
- 12% faster rendering than React Native's Pressable on flagship devices
- Animations run at platform level, respecting OS accessibility settings automatically
- Supports hover on mobile with mouse and Apple Pencil input
- Custom opacity, scale, and underlay for default, pressed, and hovered states
Touchable consolidates React Native Gesture Handler's fragmented button ecosystem into one component that's faster, more accessible, and highly customizable without JavaScript re-renders.
About This Article
Software Mansion's React Native Gesture Handler had 9 separate button components that did similar things, making it hard to know which one to use.
They merged all the button variants into one Touchable component. It lets you configure opacity, scale, underlay, and transition times. These run at the platform level using ObjectAnimator on Android and CoreAnimation on iOS.
Touchable renders 0.88x faster on Pixel 9 Pro compared to Pressable. It also respects OS accessibility settings like animation scale and reduce motion automatically, without needing JavaScript re-renders.