feat: background image native CSS parser #53609

intergalacticspacehighway · 2025-09-05T08:09:38Z

Summary:

This PR adds native CSS parser for backgroundImage property. Currently, it supports linear-gradient and radial-gradient spec compliant CSS syntax.

Changelog:

[GENERAL] [ADDED] - background image native parser.

Test Plan:

Replicated existing testcases from JS. Currently i've added CSS syntax testcases. Checkout CSSBackgroundImageTest.cpp

Verify example screens in RNTester

Set enableNativeCSSParsing to true in ReactNativeFeatureFlags.config.js and run yarn featureflags --update
Rebuild the project and verify LinearGradientExample and RadialGradientExample screens on both platforms.

Notes

Currently it is difficult to run CSS renderer tests. I made a custom cmake config to get it working, some steps would be helpful.
Right now the new CSS renderer seems to be only working on iOS. @NickGerleman mentioned there is some WIP to get it working on android. So please test this PR on iOS.

intergalacticspacehighway · 2025-09-05T08:10:24Z

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

 {
+  if (colorStops.empty()) {
+    return {};
+  }


this should not trigger, but added this just in case!

intergalacticspacehighway · 2025-09-05T08:11:30Z

packages/rn-tester/js/examples/LinearGradient/LinearGradientExample.js

    linear-gradient(45deg, white, rgba(243, 119, 54, 0.8), rgba(243, 119, 54, 0) 70%),
    linear-gradient(90deg, white, rgba(253, 244, 152, 0.8), rgba(253, 244, 152, 0) 70%),
    linear-gradient(135deg, white, rgba(123, 192, 67, 0.8), rgba(123, 192, 67, 0) 70%),
-    linear-gradient(180deg, white, rgba(3, 146, 207, 0.8), rgba(3, 146, 207, 0) 70%);


the native parser does not support ; at the end of syntax so i had to change it. I guess it makes sense, we don't need to support semi-colons at the end. but lmk

javache

I'll import this to get some signal on unit tests!

javache · 2025-09-25T16:34:34Z

...es/react-native/ReactCommon/react/renderer/components/view/BackgroundImagePropsConversions.h

+#include <unordered_map>
+
+namespace facebook::react {
+inline void parseProcessedBackgroundImage(


Why should this be inline?

javache · 2025-09-25T16:34:36Z

...es/react-native/ReactCommon/react/renderer/components/view/BackgroundImagePropsConversions.h

+#include <unordered_map>
+
+namespace facebook::react {
+inline void parseProcessedBackgroundImage(


Why should this be inline?

yeah, it is not needed, i had pasted them from BoxShadowPropsConversions.h code. Only fromRawValue needs to be inline. Updated

javache · 2025-09-26T12:19:52Z

...es/react-native/ReactCommon/react/renderer/components/view/BackgroundImagePropsConversions.h

+              if (!valueUnit) {
+                result = {};
+                return;
+              }


Is the expected behaviour that any intermediate invalid value cause the entire parse to fail?

Yes, to match the web behaviour. e.g. linear-gradient(red 25xp, 42px) will draw an empty box on web. We did the same for JS parser

javache · 2025-09-26T12:22:39Z

packages/react-native/ReactCommon/react/renderer/css/CSSBackgroundImage.h

+      auto direction = CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};
+      return direction;


nit return directly

Suggested change

auto direction = CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};

return direction;

return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};

facebook-github-bot · 2025-09-26T12:24:03Z

@javache has imported this pull request. If you are a Meta employee, you can view this in D83341309.

javache · 2025-09-26T12:52:32Z

packages/react-native/ReactCommon/react/renderer/css/CSSBackgroundImage.h

+};
+
+
+std::optional<CSSLinearGradientDirection> parseLinearGradientDirection(CSSSyntaxParser& parser) {


Let's match the pattern of other CSSFiler etc and put these helpers as static private members of the CSSDataTypeParser struct.

template <> struct CSSDataTypeParser<CSSDropShadowFilter> { ... private: static constexpr std::optional<CSSLinearGradientDirection> parseLinearGradientDirection(CSSSyntaxParser& parser))

meta-codesync · 2025-10-17T11:24:37Z

@javache has imported this pull request. If you are a Meta employee, you can view this in D83341309.

Summary: This PR adds native CSS parser for `backgroundImage` property. Currently, it supports linear-gradient and radial-gradient spec compliant CSS syntax. ## Changelog: [GENERAL] [ADDED] - background image native parser. <!-- 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#53609 Test Plan: - Replicated existing testcases from JS. Currently i've added CSS syntax testcases. Checkout `CSSBackgroundImageTest.cpp` ### Verify example screens in RNTester - Set `enableNativeCSSParsing` to true in `ReactNativeFeatureFlags.config.js` and run `yarn featureflags --update` - Rebuild the project and verify `LinearGradientExample` and `RadialGradientExample` screens on both platforms. ### Notes - Currently it is difficult to run CSS renderer tests. I made a custom cmake config to get it working, some steps would be helpful. - Right now the new CSS renderer seems to be only working on iOS. NickGerleman mentioned there is some WIP to get it working on android. So please test this PR on iOS. Differential Revision: D83341309 Pulled By: javache

meta-codesync · 2025-10-20T14:04:51Z

@javache merged this pull request in a9780f9.

react-native-bot · 2025-10-20T14:04:54Z

This pull request was successfully merged by @intergalacticspacehighway in a9780f9

^{When will my fix make it into a release? | How to file a pick request?}

intergalacticspacehighway added 2 commits September 5, 2025 13:08

add background image native parser

eb16d45

remove semicolons from syntax

a4f55d4

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 Sep 5, 2025

intergalacticspacehighway commented Sep 5, 2025

View reviewed changes

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 Sep 5, 2025

intergalacticspacehighway commented Sep 5, 2025

View reviewed changes

cortinico added p: Expo Partner: Expo Partner labels Sep 10, 2025

javache reviewed Sep 26, 2025

View reviewed changes

intergalacticspacehighway added 4 commits September 29, 2025 18:01

merge main

0418cdc

make parse functions private

c1fd0dc

pr feedback - return early

605058b

remove inline

808221f

intergalacticspacehighway requested a review from javache September 30, 2025 00:57

intergalacticspacehighway added 2 commits October 9, 2025 16:06

Merge branch 'main' into background-image-native-parsing

eca725b

fix fantom test build

236922e

meta-codesync bot closed this in a9780f9 Oct 20, 2025

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

		auto direction = CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};
		return direction;

	auto direction = CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};
	return direction;
	return CSSLinearGradientDirection{CSSLinearGradientDirectionKeyword::ToTopLeft};

		};


		std::optional<CSSLinearGradientDirection> parseLinearGradientDirection(CSSSyntaxParser& parser) {

feat: background image native CSS parser #53609

feat: background image native CSS parser #53609

Uh oh!

Conversation

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

Uh oh!

Summary:

Changelog:

Test Plan:

Verify example screens in RNTester

Notes

Uh oh!

intergalacticspacehighway Sep 5, 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!

intergalacticspacehighway Sep 5, 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!

javache 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!

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 Sep 26, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

meta-codesync bot commented Oct 17, 2025

Uh oh!

meta-codesync bot commented Oct 20, 2025

Uh oh!

react-native-bot commented Oct 20, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

intergalacticspacehighway commented Sep 5, 2025 •

edited

Loading

intergalacticspacehighway Sep 5, 2025 •

edited

Loading

intergalacticspacehighway Sep 5, 2025 •

edited

Loading