Repository navigation
Paint a virtual list's background on iOS like a list's - #175
Open
wojt-janowski wants to merge 1 commit into
Open
wojt-janowski wants to merge 1 commit into
wojt-janowski wants to merge 1 commit into
Conversation
A virtual list with a bg-* class drew the iOS system background instead: pure black in dark mode, white in light mode, under a themed screen. Its List never got ListBackgroundModifier, which native:list uses to hide the system scroll background and paint the node's colour. Rows outside the window also drew a hard-coded systemGray6 block, so a fast scroll flashed a grey sheet. The virtual list now uses the same ListBackgroundModifier as native:list, so a colour, a gradient or transparent behave the same on both. Rows and placeholders are clear, as in a plain native:list, so the list's background shows through while rows load. virtual-list also accepts transparent, like list. Android is unchanged: LazyColumn draws no background of its own, and its placeholders already use the theme's surface-variant. Co-authored-by: Amp <amp@ampcode.com> Amp-Thread-ID: https://ampcode.com/threads/T-01a17444-1016-755c-a4c4-8bfd1563e21c
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.
Problem
On iOS,
native:virtual-listignores its background. A virtual list withclass="w-full flex-1 bg-theme-background"paints the iOS system background: pure black in dark mode and white in light mode, under a themed screen.native:liston the same theme paints the theme's colour.During a fast scroll, the slots that haven't loaded yet show a solid
systemGray6sheet.Cause
NativeUIVirtualListRenderer.swiftrenders a.plainListwithoutListBackgroundModifier, whichNativeUIListRenderer.swiftapplies. That modifier hides the system scroll background and paints the node'sbg-*colour, and it handles gradients andtransparenttoo. The virtual list's rows also kept SwiftUI's opaque system row fill, and its placeholders were a hard-codedColor(.systemGray6).Fix
ListBackgroundModifieris no longerprivate. The virtual list applies the same modifier, so a colour, a gradient ortransparentbehave the same onnative:listandnative:virtual-list..listRowBackground(Color.clear), as plainnative:listrows do.Color.clear, likenative:list's own placeholder rows. The list's background shows through while rows load, so a fast scroll stays on the screen's colour instead of flashing a fill.virtual-listacceptstransparent(attribute and fluent method), likelist, so it can sit directly on a gradient or background layer. There's a collector test for it.Android is unchanged.
LazyColumndraws no background of its own, so the node'sbg-*already shows, andVirtualListRenderer.kt's placeholders use the theme'ssurfaceVariant, not a system colour.Evidence
The Firstlight showcase (Recipes → Contacts, 5,000 rows) was pointed at this branch with
bg-theme-backgroundadded to itsnative:virtual-list. It ran on an iPhone 17 Pro simulator (iOS 26.5). "Fast scroll" is a capture taken mid-fling, three quick flicks past the loaded window.Dark mode. Before: black list, and a grey sheet while scrolling. After: navy
#0F172Athroughout.Light mode. Before: white list, and a
#F2F2F7sheet while scrolling. After: theme background#F8FAFCthroughout.The colours above are pixel samples from the list area of each screenshot.
Checks: Pest (404 passed; the new test fails without the PHP change),
pint --test, andswiftc -parseon both changed Swift files.Not verified: Android, which has no code change; gradient and
transparentvirtual lists on device (they take the same modifier path asnative:list); iOS 27.Made with Amp: https://ampcode.com/threads/T-01a1717b-73af-7263-867e-a12595969c54 and https://ampcode.com/threads/T-01a17444-1016-755c-a4c4-8bfd1563e21c