feat(web): support pageSizing prop

Mirrors iOS prefersPageSizing. When false on landscape/tablet, renders
a centered floating form-sheet (default width 580, height capped to 90%
of window) by reusing the detached mechanic with a computed centering
offset.

Author: lodev09

example/shared/src/components/Header.tsx

@@ -16,7 +16,7 @@ export const Header = ({ children, style, ...rest }: HeaderProps) => {
 
 const styles = StyleSheet.create({
   container: {
-    height: Platform.select({ ios: HEADER_HEIGHT, default: HEADER_HEIGHT + SPACING }),
+    height: Platform.select({ android: HEADER_HEIGHT + SPACING, default: HEADER_HEIGHT }),
     paddingTop: Platform.select({ android: SPACING * 2 }),
     justifyContent: 'center',
     padding: SPACING,

example/shared/src/components/sheets/BasicSheet.tsx

@@ -61,6 +61,7 @@ export const BasicSheet = forwardRef((props: BasicSheetProps, ref: Ref<TrueSheet
       name="basic"
       ref={sheetRef}
       detached
+      pageSizing={false}
       grabberOptions={{
         width: 60,
       }}

src/TrueSheet.web.tsx

@@ -47,6 +47,8 @@ import {
   DEFAULT_GRABBER_HEIGHT,
   DEFAULT_GRABBER_TOP_MARGIN,
   DEFAULT_GRABBER_WIDTH,
+  DEFAULT_FORM_SHEET_HEIGHT_RATIO,
+  DEFAULT_FORM_SHEET_WIDTH,
   DEFAULT_MAX_WIDTH,
 } from './web/constants';
 
@@ -75,6 +77,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     footerStyle,
     scrollable = false,
     scrollableOptions,
+    pageSizing = true,
     detached = false,
     detachedOffset = DEFAULT_DETACHED_OFFSET,
     elevation = 4,
@@ -619,20 +622,42 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     []
   );
 
+  // Form-sheet style (iOS pageSizing=false): centered floating card with a
+  // default width and a height capped to a fraction of the window. We reuse
+  // the existing detached mechanic so drag/snap math stays correct — the
+  // wrapper is bottom-attached with a computed offset that centers it
+  // vertically.
+  const isFormSheet =
+    isLandscapeOrTablet && maxContentWidth == null && !pageSizing;
+
+  const effectiveMaxContentHeight =
+    maxContentHeight ??
+    (isFormSheet ? windowHeight * DEFAULT_FORM_SHEET_HEIGHT_RATIO : undefined);
+
+  const effectiveDetached = isFormSheet || detached;
+
+  const effectiveDetachedOffset = isFormSheet
+    ? Math.max(0, (windowHeight - (effectiveMaxContentHeight ?? 0)) / 2)
+    : detachedOffset;
+
   // The wrapper holds all horizontal sizing/anchoring so its rounded-bottom
   // clip (when detached) aligns with the drawer's horizontal bounds on
   // desktop — otherwise its corners sit at the far viewport edges.
-  const wrapperStyle = useMemo<React.CSSProperties | undefined>(
-    () =>
-      isLandscapeOrTablet
-        ? {
-            maxWidth: maxContentWidth ?? DEFAULT_MAX_WIDTH,
-            marginLeft: anchor === 'left' ? anchorOffset : 'auto',
-            marginRight: anchor === 'right' ? anchorOffset : 'auto',
-          }
-        : undefined,
-    [isLandscapeOrTablet, maxContentWidth, anchor, anchorOffset]
-  );
+  // Mirrors iOS setupSheetSizing: maxContentWidth wins (forces pageSizing
+  // off). pageSizing on → constrain to readable width (page-sheet);
+  // pageSizing off with no maxContentWidth → form-sheet width.
+  const wrapperStyle = useMemo<React.CSSProperties | undefined>(() => {
+    if (!isLandscapeOrTablet) return undefined;
+    const maxWidth = isFormSheet
+      ? DEFAULT_FORM_SHEET_WIDTH
+      : (maxContentWidth ?? (pageSizing ? DEFAULT_MAX_WIDTH : undefined));
+    if (maxWidth == null) return undefined;
+    return {
+      maxWidth,
+      marginLeft: isFormSheet || anchor !== 'left' ? 'auto' : anchorOffset,
+      marginRight: isFormSheet || anchor !== 'right' ? 'auto' : anchorOffset,
+    };
+  }, [isLandscapeOrTablet, isFormSheet, maxContentWidth, pageSizing, anchor, anchorOffset]);
 
   const handleStyle = useMemo<React.CSSProperties>(
     () => ({
@@ -659,10 +684,10 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
       repositionInputs={false}
       modal={dimmed}
       nested={isNested}
-      detached={detached}
-      detachedOffset={detachedOffset}
+      detached={effectiveDetached}
+      detachedOffset={effectiveDetachedOffset}
       detachedRadius={effectiveCornerRadius}
-      maxContentHeight={maxContentHeight}
+      maxContentHeight={effectiveMaxContentHeight}
       initialAnimated={initialDetentAnimated}
       detachedWrapperStyle={wrapperStyle}
       activeSnapPoint={activeSnapPoint}

src/web/constants.ts

@@ -1,5 +1,7 @@
 export const DEFAULT_CORNER_RADIUS = 16;
 export const DEFAULT_MAX_WIDTH = 640;
+export const DEFAULT_FORM_SHEET_WIDTH = 580;
+export const DEFAULT_FORM_SHEET_HEIGHT_RATIO = 0.9;
 export const COLOR_SURFACE_CONTAINER_LOW_LIGHT = '#F7F2FA';
 export const COLOR_SURFACE_CONTAINER_LOW_DARK = '#1D1B20';
 export const DEFAULT_ANCHOR_OFFSET = 16;