How Animations Work Under the Hood in React Native
summary
Explains how React Native animations work internally, covering the built-in animation system, why the Reanimated library was created, the need for a second JS thread, and the role of JSI. Focuses on performance and implementation details useful for RN developers, web developers learning RN internals, and native developers comparing cross-platform performance.
AI-written summary · about
chapters (38)
- 0:00Introduction
- 1:24React Native
- 3:52Animation problems
- 4:33Manual animation basics
- 5:36Parallax and accordion effects
- 7:48Animation performance
- 8:32Rendering architecture
- 10:17Bridge thread interaction
- 12:25Part 1 summary
- 13:06Native animation attempt
- 14:13Native driver limits
- 16:00Layout animation issues
- 17:03Reanimated intro
- 18:28Reanimated example
- 20:19Reanimated performance
- 20:44Complex UI with Reanimated
- 21:48Async issues
- 22:30JavaScript Interface role
- 24:18Modern RN architecture
- 25:22Reanimated in new arch
- 26:14Shared values in Reanimated
- 27:18Off-thread animation
- 27:39Large element testing
- 29:06Reanimated summary
- 30:13Animated vs Reanimated
- 30:54Q&A
- 31:58Worklets and state
- 33:02Animated vs Reanimated
- 34:08Memory between threads
- 35:14Reanimated failure cases
- 36:21Game animation perf
- 36:45Need for Reanimated
- 37:47Animation alternatives
- 38:27Tracking completion
- 38:48Debugging tools
- 40:15First Reanimated challenges
- 41:41Learning Reanimated
- 42:24Conclusion
related talks
46mAnimations in React Native
31mAnimations in React Native
30mMicrointeractions & Animations in React Native: Help users understand the UI
28mDemystifying complex animations creation process in React Native
27mReact Native로 Native한 애니메이션 구현하기
35mAnimations and gesture handling in React Native and native languages
26mReact Native: Under the Hood
53mHow React-Native shapes the way we think about native apps