Gate iOS glass layout on native support

apps/mobile/src/Stack.tsx

@@ -59,6 +59,7 @@ import {
   EMPTY_INCOMING_SHARE_PRESENTATION_STATE,
   transitionIncomingSharePresentation,
 } from "./features/sharing/incoming-share-presentation";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "./native/native-glass";
 import { nativeHeaderScrollEdgeEffects } from "./native/StackHeader";
 import { useThreadOutboxDrain } from "./state/use-thread-outbox-drain";
 
@@ -78,19 +79,24 @@ type AppScreenOptions = NativeStackNavigationOptions & {
 // Shared header presets. Screens only override genuinely dynamic values (titles,
 // subtitles, toolbar items, search callbacks) via NativeStackScreenOptions.
 //
-// GLASS: transparent header over the screen's primary scroll view, with the iOS 26
-// scroll-edge blur sampling the content (Home, Thread, Files tree, settings sheet).
+// GLASS: transparent header over the screen's primary scroll view on supported
+// iOS versions. Pre-glass iOS gets the same solid material as internal-scroll
+// surfaces so content is laid out below the bar instead of underlapping it.
 const GLASS_HEADER_OPTIONS: AppScreenOptions = {
   headerBackButtonDisplayMode: "minimal",
   headerBackTitle: "",
   headerLargeTitle: false,
   headerShadowVisible: false,
   headerShown: true,
-  headerStyle: Platform.OS === "ios" ? { backgroundColor: "transparent" } : undefined,
+  headerStyle: NATIVE_LIQUID_GLASS_SUPPORTED
+    ? { backgroundColor: "transparent" }
+    : SHEET_BACKGROUND_COLOR !== undefined
+      ? { backgroundColor: SHEET_BACKGROUND_COLOR as unknown as string }
+      : undefined,
   headerTitleStyle: { fontSize: 18, fontWeight: "800" },
-  headerTransparent: Platform.OS === "ios",
-  scrollEdgeEffects: Platform.OS === "ios" ? HEADER_SCROLL_EDGE_EFFECTS : undefined,
-  unstable_navigationItemStyle: Platform.OS === "ios" ? "editor" : undefined,
+  headerTransparent: NATIVE_LIQUID_GLASS_SUPPORTED,
+  scrollEdgeEffects: NATIVE_LIQUID_GLASS_SUPPORTED ? HEADER_SCROLL_EDGE_EFFECTS : undefined,
+  unstable_navigationItemStyle: NATIVE_LIQUID_GLASS_SUPPORTED ? "editor" : undefined,
 };
 
 // SOLID: opaque sheet-colored header for surfaces whose content scrolls internally

apps/mobile/src/features/files/FileTreeBrowser.tsx

@@ -1,20 +1,14 @@
 import type { ProjectEntry } from "@t3tools/contracts";
 import { SymbolView } from "../../components/AppSymbol";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  ActivityIndicator,
-  FlatList,
-  Platform,
-  Pressable,
-  RefreshControl,
-  View,
-} from "react-native";
+import { ActivityIndicator, FlatList, Pressable, RefreshControl, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { AppText as Text } from "../../components/AppText";
 import { PierreEntryIcon } from "../../components/PierreEntryIcon";
 import { cn } from "../../lib/cn";
 import { useThemeColor } from "../../lib/useThemeColor";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import {
   buildFileTree,
   defaultExpandedTreePaths,
@@ -129,7 +123,7 @@ export function FileTreeBrowser(props: {
   const insets = useSafeAreaInsets();
   // Native transparent-header height ≈ safe-area top + nav bar (~44). Matches the
   // observed adjustedContentInset bottom (~102) seen in the native trace.
-  const headerInset = Platform.OS === "ios" ? insets.top + 44 : 0;
+  const headerInset = NATIVE_LIQUID_GLASS_SUPPORTED ? insets.top + 44 : 0;
   const iconColor = String(useThemeColor("--color-icon-muted"));
   const { onPreviewFile, onSelectFile, selectedPath: controlledSelectedPath } = props;
   const controlledSelectedPathRef = useRef(controlledSelectedPath);
@@ -249,9 +243,11 @@ export function FileTreeBrowser(props: {
       className="flex-1"
       data={visibleNodes}
       keyExtractor={(item) => item.node.path}
-      contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
+      contentInsetAdjustmentBehavior={NATIVE_LIQUID_GLASS_SUPPORTED ? "automatic" : "never"}
       scrollIndicatorInsets={
-        Platform.OS === "ios" ? { top: headerInset, left: 0, right: 0, bottom: 0 } : undefined
+        NATIVE_LIQUID_GLASS_SUPPORTED
+          ? { top: headerInset, left: 0, right: 0, bottom: 0 }
+          : undefined
       }
       keyboardDismissMode="on-drag"
       keyboardShouldPersistTaps="handled"

apps/mobile/src/features/home/HomeScreen.tsx

@@ -24,6 +24,7 @@ import { EmptyState } from "../../components/EmptyState";
 import type { WorkspaceState } from "../../state/workspaceModel";
 import type { SavedRemoteConnection } from "../../lib/connection";
 import { scopedProjectKey } from "../../lib/scopedEntities";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
 import type { PendingNewTask } from "../../state/use-pending-new-tasks";
 import {
@@ -388,7 +389,7 @@ export function HomeScreen(props: HomeScreenProps) {
         className="flex-1 items-center justify-center bg-screen px-8"
         style={{
           paddingBottom: Math.max(insets.bottom, 24),
-          paddingTop: Platform.OS === "ios" ? insets.top + 72 : 0,
+          paddingTop: NATIVE_LIQUID_GLASS_SUPPORTED ? insets.top + 72 : 0,
         }}
       >
         <View className="w-full max-w-[430px]">
@@ -469,8 +470,8 @@ export function HomeScreen(props: HomeScreenProps) {
           ListHeaderComponent={listHeader}
           ListEmptyComponent={listEmpty}
           style={{ flex: 1 }}
-          automaticallyAdjustsScrollIndicatorInsets={Platform.OS === "ios"}
-          contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
+          automaticallyAdjustsScrollIndicatorInsets={NATIVE_LIQUID_GLASS_SUPPORTED}
+          contentInsetAdjustmentBehavior={NATIVE_LIQUID_GLASS_SUPPORTED ? "automatic" : "never"}
           showsVerticalScrollIndicator={false}
           keyboardDismissMode="on-drag"
           keyboardShouldPersistTaps="handled"

apps/mobile/src/features/threads/ThreadDetailScreen.tsx

@@ -28,6 +28,7 @@ import type { StatusTone } from "../../components/StatusPill";
 import type { DraftComposerImageAttachment } from "../../lib/composerImages";
 import { CHAT_CONTENT_MAX_WIDTH, type LayoutVariant } from "../../lib/layout";
 import { scopedThreadKey } from "../../lib/scopedEntities";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import type {
   PendingApproval,
   PendingUserInput,
@@ -197,7 +198,13 @@ const WorkingDurationPill = memo(function WorkingDurationPill(props: {
       entering={FadeInDown.duration(200)}
       exiting={FadeOut.duration(140)}
     >
-      <View className="self-start rounded-full border border-neutral-200/80 bg-neutral-50/90 px-3 py-2 dark:border-white/[0.08] dark:bg-white/[0.04]">
+      <View
+        className={
+          Platform.OS === "ios" && !NATIVE_LIQUID_GLASS_SUPPORTED
+            ? "self-start rounded-full border border-border bg-card px-3 py-2"
+            : "self-start rounded-full border border-neutral-200/80 bg-neutral-50/90 px-3 py-2 dark:border-white/[0.08] dark:bg-white/[0.04]"
+        }
+      >
         <View className="flex-row items-center gap-2">
           <View className="flex-row items-center gap-1">
             <View className="h-1.5 w-1.5 rounded-full bg-neutral-400 dark:bg-neutral-500" />

apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx

@@ -17,6 +17,7 @@ import Svg, { Defs, LinearGradient, Rect, Stop } from "react-native-svg";
 import { AppText as Text } from "../../components/AppText";
 import { ControlPillMenu } from "../../components/ControlPill";
 import { SymbolView } from "../../components/AppSymbol";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { NativeStackScreenOptions } from "../../native/StackHeader";
 import { scopedProjectKey, scopedThreadKey } from "../../lib/scopedEntities";
 import { useThemeColor } from "../../lib/useThemeColor";
@@ -571,8 +572,10 @@ function ThreadNavigationSidebarPane(
                 itemsAreEqual={homeListItemsAreEqual}
                 keyExtractor={(item) => item.key}
                 renderItem={renderListItem}
-                automaticallyAdjustsScrollIndicatorInsets
-                contentInsetAdjustmentBehavior="automatic"
+                automaticallyAdjustsScrollIndicatorInsets={NATIVE_LIQUID_GLASS_SUPPORTED}
+                contentInsetAdjustmentBehavior={
+                  NATIVE_LIQUID_GLASS_SUPPORTED ? "automatic" : "never"
+                }
                 contentContainerStyle={[
                   styles.threadListContent,
                   {

apps/mobile/src/features/threads/ThreadRouteScreen.tsx

@@ -23,6 +23,7 @@ import {
 } from "../../components/AndroidScreenHeader";
 import { LoadingScreen } from "../../components/LoadingScreen";
 import { scopedThreadKey } from "../../lib/scopedEntities";
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { connectionTone } from "../connection/connectionTone";
 
 import {
@@ -278,7 +279,7 @@ function ThreadRouteContent(
   );
 
   /* ─── Native header theming ──────────────────────────────────────── */
-  const usesNativeHeaderGlass = Platform.OS === "ios";
+  const usesNativeHeaderGlass = NATIVE_LIQUID_GLASS_SUPPORTED;
   const headerSubtitle = [
     selectedThreadProject?.title ?? null,
     selectedEnvironmentConnection?.environmentLabel ?? null,

apps/mobile/src/features/threads/sidebar-navigation-shell.tsx

@@ -11,6 +11,7 @@ import {
 import type { ReactNode } from "react";
 import { Platform, useColorScheme } from "react-native";
 
+import { NATIVE_LIQUID_GLASS_SUPPORTED } from "../../native/native-glass";
 import { nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
 
 const SCROLL_EDGE_EFFECTS = nativeHeaderScrollEdgeEffects(Platform.OS, Platform.Version);
@@ -33,12 +34,12 @@ const SIDEBAR_SCREEN_OPTIONS: SidebarScreenOptions = {
   headerLargeTitle: false,
   headerShadowVisible: false,
   headerShown: true,
-  headerStyle: { backgroundColor: "transparent" },
+  headerStyle: NATIVE_LIQUID_GLASS_SUPPORTED ? { backgroundColor: "transparent" } : undefined,
   headerTitleStyle: { fontSize: 18, fontWeight: "800" },
-  headerTransparent: true,
-  scrollEdgeEffects: SCROLL_EDGE_EFFECTS,
+  headerTransparent: NATIVE_LIQUID_GLASS_SUPPORTED,
+  scrollEdgeEffects: NATIVE_LIQUID_GLASS_SUPPORTED ? SCROLL_EDGE_EFFECTS : undefined,
   title: "Threads",
-  unstable_navigationItemStyle: "editor",
+  unstable_navigationItemStyle: NATIVE_LIQUID_GLASS_SUPPORTED ? "editor" : undefined,
 };
 
 const SidebarStack = createNativeStackNavigator();

apps/mobile/src/lib/native-glass-capability.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { supportsNativeLiquidGlass } from "./native-glass-capability";
+
+describe("supportsNativeLiquidGlass", () => {
+  it("uses native liquid glass when iOS reports the capability", () => {
+    expect(supportsNativeLiquidGlass("ios", true)).toBe(true);
+  });
+
+  it("keeps pre-glass iOS on the solid fallback", () => {
+    expect(supportsNativeLiquidGlass("ios", false)).toBe(false);
+  });
+
+  it("does not enable iOS liquid-glass layout behavior on other platforms", () => {
+    expect(supportsNativeLiquidGlass("android", true)).toBe(false);
+    expect(supportsNativeLiquidGlass("web", true)).toBe(false);
+  });
+});

apps/mobile/src/lib/native-glass-capability.ts

@@ -0,0 +1,6 @@
+export function supportsNativeLiquidGlass(
+  platform: string,
+  nativeCapabilityAvailable: boolean,
+): boolean {
+  return platform === "ios" && nativeCapabilityAvailable;
+}

apps/mobile/src/native/native-glass.ts

@@ -0,0 +1,9 @@
+import { isLiquidGlassSupported } from "@callstack/liquid-glass";
+import { Platform } from "react-native";
+
+import { supportsNativeLiquidGlass } from "../lib/native-glass-capability";
+
+export const NATIVE_LIQUID_GLASS_SUPPORTED = supportsNativeLiquidGlass(
+  Platform.OS,
+  isLiquidGlassSupported,
+);