Skip to content

Add Animation Backend integration#8875

Draft
coado wants to merge 74 commits intosoftware-mansion:mainfrom
coado:animated_backend_integration
Draft

Add Animation Backend integration#8875
coado wants to merge 74 commits intosoftware-mansion:mainfrom
coado:animated_backend_integration

Conversation

@coado
Copy link
Contributor

@coado coado commented Jan 27, 2026

Summary

This diff adds reanimated integration with the react-native animation backend. It enables CSS animations and transitions to emit mutations using AnimatedProps structure, allowing the animation backend to receive the expected style directly and avoiding parsing the folly::dynamic object. For that, interpolator factories were extended to accept a method that handles packing and adding progressed CSSValue for particular prop using AnimatedPropsBuilder. Updates from props builder are then added to the new updatesBatchAnimatedProps. Only props from the VIEW_INTERPOLATORS are supported by the animation backend.

The AnimatedPropsBuilder is created in CSSTransitionRegistry or CSSAnimationRegistry and passed through CSSAnimations and CSSTransitions update methods down to the particular interpolators from which the packing callbacks are invoked.

The new feature flag USE_ANIMATION_BACKEND is introduced to gate the animation backend connection and collecting updates in updatesBatchAnimatedProps.

The backwardsFillMode does not work properly because the initial props styles are not collected in the ReanimatedCommitHook::shadowTreeWillCommit.

On Android when the props reconciliation is disabled it is required to pass non-layout props using rawProps as a folly::dynamic object. When it's enabled, updates can be distributed using AnimatedProps format.

There are three updates batches used in performOperationsForBackend:

  • cssUpdatesBatch - used on Android when the props reconciliation is disabled to collect updates for non-layout props,
  • animatedUpdatesBatch - stores updates from AnimatedPropsRegistry,
  • animatedPropsUpdatesBatch - stores updates in AnimatesProps for all props on IOS. On Android for layout props when the props reconciliation is disabled and when enabled, stores all props as well.

Interpolators will not add updates to the AnimatedPropsBuilder for the non-layout props when the props reconciliation is disabled on Android. This leaves place for the non-layout updates collected in the cssUpdatesBatch.

Test plan

Tested on reanimated example app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant