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

This project started with a hard constraint: we were working on a new platform for React Native where the existing Java-based Animated implementation simply couldn't run. A C++ engine was the only path forward. Since C++ TurboModules became available with the New Architecture, we thought it would be a good idea to create a cross-platform solution rather than introduce a 5th native animated module -- there were already 4. What began as a pragmatic solution grew into something much bigger. We rewrote React Native's entire native animated system in C++, converging separate platform implementations into one, and rolled out to a number of Meta products. The converged implementation gives the same features to all platforms adopting it. For example, RN Windows apps got native-driven color animation, sticky headers, and operation batching for free. And when an internal customer requested platform color support for system-level theming, we only had to implement the core functionality once. We were also able to better cover the system with unit and integration tests, with peace of mind that it works the same across platforms. But convergence was just the starting point. The old system was built on RN's old architecture -- it directly manipulated host views, leading to bugs like unclickable Pressables after animation, animation tearing, and flickering during gesture animations. We also disabled native layout prop animation because animations weren't synced to Fabric and React mid-flight, a limitation that frequently confuses developers. There were also a series of workarounds for this limitation that had caused bugs in production. With the C++ engine, we fixed most of these fundamental architectural problems by synchronizing animation state through ShadowTree commits instead of empty React updates, integrating deeply with the New Architecture, and handling gesture events more smoothly. For layout animation specifically, the C++ engine didn't fully address it, but it introduced the architecture that makes it possible. We started collaborating with Software Mansion on the Shared Animation Backend, which shipped in React Native 0.85.1 -- it builds a platform-agnostic layer underneath that synchronizes animation and React states even more tightly, with their strong expertise in animation, and actually unlocks animation on layout and many more props. I'll walk through the architecture and demo the before/after of issues and bugs that existed for years and are now fixed.