Native <Host> components don't pass colorScheme, so Liquid Glass doesn't track theme changes

[thomaslemoine]

Summary

On iOS, native (Host-backed) components render their Liquid Glass material using whatever color scheme @expo/ui's Host resolves on its own, instead of the app's actual current theme. This causes a visible mismatch/flicker in dark mode: the native glass material stays light (or toggles inconsistently) while the rest of the screen (styled via CSS tokens) is correctly dark.

Root cause

@expo/ui's Host exposes a colorScheme?: 'light' | 'dark' prop specifically for this (@expo/ui/build/swift-ui/Host/index.d.ts), but none of PanelUI's native components pass it:

• src/components/button/index.tsx:406 → <Host matchContents ignoreSafeArea="keyboard">
• src/components/bottom-sheet/index.tsx:703 → <Host matchContents ignoreSafeArea="keyboard" style={{ position: 'absolute' }}>
• src/components/switch/index.tsx
• src/components/slider/index.tsx
• src/components/select/index.tsx

Without an explicit colorScheme, the hosted SwiftUI content doesn't reliably track live theme changes — it appears to resolve once rather than following the app's actual (Uniwind-driven) theme state, so it can end up out of sync with the rest of the UI.

Repro steps

1. Put the app in dark mode (app theme and system appearance in sync).
2. Render a native button with glass in a navigation header, or navigate between screens that each render one.
3. On the top navigation bar buttons, and during the transition between screens, the native control's background renders light, or visibly toggles between light/dark, instead of staying in a dark-consistent glass material like the rest of the screen.

Confirmed

• Not an app-level config issue — UIUserInterfaceStyle is correctly set to Automatic.
• Still present in the latest published version, 0.84.0 (no mention in the changelog).

Suggested fix

Pass colorScheme={<resolved app theme>} (light/dark) on each of the 5 <Host> calls above, sourced from the same theme state the rest of the library already reads (useTheme/useThemeMode).

Affected components

Button (native + glass)

Version

panelui-native@0.83.0 (also checked 0.84.0)

Environment

• expo: 57.0.17
• react-native: 0.86.3
• react: 19.2.3
• @expo/ui: 57.0.14
• expo-glass-effect: 57.0.1
• uniwind: 1.11.0
• Platform: iOS 26

[Khalidabdi1]

You are right, and the diagnosis is exact — thank you for tracing it to the Host prop rather than stopping at "dark mode looks wrong". Fixed in 0.85.0, out now.

Two corrections to the scope, both in the direction of "worse than reported":

There were six Host sites, not five. Popover also hosts, through getSwiftUI() rather than the universal module, so it did not turn up in a search for the same import — src/components/popover/index.tsx:318.

And a seventh of the same kind. Glass renders expo-glass-effect's GlassView, whose props already declare colorScheme?: 'auto' | 'light' | 'dark', and nothing was passing that either. Its default is auto, which follows the system appearance — so every floating bar in the library had the bug you describe, not just the hosted controls.

On the implementation. Rather than reading the theme at each call site, the mode is passed by a small internal NativeHost wrapper. A hook cannot be called conditionally, and Button renders a host only under native — reading useThemeMode() in the component body would put a theme subscription on every button in a list for a branch almost none of them take. In the wrapper it exists only where a host is actually mounted, and there is now one place to add seedColor and layoutDirection.

The source is useThemeMode() rather than Appearance.getColorScheme(), which matters for three reasons: it is correct for the named themes (grass, moon), it is correct under system, and it respects a scoped-theme subtree. It re-renders on a live theme change because Uniwind subscribes on the theme dependency, which is the part your report says was missing.

A contract test now refuses a Host rendered anywhere but that wrapper. This is invisible from a React Native tree, so it is asserted rather than remembered.

One thing I want to be straight about: this is iOS 26 Liquid Glass behaviour and I have not put eyes on it. It typechecks, builds and passes the suite, and the reasoning is from @expo/ui's own HostView.swift, but whether the material now tracks a theme flip during a screen transition is exactly the thing only a device shows. If you get a chance to try 0.85.0 on the navigation-header case from your repro, I would be glad to hear either answer.

While in there, a second defect in the same file turned out to have the same root: matchContents is not a measurement taken once on mount — the host writes the platform's measured size into the layout on every geometry change, so native buttons, switches and sliders moved under the press. Also fixed in 0.85.0.