Animations in React Native
summary
Explains why Animated API throttles when the JavaScript thread computes every 16ms and shows the concrete fix of using useNativeDriver to serialize values and avoid frame drops, plus limits like no color animation or layout transitions and animatedEvent not working with bubbling events. Compares libraries: physics-based react-spring for springy SVG loaders, react-native-reanimated v2 using worklets and a separate JS context for heavy gestures, and Moti (built on Reanimated) which combines entrance/exit and spring/timing demos that run smoothly after one Android tweak.
AI-written summary · about
chapters (9)
- 0:00Introduction to React Native animations
- 3:56Declarative vs imperative animations
- 7:47Performance issues with UI thread
- 16:35Limitations of Animated API
- 18:20Overview of animation libraries
- 19:04React Spring physics-based animations
- 24:03Moti library and Reanimated v2
- 30:25Live code demos and comparisons
- 42:37Q&A and closing remarks
related talks
25mReact Native <3 60FPS -- Improving React Native animations>
30mMicrointeractions & Animations in React Native: Help users understand the UI
27mReact Native로 Native한 애니메이션 구현하기
35mAnimations and gesture handling in React Native and native languages
44mHow Animations Work Under the Hood in React Native
31mAnimations in React Native
23mAnimated
28mDemystifying complex animations creation process in React Native