Repository navigation
feat(android) - url function support in backgroundImage - #58247
Open
intergalacticspacehighway wants to merge 7 commits into
Open
intergalacticspacehighway wants to merge 7 commits into
intergalacticspacehighway wants to merge 7 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-android
branch
3 times, most recently
from
August 31, 2026 14:52
5455ef6 to
d1c80d3
Compare
copy bitmap on background thread
intergalacticspacehighway
force-pushed
the
background-image-url-android
branch
from
October 29, 2026 02:34
d1c80d3 to
23ea9fc
Compare
Visual regressionNo visual differences at ios: no capture |
BackgroundImageURLLoader keeps one entry for each unique uri, keeps the entries for uris that did not change, redraws after each image, and ignores callbacks from cancelled entries. All state changes happen on the UI thread. The loaded bitmap is copied with its EXIF orientation applied, in the same way as Fresco's OrientedDrawable. An auto dimension in backgroundSize keeps the image's aspect ratio for url() layers. Pending requests are cancelled when the view is detached or hidden, and started again when it is shown.
- Keep the public BackgroundImageLayer API unchanged. url() data is in internal fields, so ReactAndroid.api matches main again. - Cap the decode at screen size and keep the natural size from the encoded image, so large photos do not crash the hardware canvas. - Show the first frame of animated images, as iOS does. - Return null for a non-string uri instead of throwing. - Start requests only while the drawable is visible, and catch up in draw() when the view skipped setVisible(true). - Filter scaled bitmaps, and create the tile rectangles once per layer.
Remove the decode size limit, so background images load like <Image> network images. Decoding at the drawn size will follow in a separate change on both platforms.
…roid - Start the requests when backgroundImage is set, and cancel them in ReactViewManager.onDropViewInstance, as iOS does in finalizeUpdates and prepareForRecycle. This removes the setVisible and draw() logic. - Copy the bitmap on a Fresco background thread. A cached image calls back at once, so the copy ran on the UI thread. - background-repeat: round uses at least one tile, as CSS requires. - Add BackgroundImageLayer parse tests.
Each view copied the decoded bitmap, so N views with the same url held N full-size copies. Keep Fresco's CloseableReference open instead and draw the shared bitmap, as Fresco's drawee does. EXIF orientation is applied with a matrix at draw time. The reference is released through DeferredReleaser on cancel. 20 views with the same 1800x1200 image: native heap +178 MB before, +9.3 MB after.
The canvas throws for a bitmap that is too large to draw. Catch the exception around the tile loop, restore the canvas, and log it, like ReactImageView does for <Image>.
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").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(iOS) -urlfunction support inbackgroundImage#58248 (iOS) into this one.How:
Uses Fresco's image pipeline to fetch the image in
BackgroundImageURLLoader. Keeps Fresco'sCloseableReferenceopen and draws the shared bitmap in theBackgroundImageDrawablecanvas usingdrawBitmap, like Fresco's drawee. Background images with the same url share one bitmap. The reference is released when the url changes or the view is dropped.Changelog:
[ANDROID] [ADDED] -
urlsupport withbackgroundImageTest Plan:
urlfunction support inbackgroundImage#58246, this PR and feat(iOS) -urlfunction support inbackgroundImage#58248, then test the examples added in the JS PR../gradlew :packages:react-native:ReactAndroid:testDebugUnitTest --tests 'com.facebook.react.uimanager.drawable.*' --tests 'com.facebook.react.uimanager.style.BackgroundImageLayerTest'Screenshots
Each
url()example in RN Tester, opened by deep link, on the Android emulator, with all three PRs merged:Follow-ups
coverandcontainsupport forbackgroundSize.