Making React Native Gestures Feel Natural
Article Summary
Andrew Lo from Shopify reveals why your React Native gestures feel clunky. The fix? Two simple physics principles most developers ignore.
Shopify's Staff Front End Developer breaks down how the Shop app's draggable Sheet component went from frustrating to delightful. Using real examples with code, he shows how velocity tracking and spring animations transform basic gesture handlers into interactions that feel natural.
Key Takeaways
- Track velocity, not just position: multiply event.velocityY by 0.5 to predict user intent
- Replace fixed duration timing with withSpring for physics-based animations
- Add resistance by dividing drag distance by 5 when users exceed boundaries
- Spring animations automatically adjust speed based on distance and momentum
Incorporating velocity tracking and spring-based animations makes draggable components respond naturally to user intent instead of just finger position.
About This Article
Shopify's Sheet component used a fixed 600ms animation to reach its destination, no matter how far it traveled. This made small movements feel slow and large movements feel rushed.
Andrew Lo switched from the fixed-duration Easing.out(Easing.exp) animation to withSpring. The spring animation calculates speed based on distance and velocity using physics parameters, with damping set to 5.
The Sheet now animates based on what actually happens. Closer positions finish quickly while momentum from fast flicks carries through to the end. It feels responsive to what the user does instead of following a preset timer.
