feat: CSS animation callbacks on native

[MatiPl01]

Makes onAnimationStart, onAnimationEnd, onAnimationIteration and onAnimationCancel fire on iOS and Android. They already work on web, and the shared types promised them everywhere, but native dropped them.

Callbacks are passed inside style, alongside the other CSS config props. Only the subscription mask crosses the JSI boundary, never the user function, and it is pushed to C++ only when the set of present callbacks changes.

A cancel emitted while the view is unmounting is still dropped here; #10255 delivers it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 60559f17-44f7-4bfd-87db-ca5cd0be74b0

📥 Commits

Reviewing files that changed from the base of the PR and between 0fbbac2 and 7d427d7.

📒 Files selected for processing (2)

• packages/react-native-reanimated/src/css/native/managers/CSSCallbacksManager.ts
• packages/react-native-reanimated/src/css/native/managers/__tests__/CSSCallbacksManager.test.ts

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added support for CSS animation callbacks, including animation start and cancellation events.
  • Callback registrations now synchronize with running animations and are automatically managed during mounting and unmounting.
  • Expanded CSS event exports and event-mask support for more efficient native event handling.

• Bug Fixes

  • Improved callback delivery when callbacks are added, removed, or changed while animations are active.
  • Prevented unsupported transition events from triggering animation callbacks.
  • Ensured cancellation events are handled correctly during animation detachment and cleanup.

Walkthrough

Native CSS animation callbacks now use event masks. CSSCallbacksManager registers callbacks, filters native events, and dispatches animation callbacks. CSSManager synchronizes callbacks and passes masks to CSSAnimationsManager, which updates native animation state when masks change.

Changes

Native CSS animation callbacks

Layer / File(s)	Summary
CSS event mask contract packages/react-native-reanimated/src/css/native/events/*, packages/react-native-reanimated/src/css/native/types/animation.ts, packages/react-native-reanimated/src/css/native/events/__tests__/mask.test.ts	Exports CSS event types and masks. Maps animation callback properties to combined event masks.
Callback and animation manager wiring packages/react-native-reanimated/src/css/native/managers/CSSCallbacksManager.ts, packages/react-native-reanimated/src/css/native/managers/CSSManager.ts, packages/react-native-reanimated/src/css/native/managers/CSSAnimationsManager.ts	Synchronizes callback registrations, dispatches supported animation events, propagates event masks, and resets masks during detachment.
Manager behavior validation packages/react-native-reanimated/src/css/native/managers/__tests__/*	Tests event-mask updates, callback delivery, registration lifecycle, callback removal, detachment, and unmount cleanup.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Mergeability Score: ⚪ Minimal · up to 7d427

The PR adds native CSS animation callbacks without any actionable merge-blocking risk remaining; it is merge-ready after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant CSSManager
  participant CSSCallbacksManager
  participant cssCallbacksRegistry
  participant CSSAnimationsManager
  CSSManager->>CSSCallbacksManager: synchronize animation callbacks
  CSSCallbacksManager->>cssCallbacksRegistry: register callback subscriber
  CSSManager->>CSSAnimationsManager: apply animation event mask
  cssCallbacksRegistry->>CSSCallbacksManager: deliver native CSS animation event
  CSSCallbacksManager->>CSSManager: invoke mapped callback

Loading

Possibly related PRs

• software-mansion/react-native-reanimated#10068: Introduces CSSCallbackStore, which CSSCallbacksManager extends.
• software-mansion/react-native-reanimated#10070: Adds related callback registration and event-mask propagation.
• software-mansion/react-native-reanimated#10107: Introduces CSS event infrastructure used by callback dispatch.

Suggested reviewers: tjzel

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the main change: native CSS animation callbacks for iOS and Android.
Description check	✅ Passed	The description directly explains the native CSS animation callback support and its implementation constraints.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch @matipl01/css-animation-callbacks-js

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.native.tsx (1)

146-180: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Render settled props when no settled style exists.

_syncStylePropsBackToReact can populate state.settledProps without populating state.settledStyle when all settled keys come from animatedProps or inline top-level props. The render condition checks only state.settledStyle, so those completed animated props are not rendered by React.

Gate on either settled state field, and add the style override only when settledStyle exists.

Proposed fix

-    if (FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS && this.state.settledStyle) {
+    if (
+      FORCE_REACT_RENDER_FOR_SETTLED_ANIMATIONS &&
+      (this.state.settledStyle || this.state.settledProps)
+    ) {
+      const settledStyle = this.state.settledStyle;
       return super.render({
         nativeID,
         ...filteredProps,
         ...this.state.settledProps,
-        style: [...flattenArray(filteredProps.style), this.state.settledStyle],
+        ...(settledStyle
+          ? { style: [...flattenArray(filteredProps.style), settledStyle] }
+          : {}),
         ...jestProps,
       });
     }

Also applies to: 445-450

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.native.tsx`
around lines 146 - 180, Update the render condition that applies settled state
to check whether either settledProps or settledStyle exists, so completed
animated props render even without settled styles. Only add the style override
when settledStyle is present, preserving the existing behavior for absent
settled state.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In
`@packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.native.tsx`:
- Around line 146-180: Update the render condition that applies settled state to
check whether either settledProps or settledStyle exists, so completed animated
props render even without settled styles. Only add the style override when
settledStyle is present, preserving the existing behavior for absent settled
state.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8d1c823a-6c3d-4689-abbb-b427991b1c21

📥 Commits

Reviewing files that changed from the base of the PR and between c21f678 and ad289d9.

📒 Files selected for processing (7)

• packages/react-native-reanimated/src/createAnimatedComponent/AnimatedComponent.native.tsx
• packages/react-native-reanimated/src/css/component/AnimatedComponent.native.tsx
• packages/react-native-reanimated/src/css/native/events/index.ts
• packages/react-native-reanimated/src/css/native/events/mask.ts
• packages/react-native-reanimated/src/css/native/managers/CSSCallbacksManager.ts
• packages/react-native-reanimated/src/css/native/managers/__tests__/CSSCallbacksManager.test.ts
• packages/react-native-reanimated/src/css/native/managers/__tests__/CSSManager.test.ts

[tjzel]

just one nit