feat: radial gradient #50209

intergalacticspacehighway · 2025-03-24T04:46:29Z

Summary:

Adds CSS spec compliant radial gradient support
Also adds object styling for the same to support JS syntax animations.

Changelog:

[GENERAL] [ADDED] - Radial gradient

Test Plan:

Added testcases in processBackgroundImage-test.js and examples in RadientGradientExample.js

jorge-cab

Only a few things on initial review! Thank you for working on this!

I will import to test the "meat" of the algorithm more thoroughly and for it to go through internal review. I will try to make it so it doesn't take as much time to land this as the other times.

jorge-cab · 2025-03-24T16:33:15Z

packages/react-native/React/Fabric/Utils/RCTGradientUtils.h

+#include <react/renderer/graphics/ColorStop.h>
+#import <vector>
+
+using namespace facebook::react;


We shouldn't use using namespace on header files since anything that might include the header will also get the using namespace so lets remove it from here

jorge-cab · 2025-03-24T16:38:23Z

...ges/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/LengthPercentage.kt

+  public fun resolveToPixel(referenceLength: Float): Float {
+    if (type == LengthPercentageType.PERCENT) {
+      return (value / 100) * referenceLength
+    }
+    return PixelUtil.toPixelFromDIP(value)
+  }
+


I don't think this is needed, we have .dpToPx() method added to Floats so I think we should just do that when using the resolved value. Specially since this would be adding yet another public API

very cool. updated!

jorge-cab · 2025-03-24T16:43:45Z

...react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/RadialGradient.kt

+    var centerY: Float = height / 2f
+
+    if (position.top != null) {
+      centerY = position.top.resolveToPixel(height)


For this and all other usages of resolveToPixel

Suggested change

centerY = position.top.resolveToPixel(height)

centerY = position.top.resolve(height).dpToPx()

facebook-github-bot · 2025-03-24T16:58:43Z

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

jorge-cab · 2025-03-24T17:12:50Z

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/Gradient.kt

 internal class Gradient(gradient: ReadableMap?, context: Context) {
  private enum class GradientType {
-    LINEAR_GRADIENT
+    LINEAR_GRADIENT,
+    RADIAL_GRADIENT
  }

  private val type: GradientType
-  private val linearGradient: LinearGradient
+  private val linearGradient: LinearGradient?
+  private val radialGradient: RadialGradient?


It feels like there should be a better way to do this. Maybe have Gradient be a super class for LinearGradient and RadialGradient? Or maybe have it be an interface where we implement getShader and do the parsing of LinearGradient/RadialGradient on their own class?

true, interface with getShader makes most sense, will add it 👍

Updated, will split the PR as Nick mentioned.

NickGerleman

This is really exciting! But also a pretty huge change. Could we split this up a bit?

NickGerleman · 2025-03-24T22:06:11Z

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

-const DIRECTION_KEYWORD_REGEX =
+
+// Linear Gradient
+const LINEAR_GRADIENT_DIRECTION_REGEX =


Heads up, that we are starting soon on iOS to experiment with the native parser which replaced ViewConfig processors. I didn't port this for backgroundImage yet, but the other processors should all be there with tests. https://github.com/facebook/react-native/blob/main/packages/react-native/ReactCommon/react/renderer/css/CSSTransformOrigin.h

This is building in OSS now, but IDK the story for GTest. @cortinico would know better.

@NickGerleman yes! i saw this one. i didn't spend much time to try running it as currently the flag was off. But i will try to write a native parser for gradients 😄.

For now, i can split this PR into three (iOS, android and JS changes)

intergalacticspacehighway · 2025-03-25T21:50:19Z

@NickGerleman @jorge-cab i have split the PRs into three parts. Feel free to close this one.

JS prop drilling - feat: radial gradient js prop passing #50268
Android changes - feat: radial gradient android changes #50269
iOS changes - feat: radial gradient iOS #50266

To test on a platform, merge JS and that platform's PR. Sorry for the PR spam 😅

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

Summary: Adds JS changes for radial gradient. Previous PR - #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: #50268 Test Plan: - Added tests in `processBackgroundImage-test.js` in #50268 - Merge this, #50266 and #50269 and check examples in `RadialGradientExample.js` Reviewed By: NickGerleman Differential Revision: D71898524 Pulled By: jorge-cab fbshipit-source-id: 39bdf0f647ba19839b6e6deb09b30a1c337e6457

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

intergalacticspacehighway added 2 commits March 24, 2025 09:56

implement radial gradient

ebb5403

make example slightly elegant

9d12ee6

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Mar 24, 2025

update snapshot test

96d84cd

javache requested review from NickGerleman and joevilches March 24, 2025 10:23

jorge-cab reviewed Mar 24, 2025

View reviewed changes

remove namespace from header and use dpToPx

8c1a25d

NickGerleman reviewed Mar 24, 2025

View reviewed changes

intergalacticspacehighway added 2 commits March 25, 2025 10:16

refactor: create gradient interface

99970d9

Merge branch 'main' into radial-gradient

8876870

This was referenced Mar 25, 2025

feat: radial gradient iOS #50266

Closed

feat: radial gradient JS changes #50267

Closed

feat: radial gradient js prop passing #50268

Closed

feat: radial gradient android changes #50269

Closed

jorge-cab closed this Mar 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: radial gradient #50209

feat: radial gradient #50209

Uh oh!

intergalacticspacehighway commented Mar 24, 2025 •

edited

Loading

Uh oh!

jorge-cab left a comment

Uh oh!

jorge-cab Mar 24, 2025

Uh oh!

jorge-cab Mar 24, 2025

Uh oh!

intergalacticspacehighway Mar 24, 2025

Uh oh!

jorge-cab Mar 24, 2025

Uh oh!

facebook-github-bot commented Mar 24, 2025

Uh oh!

jorge-cab Mar 24, 2025

Uh oh!

intergalacticspacehighway Mar 24, 2025

Uh oh!

intergalacticspacehighway Mar 25, 2025

Uh oh!

NickGerleman left a comment

Uh oh!

NickGerleman Mar 24, 2025

Uh oh!

intergalacticspacehighway Mar 25, 2025

Uh oh!

intergalacticspacehighway commented Mar 25, 2025 •

edited

Loading

Uh oh!

Uh oh!

	centerY = position.top.resolveToPixel(height)
	centerY = position.top.resolve(height).dpToPx()

feat: radial gradient #50209

feat: radial gradient #50209

Uh oh!

Conversation

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

Uh oh!

Summary:

Changelog:

Test Plan:

Uh oh!

jorge-cab left a comment

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!

facebook-github-bot commented Mar 24, 2025

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!

NickGerleman left a comment

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 commented Mar 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

intergalacticspacehighway commented Mar 24, 2025 •

edited

Loading

intergalacticspacehighway commented Mar 25, 2025 •

edited

Loading