Repository navigation
feat(iOS) - url function support in backgroundImage - #58248
Open
intergalacticspacehighway wants to merge 9 commits into
Open
intergalacticspacehighway wants to merge 9 commits into
intergalacticspacehighway wants to merge 9 commits into
Conversation
meta-cla
Bot
added
the
CLA Signed
intergalacticspacehighway
marked this pull request as draft
August 30, 2026 13:05
intergalacticspacehighway
force-pushed
the
background-image-url-ios
branch
3 times, most recently
from
August 31, 2026 13:36
d123490 to
f4d9407
Compare
Move url() loading out of ViewShadowNode, ViewState, and ViewComponentDescriptor. RCTViewComponentView now starts the requests in finalizeUpdates through RCTBackgroundImageURLLoader, using the ImageManager that RCTMountingManager passes to the component view registry. No shared C++ or build file changes remain.
intergalacticspacehighway
force-pushed
the
background-image-url-ios
branch
from
October 29, 2026 02:34
fe224a5 to
83c2b1d
Compare
RCTSurfacePresenter puts one ImageManager into the context container, so ImageComponentDescriptor and RCTMountingManager use the same instance and RCTImageLoader gets requests from one serial queue only. Background images that are not UIImageOrientationUp are drawn once into an upright image, because the layer draws the CGImage, which ignores imageOrientation.
An auto dimension in backgroundSize now uses the image's aspect ratio, including after round repeat, as CSS does. Gradients have no ratio and keep their current behavior. Rename -[RCTViewComponentView setImageManager:] to setBackgroundImageManager:, so it cannot collide with a subclass property, and redraw rotated images off the main queue.
Visual regressionNo visual differences at ios: no capture |
When the tile is more than twice the size of the box, round() gives 0 and the tile kept its size. CSS requires at least one tile, so the tile now shrinks to fit the box. This also applies to gradients.
… iOS A layer draws the CGImage, which ignores imageOrientation. Instead of redrawing the whole image into a new bitmap, show the CGImage in a sublayer and rotate or mirror it with a transform. This removes the second bitmap and the background-queue redraw.
…isting ImageManager - The exported header now includes <React/Graphics.h> and <React/RendererCore.h>, so it builds under RN_STRICT_API like the other React/Fabric headers. - RCTSurfacePresenter creates the shared ImageManager only when the context container does not have one yet. insert() keeps an existing value, so the extra ImageManager was created and thrown away.
RCTBackgroundImageUtilsTests checks: - an auto size keeps the aspect ratio of a url image, but not of a gradient - background-repeat: round uses at least one tile - createURLImageLayerWithImage:size: draws all 8 EXIF orientations with the same pixels as UIImage
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:
Note
iOS CI fails until #58246 (JS/parser) is merged. This PR uses the
URLBackgroundImagetype that #58246 adds.urlsyntax. e.g.backgroundImage: url("https://example.com/1.png").background-repeat: roundnow uses at least one tile, as CSS requires. This also changes gradients whose tile is more than twice the size of the box.urlfunction support inbackgroundImage#58246 (JS/parser) and feat(android) -urlfunction support inbackgroundImage#58247 (Android).How:
RCTViewComponentViewloads theurl()images when it receives props, through the sameImageManagerpipeline as the Image component.RCTBackgroundImageURLLoaderkeeps one request per unique url. It cancels a request when its url is removed, or when the view is recycled or deallocated.RCTSurfacePresenterputs one sharedImageManagerin the context container, unless the app already added one.<Image>now uses thisImageManagertoo.RCTMountingManagerpasses theImageManagertoRCTComponentViewRegistry, which gives it to each newRCTViewComponentView.Changelog:
[IOS] [ADDED] -
urlsupport withbackgroundImageTest Plan:
urlfunction support inbackgroundImage#58246, feat(android) -urlfunction support inbackgroundImage#58247 and this PR, then test the examples added in the JS PR.RNTesterUnitTests/RCTBackgroundImageUtilsTests.mm.Screenshots
Each
url()example in RN Tester, opened by deep link, on the iOS simulator, with all three PRs merged:Follow-ups
coverandcontainsupport forbackgroundSize.