Skip to content

fix: list rows line up with iOS's own row layout - #118

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

SRWieZ wants to merge 1 commit into
NativePHP:mainfrom
SRWieZ:fix/ios-list-row-layout

Conversation

@SRWieZ

@SRWieZ SRWieZ commented Oct 3, 2026

Copy link
Copy Markdown
Member

Two small layout problems with native:list-item rows on iOS, both visible in any grouped list:

  1. One-line rows are not vertically centred. iOS 26 gives list cells a minimum height of 52pt. A one-line row is shorter than that, and a node fills the height it gets with its content pinned to the top, so the text sits high with a gap below it.
  2. On the wide iPhones (Plus / Pro Max), rows sit 4pt to the left of their header and footer. iOS puts headers, footers and cell content on the system margin: 16pt on most iPhones, 20pt on the wide ones. List items always padded their text by 16pt.

Fix: each row keeps its own height and is centred in the list's minimum row height, and list items pad by the system margin instead of a fixed 16pt. Outside a list, a list item still pads by 16pt. Android is not touched.

To reproduce, on an iPhone 17 Pro Max simulator:

<native:list class="w-full flex-1" separator>
    <native:list-section header="General" footer="The footer text lines up with the rows above.">
        <native:list-item headline="Auto-Lock" trailingText="2 minutes" />
        <native:list-item headline="Language" trailingText="English" />
        <native:list-item headline="Sounds" :trailingSwitch="true" />
    </native:list-section>
</native:list>

Before / after (iPhone 17 Pro Max simulator, iOS 26.5): the row text moves from 16pt to 20pt inside the margin, under "General" and the footer, and the one-line rows are centred:

rows

A node fills the height it is offered with its content pinned to the
top, so a one-line row in a list cell (52pt minimum on iOS 26) sat high
with a gap below; rows now keep their own height and are centred in the
list's minimum row height. Their text was also padded by a fixed 16pt
while iOS puts section headers, footers and cell content on the system
margin (20pt on the wide iPhones), so rows sat 4pt left of their headers
there; list items now pad by that margin.
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