One Engine to Animate Them All: React Native Animated in C++

on YouTube ↗22m

" summary

Meta replaces four separate native animated implementations with a single shared C++ engine built as a TurboModule using JSI and ships it as a cross‑platform runtime. The rewrite eliminates recurring bugs—opacity flicker, mid‑gesture view overrides that make buttons unclickable, and carousel glitches—improves startup on some Facebook flows, adds integration tests, and lands in Canary (0.87) with rollouts to Android, iOS, macOS, and Windows while keeping backward compatibility and the existing JS Animated API.

AI-written summary · about

" chapters (14)

1. 0:00React Native animation challenges
2. 1:54Animation in React Native threads
3. 3:39Native-driven animation with Fabric
4. 5:03Handling gestures with native driver
5. 6:47Instagram VR animation struggles
6. 8:16Cross-platform rewrite of animated module
7. 10:02Backward compatibility in new runtime
8. 11:05Production testing and performance
9. 12:32Debugging flickering and sync
10. 15:40Fixing unresponsive buttons
11. 17:06Solving carousel flickering
12. 18:52Final improvements and adoption
13. 19:35Future of layout animation
14. 20:38Release timeline and feedback

" related talks

• 46mAnimations in React NativeNiya Panamdanam · Connect.Tech 2021
• 25mJust use platformKrzysztof Magiera · App.js Conf 2019
• 29mAdvanced React NativeIlya Ivanov · OdessaJS 2018
• 30mMicrointeractions & Animations in React Native: Help users understand the UICatalin Miron · React Day Berlin 2019
• 28mDemystifying complex animations creation process in React NativeVladimir Novick · React Native EU 2018
• 44mHow Animations Work Under the Hood in React NativeEvgeniy Prokopev · HolyJS 2023 Spring
• 28mThe Power of InterpolationMike Grabowski · React Day Berlin 2017
• 10mReact Native, your UX superheroNoemi Rozpara · React Alicante 2019