feature: honour gradient backgrounds and add transparent on native:list (iOS) - #64
Open
SRWieZ wants to merge 1 commit into
Open
feature: honour gradient backgrounds and add transparent on native:list (iOS)#64SRWieZ wants to merge 1 commit into
transparent on native:list (iOS)#64SRWieZ wants to merge 1 commit into
Conversation
NativePHP#35 taught the iOS List renderer to hide SwiftUI's system grouped background when the node declares a flat `bg-*` colour. Two cases still fall through to the stock grey: 1. A gradient (`bg-gradient-to-b from-* via-* to-*`) — the node's NodeStyleModifier paints it, but `ListBackgroundModifier` only looks at `bgColor`, so the List keeps covering it. 2. A list meant to sit directly on the screen's own background (a gradient screen, an image, the background layer). `bg-transparent` cannot express this — it packs to the same 0 as "no colour". Extend the modifier to hide the scroll background when the node carries `gradient_stops`, and add a `transparent` list attribute / fluent `->transparent()` (mirroring `plain`) for the second case. Neither paints anything in the renderer: whatever the node or the screen draws shows through. Lists without a gradient or the attribute are unchanged. Android's LazyColumn draws no background of its own, so the attribute is a no-op there; sticky section headers keep their opaque fill so rows don't bleed through while pinned. Claude-Session: https://claude.ai/code/session_016JiGXkjVzeaBeZa165N2Xk
Member
Author
|
Before and after |
SRWieZ
changed the title
transparent on native:list (iOS)transparent on native:list (iOS)
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
1 participant
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.
What's wrong
On iOS,
native:listalways paints the system grey (systemGroupedBackground) behind its rows. #35 fixed that when the list has a flatbg-*colour, but two cases still show grey:bg-gradient-to-b …)bg-transparentcan't say that, it encodes as "no colour"Android never had this problem (
LazyColumndraws no background), so the same Blade looks right on Android and grey on iOS.What this does
transparentattribute (<native:list transparent>/->transparent()), likeplain: the list paints nothing, the screen shows through. No-op on Android.tests/ListTest.php(first tests fornative:list).Before/after screenshots in a comment below. Docs (
edge-components/list) need one line fortransparent— happy to PR that too.