Skip to content

fix: grouped lists show their cards on iOS - #117

Open
SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/ios-grouped-list-cards
Open

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/ios-grouped-list-cards

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

A native:list with list-sections is supposed to look like the iOS Settings app: each section is a white rounded card on a grey background. Android draws those cards. On iOS they never show: the renderer clears every row's background, so the rows float on the grey background with no card.

This PR keeps the system card colour on grouped rows (light and dark mode follow the system). Plain lists are unchanged; their rows stay clear.

It also adds an opt-in row-color on the list, for apps with a coloured background that want their own card colour (white cards on a beige screen, for example). It accepts a hex value or a theme token. It works on both platforms and in both styles.

To reproduce:

<native:column class="w-full h-full">
    <native:top-bar title="Settings" display-mode="inline" />
    <native:list class="w-full flex-1" separator>
        <native:list-section header="General" footer="Rows in a section share one rounded card.">
            <native:list-item headline="Notifications" :trailingSwitch="true" />
            <native:list-item headline="Sounds" :trailingSwitch="false" />
            <native:list-item headline="Language" trailingText="English" />
        </native:list-section>
        <native:list-section header="Account">
            <native:list-item headline="Profile" />
            <native:list-item headline="Sign out" />
        </native:list-section>
    </native:list>
</native:column>

Before / after (iPhone 17 Pro simulator, iOS 26.5):

before-after

With a coloured screen and row-color:

<native:column class="w-full h-full bg-[#F8E9D3]">
    <native:list class="w-full flex-1" transparent row-color="#FFFFFF" separator>
        …same sections…
    </native:list>
</native:column>

row-color

A list with sections is documented to take the inset-grouped look with
rounded cards, and Android draws them, but iOS cleared every row's
background: grouped sections showed no card at all. Grouped rows now
keep the system grouped cell colour (plain rows stay clear), and an
opt-in row-color fills the rows of either style with a theme colour.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant