Skip to content

Add conic gradients to View backgroundImage - #58143

Draft
Stringsaeed wants to merge 3 commits into
react:mainfrom
Stringsaeed:feat/conic-gradient
Draft

Add conic gradients to View backgroundImage#58143
Stringsaeed wants to merge 3 commits into
react:mainfrom
Stringsaeed:feat/conic-gradient

Conversation

@Stringsaeed

Copy link
Copy Markdown

Summary:

TL;DR

Adds conic-gradient() support to View's backgroundImage style on iOS and Android.

Supported syntax includes:

  • from <angle>
  • at <position>, including four-value edge offsets
  • angular and percentage color stops
  • two-position color stops
  • transition hints
  • string and object style syntax
  • multiple background-image layers

Implementation

  • Extends the JavaScript and native C++ background-image parsers.
  • Adds a shared ConicGradient graphics model and serialization.
  • Uses CAGradientLayer with kCAGradientLayerConic on iOS.
  • Uses SweepGradient on Android.
  • Reuses existing background sizing, positioning, repeat, border, and clipping infrastructure.

Reviewer guide

Recommended order:

  1. Parser and model:
    • processBackgroundImage.js
    • CSSBackgroundImage.h
    • ConicGradient.h/.cpp
  2. Prop conversion:
    • BackgroundImagePropsConversions.cpp
  3. Platform rendering:
    • RCTConicGradient.mm
    • Android ConicGradient.kt
  4. Tests and RNTester examples.
  5. ReactNativeApi.d.ts is generated and can be reviewed mechanically.

Scope

This PR does not add:

  • repeating-conic-gradient()
  • CSS color-interpolation methods such as in hsl
  • explicit normalization for stops outside the visible 0–360 degree interval

Changelog:

[GENERAL] [ADDED] - Support conic gradients in View backgroundImage.

Test Plan:

  • yarn flow-check — 0 errors
  • yarn test-generated-typescript — passed
  • Focused ESLint and Prettier checks — passed
  • yarn fantom packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundPosition-itest.js — 80 tests passed
  • yarn fantom packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-itest.js — 77 tests passed
  • yarn fantom packages/react-native/Libraries/Components/View/__tests__/View-nativeCSSParsing-itest.js — 6 tests passed
  • yarn fantom packages/react-native/Libraries/Components/View/__tests__/View-itest.js — 224 tests passed across native CSS parsing and C++ prop setter flags
  • Native Fantom C++ target — built successfully
  • ./gradlew :packages:rn-tester:android:app:assembleDebug — built successfully
  • RNTester on iOS simulator — verified clockwise quadrant orientation, from rotation, and off-center at positioning

Known merge-readiness issue

The change introduces public C++ API surface, but C++ API snapshots are not updated. Local generation fails on Android views with an existing duplicate fmt::v12::basic_appender parser error. Regenerate those snapshots in the supported Linux CI environment before final review.

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 25, 2026
@github-actions

Copy link
Copy Markdown

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

  • Please include a clear changelog message.
  • This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant