Repository navigation
feat(JS) - url function support in backgroundImage - #58246
Open
intergalacticspacehighway wants to merge 8 commits into
Open
intergalacticspacehighway wants to merge 8 commits into
intergalacticspacehighway wants to merge 8 commits into
Conversation
meta-cla
Bot
added
the
CLA Signed
This was referenced Aug 30, 2026
intergalacticspacehighway
marked this pull request as draft
August 30, 2026 13:05
intergalacticspacehighway
force-pushed
the
background-image-url-parser
branch
2 times, most recently
from
August 30, 2026 13:17
54957cd to
e6f8c65
Compare
|
Warning JavaScript API change detected This PR commits an update to
This change was flagged as: |
intergalacticspacehighway
force-pushed
the
background-image-url-parser
branch
3 times, most recently
from
August 31, 2026 08:49
fb31afc to
0daf82c
Compare
retyui
reviewed
Sep 1, 2026
| type: 'url', | ||
| uri: require('../../assets/bunny.png'), | ||
| }, | ||
| ], |
Contributor
There was a problem hiding this comment.
I think your changes has common logic from this PR: https://github.com/react/react-native/pull/58165/changes#diff-65bcdbdb1d311b6139f938abf6f90a52c8a55334c182a63d24ccc12a8e209fb2R470-R475
Collaborator
Author
There was a problem hiding this comment.
yes, the mask PR requires commit from this one, as mentioned here
lint fix add local image example
intergalacticspacehighway
force-pushed
the
background-image-url-parser
branch
from
October 29, 2026 02:34
0daf82c to
a3c2c39
Compare
Visual regression1 visual difference(s) at ios
|
| Expected | Captured |
|---|---|
 |
 |
URLBackgroundImage::toDynamic() wrote only the type and uri, so with enablePropsUpdateReconciliationAndroid a require() asset lost its intrinsic size and Android drew it at its decoded pixel size.
With enableNativeCSSParsing, backgroundImage was sent unprocessed, and native code cannot resolve an asset id, so require() url layers were dropped. Resolve only those in JS and leave the rest to native parsing.
- The JS parser follows the CSS Syntax url token rules instead of a loose regex: an unquoted url cannot contain whitespace, quotes or parentheses, a quoted url must be a single string, and escapes are decoded. This matches the native parser, so a style no longer works only with one setting of enableNativeCSSParsing. - An empty uri in the object syntax is rejected in JS and in native code. The native url conversion is shared by both parsing paths. - Remove an unused forward declaration from BackgroundImage.h. - Add tests for urls with parentheses, data uris and invalid urls.
A @3x asset with auto background size draws at its size in points, which shows that the intrinsic size from the asset registry is used.
- consumePreservedToken for CSSURLFunction is no longer constexpr. CSSURLFunction holds a std::string, so with GCC 11's libstdc++ its std::optional is not a literal type and the Fantom build failed. - Run clang-format on CSSBackgroundImage.h and its test. - Update the C++ API snapshots to match the generated output.
Checked against Chrome:
- An empty url (`url()`, `url("")`, `{uri: ''}`) is valid. It stays a
layer that draws nothing, so the other layers and their background
sizes and positions keep their index.
- An invalid url (`url(my photo.png)`) makes the whole list invalid,
in the JS string parser and natively.
- A malformed url object (missing or non-string uri, or an unknown
asset) makes the whole list invalid, like an invalid gradient.
The native CSS parser treats a backslash in url() as an ordinary character. The JS parser now does the same, so both parsers give the same result.
intergalacticspacehighway
marked this pull request as ready for review
October 29, 2026 14:35
facebook-github-tools
Bot
added
the
Shared with Meta
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary:
urlsyntax. e.g.backgroundImage: url("https://example.com/1.png").url("")) stays a layer that draws nothing, and an invalid url or a malformed url layer makes the wholebackgroundImagelist invalid.urlfunction support inbackgroundImage#58247 (Android) and feat(iOS) -urlfunction support inbackgroundImage#58248 (iOS).Changelog:
[GENERAL] [ADDED] -
urlsupport withbackgroundImageTest Plan:
urlfunction support inbackgroundImage#58247 and feat(iOS) -urlfunction support inbackgroundImage#58248, then test the examples added in this PR.processBackgroundImage-itest.js,View-itest.jsandView-nativeCSSParsing-itest.js.CSSBackgroundImageTest,CSSTokenizerTestandViewPropsDiffTest.Screenshots
Each
url()example in RN Tester, opened by deep link, with all three PRs merged.Android emulator:
iOS simulator: