Conversation
Array-valued style properties (boxShadow, transformOrigin) were split into per-index keyframes during normalization, so an explicit empty array was indistinguishable from an omitted one and the array interpolator only ever knew about the animated layers. An explicit [] therefore showed the view's own shadows, a to-only animation over a two-layer base lost the second layer, and fillMode: 'none' restored a truncated list. Arrays now stay whole through normalization; null marks an omitted endpoint and resolves to the complete underlying array, [] is an explicit empty value, shorter explicit lists are padded with the child default, and the discrete fallback returns the authored endpoints. One incompatible pair (inset vs outset) makes the whole list discrete. 'none' normalizes to [] for shadows and transforms, and the transition path distinguishes [] from an unspecified value.
The object form of backgroundImage accepted a transition hint at the start or end of the stop list, or next to another hint, although the string form already rejected those placements. React Native does not check them either: iOS throws on a leading colorless stop and Android draws it transparent. Both forms also accepted gradients with zero or one color stop, which Android cannot build a shader from. Hints now need a color stop on both sides and a gradient needs at least two color stops; the object form throws like its other validations, the string form drops the gradient the way it drops every other invalid string.
Adds CSSLinearGradient and CSSRadialGradient value types and registers backgroundImage as an array of them, so CSS animations and transitions of linear and radial gradients run on the native CSS engine on iOS and Android. Gradients with the same structure (direction kind, shape, size representation, stop count and position units) interpolate stop by stop; any other pair switches discretely, which also covers an omitted or empty endpoint because the placeholder for an absent layer has no stops. A stop whose color React Native resolves natively (PlatformColor, DynamicColorIOS) keeps its raw payload: the gradient switches discretely instead of losing the color or reaching the renderer as a colorless stop. Based on the native part of #10193 by Titozzz.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (6)
Included review availability: Your plan provides up to 10 included reviews per hour; 6 remain after this review. 📝 WalkthroughWalkthroughThe change adds C++ value types for linear and radial Priority: ➖ Normal Change: Feature Merge Risk: ⚪ Minimal · up to No concrete merge-blocking behavior remains; the inspected gradient transition paths preserve valid endpoint output and support omitted stop positions. 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
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. Comment |
This was referenced Sep 16, 2026
MatiPl01
force-pushed
the
@matipl01/css-gradient-stop-validation
branch
from
September 17, 2026 07:24
2eca31e to
90c8089
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
This pull request was authored by AI on behalf of @MatiPl01.
Summary
Adds
CSSLinearGradientandCSSRadialGradientvalue types and registersbackgroundImageas an array of them, so CSS animations and transitions of gradients run on the native CSS engine on iOS and Android.Two gradients interpolate stop by stop when they have the same type, the same kind of direction, the same shape and size form, and color stops that pair up one to one with the same position units. Any other pair switches discretely at the animation midpoint (or at the start of a transition with
allow-discrete). An omitted or empty endpoint is a gradient without stops, so animating to or from "no gradient" is a discrete switch as well and the placeholder never reaches React Native.A stop whose color React Native resolves natively (
PlatformColor,DynamicColorIOS) keeps its raw payload. The gradient then switches discretely instead of losing the color or reaching the renderer as a colorless stop.Based on the native part of #10193 by @Titozzz. Runtime tests, the example screen and the docs are in #10591.
Test plan
Covered by the
cssBackgroundImageon-device suite in #10591 (green on iOS and Android at the tip of this stack). Manual check:The colors blend continuously. Replace the
tovalue with'none'and the gradient disappears at the midpoint.Changelog
Entry added to the
Unpublishedsection ofpackages/react-native-reanimated/CHANGELOG.md.