fix(mobile): center Android sheets and fit book-mode sheets in the left pane

apps/mobile/package.json

@@ -127,7 +127,7 @@
     "react-native-pdf-jsi": "5.0.0",
     "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "~5.10.1",
-    "react-native-screens": "file:deps/react-native-screens-5.0.0-t3.45.tgz",
+    "react-native-screens": "file:deps/react-native-screens-5.0.0-t3.48.tgz",
     "react-native-svg": "15.16.0",
     "react-native-webview": "14.0.1",
     "react-native-worklets": "0.13.0",

apps/mobile/src/components/ui/AndroidScreenHeader.tsx

@@ -1,7 +1,7 @@
 import { AppActivityIndicator } from "./AppActivityIndicator";
 import { Column, Row, Text as NativeText, RNHostView } from "@expo/ui/jetpack-compose";
 import { weight } from "@expo/ui/jetpack-compose/modifiers";
-import { useState, type ReactNode } from "react";
+import { use, useState, type ReactNode } from "react";
 import { View } from "react-native";
 
 import type { AppSymbolName } from "./AppSymbol";
@@ -12,6 +12,7 @@ import { splitAndroidHeaderActions } from "./headerMenu.android";
 import { useScaledTextRole } from "../../features/settings/appearance/useScaledTextRole";
 import { useToolbarLayout } from "./useToolbarLayout";
 import { useControlTheme } from "./useControlTheme";
+import { RoutedFormSheetContext } from "./RoutedFormSheetContext";
 
 export interface AndroidHeaderAction {
   readonly accessibilityLabel: string;
@@ -50,7 +51,8 @@ export function AndroidScreenHeader(props: {
   const { colors } = useControlTheme();
   const titleTypography = useScaledTextRole("title");
   const subtitleTypography = useScaledTextRole("label");
-  const { paddingTop, paddingBottom } = useToolbarLayout(props.embedded);
+  const inFormSheet = use(RoutedFormSheetContext);
+  const { paddingTop, paddingBottom } = useToolbarLayout(props.embedded || inFormSheet);
   const [headerWidth, setHeaderWidth] = useState(0);
   const { visibleActions, overflowActions } = splitAndroidHeaderActions(
     props.actions ?? [],
@@ -67,6 +69,12 @@ export function AndroidScreenHeader(props: {
         borderBottomWidth: props.hideBottomBorder ? 0 : undefined,
       }}
     >
+      {inFormSheet ? (
+        <View
+          pointerEvents="none"
+          className="absolute top-1 h-1 w-8 self-center rounded-full bg-header-foreground/40"
+        />
+      ) : null}
       <NativeAppBar
         singleLine={props.compact}
         navigationIcon={

apps/mobile/src/components/ui/RoutedFormSheetContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const RoutedFormSheetContext = createContext(false);

apps/mobile/src/components/ui/Sheet.android.tsx

@@ -3,6 +3,7 @@ import { View } from "react-native";
 import { FormSheet } from "react-native-screens";
 import { useResolveClassNames } from "uniwind";
 import { AndroidSheetHeader } from "./AndroidScreenHeader";
+import { RoutedFormSheetContext } from "./RoutedFormSheetContext";
 import { ScreenContent } from "./ScreenContent";
 import type { SheetProps } from "./Sheet.types";
 export type { SheetProps } from "./Sheet.types";
@@ -19,15 +20,21 @@ export function Sheet(props: SheetProps) {
       onDismiss={props.onClose}
       onNativeDismiss={props.onClose}
     >
-      {/* Android FormSheet does not bound flex children. Material drags target the first scroll view, so place content before the header. */}
-      <View collapsable={false} className="absolute inset-0 flex-col-reverse bg-header">
-        <ScreenContent>{props.children}</ScreenContent>
-        <AndroidSheetHeader title={props.title} onBack={() => setIsOpen(false)} hideBottomBorder />
-        <View
-          pointerEvents="none"
-          className="absolute top-1 h-1 w-8 self-center rounded-full bg-header-foreground/40"
-        />
-      </View>
+      <RoutedFormSheetContext value={false}>
+        {/* Android FormSheet does not bound flex children. Material drags target the first scroll view, so place content before the header. */}
+        <View collapsable={false} className="absolute inset-0 flex-col-reverse bg-header">
+          <ScreenContent>{props.children}</ScreenContent>
+          <AndroidSheetHeader
+            title={props.title}
+            onBack={() => setIsOpen(false)}
+            hideBottomBorder
+          />
+          <View
+            pointerEvents="none"
+            className="absolute top-1 h-1 w-8 self-center rounded-full bg-header-foreground/40"
+          />
+        </View>
+      </RoutedFormSheetContext>
     </FormSheet>
   );
 }