Skip to content

fix(ios): use parent padding in flexbox child measure specs - #11469

Open
aleclarson wants to merge 1 commit into
NativeScript:mainfrom
aleclarson:fix/ios-flexbox-child-measure-spec
Open

aleclarson wants to merge 1 commit into
NativeScript:mainfrom
aleclarson:fix/ios-flexbox-child-measure-spec

Conversation

@aleclarson

Copy link
Copy Markdown
Contributor

PR Checklist

What is the current behavior?

On iOS, FlexboxLayout.getChildMeasureSpec is called with the child's own padding where the AOSP FlexboxLayout implementation it's ported from passes the parent's padding plus the child's margins:

// AOSP / correct — already used at index.ios.ts:388-389:
getChildMeasureSpec(spec, this.effectivePadding* + lp.effectiveMargin*, ...)

// Bug — used at three other call sites:
getChildMeasureSpec(spec, lp.effectivePadding* + lp.effectiveMargin*, ...)   // child's padding!

The mismatch is visible whenever a flex child is re-measured against a fixed parent constraint. Concretely: a ROW child inside a COLUMN flexbox that gets stretched (_stretchViewVertically re-measure) is re-measured with EXACTLY <rowHeight> on the cross axis, and the child-spec computation subtracts the child's own padding — so a control with 10dip vertical padding inside a 37dip row is clamped to 17dip content height and its label collapses.

This shows up as buttons/labels squished to a minimum height inside items-center flex rows — plausibly the root cause behind #5194 (padding ignored inside flexbox-layout) and possibly #4834.

What is the new behavior?

All getChildMeasureSpec call sites in index.ios.ts now consistently subtract the parent's padding and the child's margins, matching the AOSP reference and the two call sites that were already correct (lines 388–389).

Verified on a real app: padded buttons inside stretched rows measure 37dip (correct) instead of 17dip (collapsed).

Android is unaffected — it delegates to org.nativescript.widgets.FlexboxLayout (the real Google Flexbox library).

Testing note

The affected code runs inside the iOS measure pass; packages/core has no flexbox spec today and Vitest mocks the platform globals, so a unit test would need to mock the whole native measure pipeline. I verified the fix by patching the installed package in an app: controls that previously measured 85x17 now measure 85x37 with visible labels. An apps/automated case asserting child height inside an items-center row would cover this going forward — happy to add one if you'd like.

@nx-cloud

nx-cloud Bot commented Sep 28, 2026 •

Copy link
Copy Markdown

View your CI Pipeline Execution ↗ for commit 7bfbe9f

Command Status Duration Result
nx test apps-automated -c=android ✅ Succeeded 3m 50s View ↗
nx run-many --target=test --configuration=ci --... ✅ Succeeded 6s View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗


☁️ Nx Cloud last updated this comment at 2026-09-28 18:51:39 UTC

@pkg-pr-new

pkg-pr-new Bot commented Sep 28, 2026

Copy link
Copy Markdown

Open in StackBlitz

npm i https://pkg.pr.new/@nativescript/core@11469
npm i https://pkg.pr.new/@nativescript/vite@11469
npm i https://pkg.pr.new/@nativescript/webpack@11469

commit: 7bfbe9f

This branch has not been deployed

No deployments
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