React Native <3 60FPS -- Improving React Native animations>
summary
Explains actual tradeoffs: Animated.js builds a value graph (~1,900 LOC) that runs in JS every frame and suffers at least a one‑frame input latency; moving the graph into the UI thread via native-animated-driver and toggling useNativeDriver: true runs animations on Android natively, preserves 60FPS, and avoids JS stalls, but supports only a subset of Animated (no layout properties) and still incurs occasional JS fallbacks. Demonstration code exists and the offload approach works end to end.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 0:49React Relay Graph
- 1:05Why animations are important
- 1:53Native components
- 3:50Benefits of animations
- 4:48Layout animations
- 7:56API
- 8:36Animatedjs
- 12:36Animating values
- 16:39UI Thread
- 20:15Vsync
- 21:33Perfect Monitor
- 22:21Floating Animations
related talks
27mReact Native로 Native한 애니메이션 구현하기
46mAnimations in React Native
29mPerformance Limitations of React Native and How to Overcome Them
30mLiving in an async world of React Native
27mDeclarative future of gestures and animations in React Native
27mMoving Beyond Animations to User Interactions at 60 FPS in React Native
10mReact Native, your UX superhero
29mAdvanced React Native