chore: add a CSS transition callbacks example screen

[MatiPl01]

Adds a Transition Callbacks screen to the CSS example app, next to the existing Animation Callbacks one, so the transition lifecycle props can be exercised by hand.

A config selector drives the settings, so transitionProperty, transitionDuration and transitionDelay can be added, removed or retuned while the example runs. Duration and delay take a value per property, which makes it easy to see that each property keeps its own timeline. Trigger changes the style, Unmount view interrupts a running transition, and the log records every callback with its elapsedTime next to the time since the trigger, which makes the delay that elapsedTime excludes visible.

It lives under Miscellaneous, mirroring where the animation counterpart sits.

Demo

transitioncallbacksdemo.mp4

Verified on device and emulator. With width/opacity transitioned over 1s/2s and delays of 0s/500ms, the log reports start (width) right away and start (opacity) half a second later, then end (width) at 1.00s and end (opacity) at 2.00s, so elapsedTime stays free of the delay. Unmounting mid-flight reports cancel instead of end, and a 0s duration with no delay produces no transition and no events, matching the CSS rule that the combined duration has to be greater than zero.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6cc9676c-396e-4b43-97e0-b484e72c1591

📥 Commits

Reviewing files that changed from the base of the PR and between 55f3546 and 71bdc24.

📒 Files selected for processing (1)

• apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/TransitionCallbacks.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 5 remain after this review.

---

📝 Walkthrough

Walkthrough

Adds a “Transition Callbacks” screen to the CSS transitions examples. The screen uses selectable transition configurations, cycles shared style states, supports preview unmounting, displays optional style-change visualization, and logs callback events with event counts and a clear action. The screen is exported and registered under the miscellaneous transitions routes.

Possibly related PRs

• software-mansion/react-native-reanimated#10120: Adds CSS transition lifecycle events exercised by this example.
• software-mansion/react-native-reanimated#10124: Implements transition callback behavior exercised by this example.
• software-mansion/react-native-reanimated#10341: Adds documentation and examples for the same transition callback APIs.

Suggested labels: lib: Reanimated

🚥 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 and concisely identifies the new CSS transition callbacks example screen.
Description check	✅ Passed	The description explains the new screen, its transition callback controls, event logging, placement, and verification results.

---

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)

apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/TransitionCallbacks.tsx (1)

69-71: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Use performance.now() for all transition interval timestamps.

Replace all three Date.now() calls with performance.now(). Mixing clock sources can produce incorrect or negative intervals.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 1887b61b-b4cd-4184-bf18-c024b63b7fcc

📥 Commits

Reviewing files that changed from the base of the PR and between 1c9026a and 55f3546.

📒 Files selected for processing (1)

• apps/common-app/src/apps/css/examples/transitions/screens/miscellaneous/TransitionCallbacks.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 6 remain after this review.