feat: Run opacity CSS transitions on the Android platform path

[MatiPl01]

Routes opacity to the Android backend behind ANDROID_CSS_PLATFORM_TRANSITIONS, off by default.

Every CSS easing routes: a TimeInterpolator can carry any curve, and Kotlin rebuilds steps() and linear() stops from the same normalized points the loop uses, so nothing reimplements the easing spec across the boundary. Apple stays on linear and cubic-bezier, which is all CAMediaTimingFunction can express.

Stacked on #10060.

[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: ASSERTIVE

Plan: Pro Plus

Run ID: 03f3f73f-1c94-412f-85bc-e5da307e6c5c

📥 Commits

Reviewing files that changed from the base of the PR and between 50b1385 and 824b5c8.

📒 Files selected for processing (1)

• packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/css/CSSPlatformTransitionsManager.kt

---

📝 Walkthrough

Summary by CodeRabbit

• New Features

  • Added native Android CSS transitions for opacity animations.
  • Enabled the transition feature in the Android, macOS, and tvOS example configurations.

• Bug Fixes

  • Improved Android transition timing for delays, easing, and animations that have already started.

• Documentation

  • Clarified platform-specific CSS property and easing support for native transitions.

Walkthrough

This change adds the ANDROID_CSS_PLATFORM_TRANSITIONS flag, enables it in example applications, routes Android opacity transitions through native handling, and updates Android animator timing for delayed and elapsed transitions.

Changes

Android CSS platform transitions

Layer / File(s)	Summary
Feature flag configuration packages/react-native-reanimated/src/featureFlags/*, apps/*/package.json	Defines ANDROID_CSS_PLATFORM_TRANSITIONS as disabled by default and enables it in the Fabric, macOS, and tvOS example configurations.
CSS property routing packages/react-native-reanimated/Common/cpp/reanimated/CSS/utils/platform.*	When the flag is active on Android, native routing accepts all easing types but routes only the opacity property. Unsupported properties continue through the C++ loop.
Transition timing and startup packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/css/CSSPlatformTransitionsManager.kt	Uses HoldThenEase for explicit delay handling, includes delay in the animator duration, seeks elapsed transitions, and registers the animator after timeline setup.

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

Sequence Diagram(s)

sequenceDiagram
  participant CSSPlatformTransitionsManager
  participant ObjectAnimator
  participant HoldThenEase
  CSSPlatformTransitionsManager->>ObjectAnimator: configure delay-inclusive duration
  CSSPlatformTransitionsManager->>HoldThenEase: wrap configured easing
  ObjectAnimator->>HoldThenEase: interpolate elapsed transition
  CSSPlatformTransitionsManager->>ObjectAnimator: seek and start animator

Loading

Possibly related PRs

• software-mansion/react-native-reanimated#10060: Extends the Android CSS transition implementation and enables its property routing.
• software-mansion/react-native-reanimated#10090: Also modifies CSSPlatformTransitionsManager.kt and Android transition timing.
• software-mansion/react-native-reanimated#10170: Also changes Android CSS transition handling and property routing.

Suggested reviewers: pawicao, tjzel

🚥 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 summarizes the main change: enabling opacity CSS transitions on the Android platform path.
Description check	✅ Passed	The description accurately explains the Android feature flag, opacity routing, easing support, and platform behavior.

✨ 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/android-css-opacity-transitions

---

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

[MatiPl01]

Split into focused PRs, since this bundled routing, delay playback and teardown under a title describing only the first:

• feat: Route opacity CSS transitions to the Android platform path #10240 routes opacity to the platform path behind the flag (based on main, independent of this stack)
• fix: Play CSS transition delays inside the animation #10242 plays transition delays inside the animation
• fix: Drop Android CSS transition animators when the React context goes #10241 drops the animators and their listeners when the React context goes