React Native: Building Fluid User Experiences
summary
An Animated library for React Native maps gesture inputs to outputs by wiring dx/dy to Animated.ValueXY and using pan responder events, springs, interpolations and a layout animation ease in/out to get near 60 fps. The demo implements drag‑to‑reorder grid, pop‑scale spring, bobbles and chained stickers with decay, scroll‑linked transforms, and an opening transition that animates layout and colors. Implementation runs in JS now, can serialize to native for faster back ends, and already ships the output half in iOS and Android apps.
AI-written summary · about
chapters (12)
- 0:00Start
- 1:00Fluid Interactions
- 4:24Gratuitous Animation Demo App
- 9:00Spring Animation
- 10:23Animated Style
- 11:30Layout Animation System
- 12:54Opening Animation
- 16:56Dismissal Dismissal Gesture
- 20:04Adlistener
- 21:16Pan Listener
- 27:14Scrolling
- 29:25Interpolation
related talks
30mMicrointeractions & Animations in React Native: Help users understand the UI
28mDemystifying complex animations creation process in React Native
36mMake Your Apps Move! Awesome Animations with React Native ⚡️
22mCan it be done in React Native
27mMoving Beyond Animations to User Interactions at 60 FPS in React Native
10mReact Native, your UX superhero
34mGestures here. Gestures there. Gestures everywhere!
35mAnimations and gesture handling in React Native and native languages