X Tutup
Skip to content

fix(ios): liquid glass flexbox#11134

Open
VeinDevTtv wants to merge 7 commits intoNativeScript:mainfrom
VeinDevTtv:fix-liquid-glass-flexbox
Open

fix(ios): liquid glass flexbox#11134
VeinDevTtv wants to merge 7 commits intoNativeScript:mainfrom
VeinDevTtv:fix-liquid-glass-flexbox

Conversation

@VeinDevTtv
Copy link
Contributor

PR Checklist

What is the current behavior?

Currently on iOS, placing a LiquidGlass or LiquidGlassContainer component inside a FlexboxLayout completely breaks the layout (children are measured incorrectly and positioned at the wrong coordinates). This is because LiquidGlass overrides _addViewToNativeVisualTree to use a nested _contentHost view, which mismatches FlexboxLayout's standard measurement and layout paradigms.

What is the new behavior?

  1. Measurement fix: Overrode onMeasure in both LiquidGlass and LiquidGlassContainer to temporarily zero out padding/border properties before delegating to super.onMeasure(). This prevents GridLayout / AbsoluteLayout from double-subtracting padding that FlexboxLayout already removed from the child measure spec.

  2. Layout fix: Overrode onLayout in both classes to call super.onLayout(0, 0, right - left, bottom - top). Since FlexboxLayout positions the root UIVisualEffectView using absolute coordinates, the internal NativeScript layout engine needs normalized (0, 0, width, height) bounds to correctly position children within the local _contentHost coordinate space.

Fixes #11099.

@nx-cloud
Copy link

nx-cloud bot commented Mar 11, 2026

🤖 Nx Cloud AI Fix Eligible

An automatically generated fix could have helped fix failing tasks for this run, but Self-healing CI is disabled for this workspace. Visit workspace settings to enable it and get automatic fixes in future runs.

To disable these notifications, a workspace admin can disable them in workspace settings.


View your CI Pipeline Execution ↗ for commit 11e2430

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

☁️ Nx Cloud last updated this comment at 2026-03-24 16:29:05 UTC

- fall back to plain UIVisualEffectView when glass APIs are unavailable
- guard glass effect runtime access behind capability checks
- request layout for iOS 18+ label text changes even for fixed-size labels
- add automated regression coverage for liquid glass effect updates
Update the iOS LiquidGlass FlexboxLayout test to compare the fixed 300 DIP container height using device pixels. The layout helper reports pixel sizes, so 300 DIP correctly renders as 900 px on a 3x simulator; this fixes an outdated test expectation rather than a flexbox regression.
VeinDevTtv and others added 3 commits March 12, 2026 13:25
Remove the unrelated Label layout invalidation change and simplify glass support back to the SDK gate requested in PR review. Also drop runtime glass style global lookups and restore temporary measure-state overrides in finally blocks so the flexbox fix remains scoped and safe.
@NathanWalker
Copy link
Contributor

NathanWalker commented Mar 24, 2026

Thank you for the adjustments @VeinDevTtv - one last small thing; is it possible to add a quick FlexboxLayout example in https://github.com/NativeScript/NativeScript/blob/main/apps/toolbox/src/pages/glass-effects.xml so it's easily seen in toolbox for this case now and in future?

@NathanWalker NathanWalker changed the title Fix liquid glass flexbox fix(ios): liquid glass flexbox Mar 25, 2026
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.

LiquidGlass in FlexboxLayout broken

3 participants

X Tutup