Add conic gradients to View backgroundImage - #58143
Stringsaeed wants to merge 10 commits into
Conversation
meta-cla
Bot
added
the
CLA Signed
|
Warning JavaScript API change detected This PR commits an update to
This change was flagged as: |
866b153 to
178d3e5
Compare
facebook-github-tools
Bot
added
the
Shared with Meta
|
Hey @intergalacticspacehighway, who help landing this PR? |
| if (gradient.position.top.has_value()) { | ||
| centerPoint.y = gradient.position.top->resolve(static_cast<float>(size.height)); | ||
| } else if (gradient.position.bottom.has_value()) { | ||
| centerPoint.y = size.height - gradient.position.bottom->resolve(static_cast<float>(size.height)); | ||
| } |
There was a problem hiding this comment.
if we pass conic-gradient(from 0deg at right 10px bottom 20px, ...) the JS emits bottom 20, right 10 but BackgroundImagePropsConversions.cpp pre-sets position.top = 50% and position.left = 50% so bottom and right here would not override those values.
There was a problem hiding this comment.
Fixed in d3bc12e9f91. Explicit bottom now clears the default top, and explicit right clears the default left, while unspecified axes remain centered. Added regression coverage for string/object syntax across native CSS parsing and C++ prop-setter flag combinations, and verified the positioning in RNTester on both platforms.
cf9d31b to
178d3e5
Compare
178d3e5 to
8a24d6f
Compare
|
Do we need to separate the PR into smaller 2 PRs? one for C++ foundation. @intergalacticspacehighway what do you think? |
This branch has not been deployed
2 participants
Summary
Adds
conic-gradient()support toView’sbackgroundImagestyle on iOS and Android.Supports:
from <angle>.at <position>, including edge offsets, percentages, fractional values, and negative offsets.Implementation
ConicGradientmodel, and native prop conversion.CAGradientLayeron iOS andSweepGradienton Android.RNTester includes 16 corner cases with string/object syntax switching, dimension swapping, and hide/show controls.
Scope
This PR does not add:
repeating-conic-gradient().in hsl.Changelog:
[General] [Added] - Support conic gradients in View backgroundImage.
Test Plan
Automated checks
yarn flow-check: passed with 0 errors.Focused ESLint and formatting checks: passed.
The following Fantom run passed all 732 tests:
yarn fantom 'View-conicGradient-itest|processConicGradient-itest|processBackgroundImage-itest|processBackgroundPosition-itest|/View-itest|View-nativeCSSParsing-itest' --runInBand
Coverage includes both native CSS parsing modes and both C++ prop-setter modes.
Android conic-gradient and color-stop tests passed all 18 tests:
./gradlew :packages:react-native:ReactAndroid:testDebugUnitTest
--tests com.facebook.react.uimanager.style.ConicGradientTest
--tests com.facebook.react.uimanager.style.ColorStopTest
Three new negative-offset regressions failed before the fix and passed afterward.
All 11 iOS pixel tests passed through a focused XCTest runner linked against the production renderer and gradient utilities. Four test cases failed before the rectangular-rendering fix. This was not a run of the complete RNTester XCTest suite.
Runtime verification
Built and ran RNTester from this checkout on an iOS simulator and an Android emulator.
Checked all 16 corner cases, plus resizing, hiding, and restoring the gradient without remounting the view. Verified string and object syntax for positioning and invalid-input cases.
The Android negative-offset mismatch discovered during this verification was fixed and rechecked in RNTester. Both platforms now render the outside-center case as expected.
Screenshots are included below.
Outstanding validation
The public C++ API snapshots have not been regenerated. Snapshot generation and validation remain required before merge.
Visual verification
Tested in RNTester on iOS and Android. The “Conic Gradient Corner Cases” example includes 16 selectable cases, string/object syntax switching, resizing, and hide/show controls.
Geometry and rotation
The red wedge should retain its 45° angle across aspect ratios. The 90° and −270° rotations should look identical.
Center positioning
The white ring marks the expected center where it falls within the view. Negative offsets place the center above and left of the view, producing a solid-blue visible area.
Color stops, tiling, and composition
Repeated rectangular tiles should retain independent, undistorted centers. The transition hint controls the blend midpoint, and transparent portions of the conic layer reveal the underlying linear gradient.
Invalid input and zero-size views
Invalid gradients should leave only the gray fallback background. A zero-size view should paint nothing and must not crash.
Updates without remounting
Swapping dimensions should recalculate the gradient geometry. Hiding should reveal the fallback background, and restoring should redraw the gradient correctly.