chore(CSS): cover backgroundImage animations on device and in the examples

[MatiPl01]

Note

This pull request was authored by AI on behalf of @MatiPl01.

Summary

Covers the native backgroundImage animation path added in #10590:

• a cssBackgroundImage on-device suite: smooth interpolation of compatible gradients, to-only keyframes with and without an underlying gradient, explicit none and [] at every offset, discrete switching for a different stop count, linear vs radial and a different layer count, natural completion and forwards fill, transitions that add or remove a gradient with and without allow-discrete, and platform-color stops,
• a Background Image screen in the CSS animation examples, including animations from and to no gradient,
• a note in the supported properties docs on when gradients interpolate and when they switch.

Test plan

yarn workspace fabric-example runtime-tests --library reanimated --platform ios --udid <udid> --only cssBackgroundImage
yarn workspace fabric-example runtime-tests --library reanimated --platform android --serial <serial> --only cssBackgroundImage

27 tests, green on iOS (iPhone Air, iOS 26.5, Release) and Android (API 34 emulator, Debug). The example screen is CSS animations > Animated properties > Appearance > Background Image.

Changelog

No package code changes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: f6944904-1623-4a54-b418-877ad329ef2a

📥 Commits

Reviewing files that changed from the base of the PR and between 1f32e6e and 716215c.

📒 Files selected for processing (1)

• apps/common-app/runtime-tests/reanimated/tests/props/cssBackgroundImage.test.tsx

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

---

📝 Walkthrough

Walkthrough

The change adds runtime coverage for CSS backgroundImage animations and transitions. It registers the new suite, tests gradient interpolation and discrete behavior, and covers platform colors and completion states. It adds a Background Image example with linear and radial gradients and wires it into the appearance routes. The documentation lists backgroundImage support on Android and iOS and describes its interpolation rules.

Priority: ⬇️ Low

Change: Other

Merge Risk: ⚪ Minimal · up to 71621

The added runtime coverage change has no identified merge-blocking risk.

🚥 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 changes: device coverage and examples for CSS backgroundImage animations.
Description check	✅ Passed	The description directly explains the runtime tests, example screen, documentation updates, test plan, and absence of package code changes.

---

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]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 0591106a-fcdb-4a19-b645-69e6f2bfb37f

📥 Commits

Reviewing files that changed from the base of the PR and between 2469eba and 75e95ea.

📒 Files selected for processing (6)

• apps/common-app/runtime-tests/reanimated/suites.ts
• apps/common-app/runtime-tests/reanimated/tests/props/cssBackgroundImage.test.tsx
• apps/common-app/src/apps/css/examples/animations/routes/properties/base.ts
• apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/BackgroundImage.tsx
• apps/common-app/src/apps/css/examples/animations/screens/animatedProperties/base/appearance/index.ts
• docs/docs-reanimated/docs/guides/supported-properties.mdx

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

[coderabbitai]

Caution

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

⚠️ Outside diff range comments (1)

🟡 Minor · Hide the Background Image route on Web. · base.ts:155-158

apps/common-app/src/apps/css/examples/animations/routes/properties/base.ts:155-158
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Hide the Background Image route on Web. labelTypes only renders badges, so this route remains reachable without displayed: !IS_WEB. The supported-properties documentation marks backgroundImage as unsupported on Web. Add the established Web visibility guard to prevent users from opening an unsupported example.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Advanced

Run ID: 97d6ddb2-d176-4b81-a3af-8a1bc6469a56

📥 Commits

Reviewing files that changed from the base of the PR and between 1c21b2e and 1f32e6e.

📒 Files selected for processing (1)

• apps/common-app/runtime-tests/reanimated/tests/props/cssBackgroundImage.test.tsx

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

[MatiPl01]

Closing: the backgroundImage feature stays in #10193; the runtime suite, example and docs changes from here become commits on that branch.