feat: report CSS transition events from the engine by MatiPl01 · Pull Request #10119 · software-mansion/react-native-reanimated

MatiPl01 · 2026-08-03T05:29:46Z

Emits CSS transition events from the engine and delivers them through the shared CSS events channel: transitionrun, transitionstart, transitionend and transitioncancel.

Properties whose rendering is routed to a platform transition temporarily track their lifecycle on the loop clock, so their events fire from common code until the platform can report its own. The subscription mask travels as a separate runCSSTransition argument rather than inside the config, where every key is read as a CSS property name. The mask is always empty for now because transition callbacks do not reach the transitions manager yet.

coderabbitai · 2026-08-03T05:29:53Z

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: 98e50984-7300-40e5-8b93-685d5ebfab3e

📥 Commits

Reviewing files that changed from the base of the PR and between c15a8d7 and a215235.

📒 Files selected for processing (1)

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp

📝 Walkthrough

Summary by CodeRabbit

New Features
- Added CSS transition lifecycle events, including creation, start, completion, and cancellation notifications.
- Added configurable event filtering for transition notifications.
- Added support for tracking platform-rendered properties during transitions.
- Extended transition APIs to accept event configuration across native and JavaScript layers.
Bug Fixes
- Improved transition cancellation, cleanup, and timing accuracy.
- Improved event handling when transitions are cancelled or removed.

Walkthrough

CSS transitions now track platform-routed properties and cancellation through CSSLoopTransition. Event masks configure milestone reporting and forward filtered transition events through CSSTransitionsRegistry and the native TypeScript API.

Changes

CSS transition lifecycle

Layer / File(s)	Summary
Loop transition tracking `packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.*`	Adds milestone reporter configuration, platform property tracking, and timestamped abort handling.
Transition lifecycle events `packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.*`	Tracks platform property lifecycles, maps milestones to filtered transition events, and aborts active transitions.
Registry event forwarding `packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.*`	Stores a `CSSEventsEmitter`, applies event masks, and forwards transition events.
Native API event-mask wiring `packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/`, `packages/react-native-reanimated/src/ReanimatedModule/`, `packages/react-native-reanimated/src/css/native/*`	Propagates the event mask through native and TypeScript APIs. Updates manager calls and test expectations to pass `0`.

Estimated code review effort: 4 (Complex) | ~45 minutes

Mergeability Score: ⚪ Minimal · up to a2152

The change adds CSS transition event reporting without any supplied evidence of an actionable current-head merge risk; it is merge-ready after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant Caller
  participant ReanimatedModuleProxy
  participant CSSTransitionsRegistry
  participant CSSTransition
  participant CSSEventsEmitter
  Caller->>ReanimatedModuleProxy: runCSSTransition(..., eventMask)
  ReanimatedModuleProxy->>CSSTransitionsRegistry: setEventMask
  ReanimatedModuleProxy->>CSSTransition: updateConfigOrRun
  CSSTransition->>CSSTransitionsRegistry: onTransitionEvent
  CSSTransitionsRegistry->>CSSEventsEmitter: emit CSS event

Possibly related PRs

software-mansion/react-native-reanimated#10057: Adds platform transition routing used by CSS transition lifecycle tracking.
software-mansion/react-native-reanimated#10060: Modifies CSS property routing and transition lifecycle handling.
software-mansion/react-native-reanimated#10070: Adds related CSS event-mask and cancellation propagation.

Suggested reviewers: wisniewskij

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
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.
Title check	✅ Passed	The title clearly describes the main change: reporting CSS transition events from the engine.
Description check	✅ Passed	The description directly explains CSS transition event reporting, lifecycle tracking, and event mask handling.

✨ 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-transition-callbacks

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

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

coderabbitai

Actionable comments posted: 1

🤖 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.

Inline comments:
In
`@packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp`:
- Around line 49-90: Update CSSTransition::trackPlatformLifecycles so each
removed platform-routed property is aborted before being removed from
loopTransition_, using a property-scoped CSSLoopTransition operation rather than
the all-properties abort. Preserve removal for unrelated properties, and add
coverage for removing an active platform-routed property when TransitionCancel
is enabled.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 3afcc0e9-dc45-4aa9-9b0c-41afcdb8928e

📥 Commits

Reviewing files that changed from the base of the PR and between fcae3bc and 22003a1.

📒 Files selected for processing (14)

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.cpp
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.h
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.h
packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.cpp
packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.h
packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.cpp
packages/react-native-reanimated/Common/cpp/reanimated/NativeModules/ReanimatedModuleProxy.h
packages/react-native-reanimated/src/ReanimatedModule/NativeReanimated.ts
packages/react-native-reanimated/src/ReanimatedModule/js-reanimated/JSReanimated.ts
packages/react-native-reanimated/src/ReanimatedModule/reanimatedModuleProxy.ts
packages/react-native-reanimated/src/css/native/managers/CSSTransitionsManager.ts
packages/react-native-reanimated/src/css/native/managers/__tests__/CSSTransitionsManager.test.ts
packages/react-native-reanimated/src/css/native/proxy.ts

coderabbitai

Actionable comments posted: 1

🤖 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.

Inline comments:
In
`@packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.h`:
- Around line 60-63: Update CSSLoopTransition::removeProperties and related
removal paths to abort each active property with RunMilestone::Aborted before
removing its provider, exposing a property-scoped abort-and-remove API in
CSSLoopTransition.h. Use this scoped operation for discrete-property handling
and dynamic diffs in CSSLoopTransition.cpp, and for removed platform or evicted
properties in CSSTransition.cpp; do not call CSSLoopTransition::abort, which
cancels unrelated properties. Add regression coverage verifying TransitionCancel
for active property removal. Affected sites:
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.h
lines 60-63 (add API); CSSLoopTransition.cpp lines 112 and 144 (use it), lines
166-174 (abort before removal); CSSTransition.cpp lines 73-75 and 140-142 (use
it).

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0d2cacbf-26ab-4ba8-aed4-edb2c3c8aec0

📥 Commits

Reviewing files that changed from the base of the PR and between 22003a1 and c15a8d7.

📒 Files selected for processing (5)

packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.cpp
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.h
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp
packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.h
packages/react-native-reanimated/Common/cpp/reanimated/CSS/registries/CSSTransitionsRegistry.cpp

Makes `onTransitionRun`, `onTransitionStart`, `onTransitionEnd` and `onTransitionCancel` fire on iOS and Android. They already work on web, and the shared types promised them everywhere, but native dropped them. The per-view callbacks manager now holds one callback store per CSS kind. Each store names its own prop table, keeps its own mask, builds its own payload shape and narrows the event type with its own predicate, so an event is routed by exactly one lookup and neither kind can read the other table. Only the masks cross the JSI boundary, never the user functions, and the transition mask is diffed so an unchanged set of callbacks costs no native call. Callbacks are passed inside `style`, alongside the other CSS config props. Stacked on #10119.

CSSTransition::trackPlatformLifecycles (#10119) registers a progress provider for a platform-routed property purely to report its lifecycle events, and never creates an interpolator for it. interpolate() indexed the interpolator map with an unchecked at() for every provider, so a routed transition with a callback prop attached aborted the app with std::out_of_range. Mark those providers as platform-driven and skip them when interpolating; any other provider without an interpolator still asserts in dev, so a genuine desync between the two collections is not silently swallowed.

github-actions Bot added the lib: Reanimated label Aug 3, 2026

MatiPl01 self-assigned this Aug 3, 2026

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch 2 times, most recently from 64bf2e8 to f7097a0 Compare August 3, 2026 07:42

MatiPl01 changed the title ~~feat: report the lifecycle milestones a transition crosses~~ feat: report CSS transition events from the engine Aug 3, 2026

MatiPl01 changed the base branch from @matipl01/css-animation-callbacks-js to @matipl01/transition-progress-changes August 3, 2026 07:49

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from f7097a0 to 17a3976 Compare August 3, 2026 08:01

MatiPl01 mentioned this pull request Aug 3, 2026

feat: CSS transition callbacks on native #10124

Merged

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 17a3976 to 9636aef Compare August 3, 2026 09:16

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 8656f8e to 6e36da2 Compare August 3, 2026 10:22

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 0e1eb39 to 7b8b275 Compare August 3, 2026 10:22

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 6e36da2 to fcae3bc Compare August 11, 2026 18:03

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 7b8b275 to 22003a1 Compare August 11, 2026 18:03

coderabbitai Bot reviewed Aug 11, 2026

View reviewed changes

Comment thread packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSTransition.cpp

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch 2 times, most recently from 0b83466 to c15a8d7 Compare August 11, 2026 23:41

coderabbitai Bot reviewed Aug 11, 2026

View reviewed changes

Comment thread packages/react-native-reanimated/Common/cpp/reanimated/CSS/core/transition/CSSLoopTransition.h

coderabbitai Bot mentioned this pull request Aug 11, 2026

feat: report the lifecycle milestones a transition crosses #10120

Closed

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from fe67b48 to 364f1cd Compare August 11, 2026 23:51

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from c15a8d7 to 6ab43fc Compare August 11, 2026 23:51

coderabbitai Bot mentioned this pull request Aug 11, 2026

chore: report the lifecycle milestones a run crosses #10074

Merged

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 364f1cd to 0799825 Compare August 12, 2026 07:50

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 6ab43fc to bec2b76 Compare August 12, 2026 07:51

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 0799825 to 2768e15 Compare August 12, 2026 08:07

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from bec2b76 to 50d3234 Compare August 12, 2026 08:07

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 2768e15 to 4bfe7be Compare August 12, 2026 08:29

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 50d3234 to e2ff0a2 Compare August 12, 2026 08:29

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 4bfe7be to 4152615 Compare August 12, 2026 09:06

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from e2ff0a2 to 8b356d3 Compare August 12, 2026 09:06

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from b827c72 to 4535ccd Compare August 13, 2026 07:10

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 32e0611 to 5e204de Compare August 13, 2026 07:10

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 4535ccd to 2b55e26 Compare August 13, 2026 07:40

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 5e204de to f70e04b Compare August 13, 2026 07:40

coderabbitai Bot mentioned this pull request Aug 13, 2026

feat: take the CSS lifecycle callbacks as props #10252

Merged

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 2b55e26 to eb1671c Compare August 13, 2026 09:36

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from f70e04b to 116d8e1 Compare August 13, 2026 09:36

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from eb1671c to 4dcac97 Compare August 13, 2026 11:33

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 116d8e1 to a215235 Compare August 13, 2026 11:33

MatiPl01 marked this pull request as ready for review August 13, 2026 12:53

MatiPl01 force-pushed the @matipl01/transition-progress-changes branch from 4dcac97 to a6b31d3 Compare August 13, 2026 13:00

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from a215235 to 0ef68d8 Compare August 13, 2026 13:00

Base automatically changed from @matipl01/transition-progress-changes to main August 13, 2026 14:07

MatiPl01 requested a review from tjzel August 13, 2026 14:11

MatiPl01 added 6 commits August 13, 2026 16:11

Emit CSS transition events from the engine

98206e3

Drop the tracked removals comment

4575695

Mark the loop-clock tracking of platform properties as temporary

00c2e0b

Fold the platform lifecycle bookkeeping into one helper

d3f8dbb

Rename onMilestone to setMilestoneReporter

18e3f55

Report a transition cancel when the transition is torn down

8d1a4a2

tjzel approved these changes Aug 13, 2026

View reviewed changes

MatiPl01 force-pushed the @matipl01/css-transition-callbacks branch from 0ef68d8 to 8d1a4a2 Compare August 13, 2026 14:15

MatiPl01 merged commit 0981310 into main Aug 13, 2026
2 checks passed

MatiPl01 deleted the @matipl01/css-transition-callbacks branch August 13, 2026 14:28

coderabbitai Bot mentioned this pull request Aug 13, 2026

chore: prefix the CSS lifecycle callbacks with onCSS #10273

Merged

Navigation Menu

Repository navigation

feat: report CSS transition events from the engine - #10119

feat: report CSS transition events from the engine#10119
MatiPl01 merged 6 commits into
mainfrom
@matipl01/css-transition-callbacks

MatiPl01 commented Aug 3, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 3, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

MatiPl01 commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MatiPl01 commented Aug 3, 2026 •

edited

Loading

coderabbitai Bot commented Aug 3, 2026 •

edited

Loading