Make Your Apps Move! Awesome Animations with React Native ⚡️
summary
Builds an Apple Wallet–style card gallery using React Native with a custom scroll (not FlatList), react-native-reanimated for shared values, springs, damping and decay, and react-native-gesture-handler for touch; implements a shared element transition by turning Expo Image into an animated component and passing a unique tag; fixes jitter by disabling the gesture via runOnJS and restores previous scroll positions; works demoing smooth spring physics and three-line shared transitions, but warns about performance, testing and overuse.
AI-written summary · about
chapters (13)
- 0:00Talk overview
- 1:07Why animations matter
- 3:36Key UX benefits
- 6:51React Native animations
- 8:57Reanimated library
- 9:59Physics of natural animations
- 14:29Apple Wallet gallery
- 16:45Scroll and gesture handling
- 23:29Locking scroll on card
- 25:36Card stacking and height
- 28:46Shared transitions
- 33:05Animation pros and cons
- 35:17Q&A
related talks
30mMicrointeractions & Animations in React Native: Help users understand the UI
22mCan it be done in React Native
35mReact Native: Building Fluid User Experiences
28mDemystifying complex animations creation process in React Native
17mThe art of React Native: How to make your app stand out
35mAnimations and gesture handling in React Native and native languages
34mGestures here. Gestures there. Gestures everywhere!
46mAnimations in React Native