feat: radial gradient js prop passing #50268

intergalacticspacehighway · 2025-03-25T21:35:23Z

Summary:

Adds JS changes for radial gradient. Previous PR - #50209

Changelog:

[GENERAL] [ADDED] - Radial gradient

Test Plan:

Added tests in processBackgroundImage-test.js in feat: radial gradient js prop passing #50268
Merge this, feat: radial gradient iOS #50266 and feat: radial gradient android changes #50269 and check examples in RadialGradientExample.js

facebook-github-bot · 2025-03-26T15:14:50Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

jorge-cab · 2025-03-26T18:25:59Z

Just found a few bugs. We crash on 0 position on Android radial-gradient(0px 0px at center, red, blue), we allow negative position which web does not radial-gradient(-10px -10px at center, red, blue) and we are allowing stuff like aoeuradial-gradient(...) and aoeulinear-gradient(...).

Haven't looked into iOS yet but might find some more stuff there. Sorry I'm doing multiple reviewing rounds like this but it helps me keep my sanity with such a huge change.

Again thank you for working on this!!

jorge-cab · 2025-03-26T16:02:06Z

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

+type RadialExtent =
+  | 'closest-corner'
+  | 'closest-side'
+  | 'farthest-corner'
+  | 'farthest-side';


This is a re-definition? Can we import this and RadialGradientPosition from stylesheettypes?

My bad. Fixed here

jorge-cab · 2025-03-26T16:24:31Z

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

+  let hasExplicitShape = false;
+  const firstPartTokens = firstPartStr.split(/\s+/);
+
+  while (firstPartTokens.length > 0) {


So all the parsing done with firstPartTokens is the position part of radial-gradient? Can we maybe move to a function parseRadialGradientPosition so that it is easier to reason about?

firstPartTokens could be shape, size and positions e.g. radial-gradient(circle 100px at top left, red, green). Here, circle 100px at top left is the firstPartTokens. If none of these then they could be color stops. e.g. radial-gradient(red, green). I added a comment, maybe that could do the job? But let me know!

jorge-cab · 2025-03-26T17:30:12Z

packages/react-native/Libraries/StyleSheet/__tests__/processBackgroundImage-test.js

@@ -891,4 +891,242 @@ describe('processBackgroundImage', () => {
      {color: processColor('blue'), position: 40},
    ]);
  });
+


Mentioned it on the Android PR but lets add test for 0 radius radial-gradient(0px 0px at center, red, blue) and negative radius radial-gradient(-10px -10px at center, red, blue) both here and on the RNTester example to make sure its rendering the same as web

Thanks for catching. Handled zero radius here and made sure we do not draw in case of negative radius here (same as web)

jorge-cab · 2025-03-26T18:16:20Z

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

  const gradients = [];
  let match;
+  // matches one or more linear-gradient or radial-gradient functions in CSS
+  const gradientRegex =
+    /(linear|radial)-gradient\s*\(((?:\([^)]*\)|[^()])*)\)/gi;


Just noticing this now but this approach allows stuff like aoeusradial-gradient(...) and aoeulinear-gradient(...) so regex might need some edits since this should fail?

Fixed here!

NickGerleman · 2025-03-26T20:18:46Z

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

+      right: number | string,
+    };
+type RadialGradientValue = {
+  type: 'radialGradient',


I guess this is existing, but it seems odd that this type is camelCase compared to others which are kebab-case Can we change for consistency?

Fixed and pushed on all the PRs

NickGerleman · 2025-03-26T21:07:42Z

packages/react-native/Libraries/StyleSheet/processBackgroundImage.js

@@ -11,23 +11,24 @@
 'use strict';

 import type {ProcessedColorValue} from './processColor';
-import type {GradientValue} from './StyleSheetTypes';
-
+import type {BackgroundImageValue} from './StyleSheetTypes';


This file is starting to do a lot of things 😅. Any way we could split the structure to more distinct files/functions for e.g. linear gradient vs radial gradient vs url vs layer list?

Note that on Android, we added some checks for UIManagerType to only allow some new features when using Fabric. This is to avoid confusing parity gaps between Android and iOS (where iOS Paper has separate impl we are not touching), but it's also to let us delete all the ViewConfig processors for new features, once the native parsing stack (which will be Fabric only) is rolled out.

Any way we could split the structure

yes, how about we add a directory StyleSheet/BackgroundImage and create files like linearGradient, radialGradient, types and utils inside of it. I wanted to do that but kept it like this to keep it consistent with other files. 😅

facebook-github-bot · 2025-04-02T21:04:49Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot · 2025-04-02T21:35:24Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot · 2025-04-07T17:11:38Z

@jorge-cab has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

Summary: Adds iOS changes for radial gradient. Previous PR - #50209 ## Changelog: [IOS] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #50266 Test Plan: - Added tests in `processBackgroundImage-test.js` in #50268 - Merge this, #50268 and check examples in `RadialGradientExample.js` Reviewed By: joevilches Differential Revision: D71898565 Pulled By: jorge-cab fbshipit-source-id: ac00c7c3cc7dcbe9116c2d60dac8eb1a87153908

Summary: Adds android changes for radial gradient. Previous PR - #50209 ## Changelog: [ANDROID] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: #50269 Test Plan: - Added tests in processBackgroundImage-test.js in #50268 - Merge this and [this](#50268) and check examples in `RadialGradientExample.js` Reviewed By: NickGerleman Differential Revision: D71898546 Pulled By: jorge-cab fbshipit-source-id: 2872bcf16a492c7bc829be10eedb0f6c7dad32c7

facebook-github-bot · 2025-04-17T23:43:19Z

@jorge-cab merged this pull request in 1b45dc8.

Summary: Adds iOS changes for radial gradient. Previous PR - facebook#50209 ## Changelog: [IOS] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#50266 Test Plan: - Added tests in `processBackgroundImage-test.js` in facebook#50268 - Merge this, facebook#50268 and check examples in `RadialGradientExample.js` Reviewed By: joevilches Differential Revision: D71898565 Pulled By: jorge-cab fbshipit-source-id: ac00c7c3cc7dcbe9116c2d60dac8eb1a87153908

Summary: Adds android changes for radial gradient. Previous PR - facebook#50209 ## Changelog: [ANDROID] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#50269 Test Plan: - Added tests in processBackgroundImage-test.js in facebook#50268 - Merge this and [this](facebook#50268) and check examples in `RadialGradientExample.js` Reviewed By: NickGerleman Differential Revision: D71898546 Pulled By: jorge-cab fbshipit-source-id: 2872bcf16a492c7bc829be10eedb0f6c7dad32c7

Summary: Adds JS changes for radial gradient. Previous PR - facebook#50209 ## Changelog: [GENERAL] [ADDED] - Radial gradient <!-- Help reviewers and the release process by writing your own changelog entry. Pick one each for the category and type tags: For more details, see: https://reactnative.dev/contributing/changelogs-in-pull-requests Pull Request resolved: facebook#50268 Test Plan: - Added tests in `processBackgroundImage-test.js` in facebook#50268 - Merge this, facebook#50266 and facebook#50269 and check examples in `RadialGradientExample.js` Reviewed By: NickGerleman Differential Revision: D71898524 Pulled By: jorge-cab fbshipit-source-id: 39bdf0f647ba19839b6e6deb09b30a1c337e6457

radial gradient JS changes

8363fa0

facebook-github-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 Mar 25, 2025

intergalacticspacehighway changed the title ~~feat: radial gradient android changes~~ feat: radial gradient JS changes Mar 25, 2025

intergalacticspacehighway changed the title ~~feat: radial gradient JS changes~~ feat: radial gradient js prop passing Mar 25, 2025

facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Mar 25, 2025

add js example

bd8e215

This was referenced Mar 25, 2025

feat: radial gradient android changes #50269

Closed

feat: radial gradient iOS #50266

Closed

feat: radial gradient #50209

Closed

jorge-cab reviewed Mar 26, 2025

View reviewed changes

NickGerleman reviewed Mar 26, 2025

View reviewed changes

intergalacticspacehighway added 3 commits March 27, 2025 23:20

fix invalid syntax gradient css syntax parsing and negative radius

4bd25b0

rename type from camelCase to kebab-case

5c9919d

fix js lint errors

00040e7

facebook-github-bot closed this in 1b45dc8 Apr 17, 2025

facebook-github-bot added the Merged This PR has been merged. label Apr 17, 2025

feat: radial gradient js prop passing #50268

feat: radial gradient js prop passing #50268

Uh oh!

Conversation

intergalacticspacehighway commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

facebook-github-bot commented Mar 26, 2025

Uh oh!

jorge-cab commented Mar 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

intergalacticspacehighway Mar 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

facebook-github-bot commented Apr 2, 2025

Uh oh!

facebook-github-bot commented Apr 2, 2025

Uh oh!

facebook-github-bot commented Apr 7, 2025

Uh oh!

facebook-github-bot commented Apr 17, 2025

Uh oh!

Uh oh!

intergalacticspacehighway commented Mar 25, 2025 •

edited

Loading

jorge-cab commented Mar 26, 2025 •

edited

Loading

intergalacticspacehighway Mar 27, 2025 •

edited

Loading

intergalacticspacehighway Mar 31, 2025 •

edited

Loading