@lodev09/react-native-true-sheet 3.11.3 → 3.11.5

package/src/TrueSheet.types.ts

@@ -224,6 +224,17 @@ export type SheetDetent =
    */
   | 'auto'
 
+  /**
+   * Collapsed height based on the combined `header` and `footer` heights.
+   * Render a `TrueSheetPeek` component within the content to also include
+   * the content up to its bottom edge.
+   * Falls back to a fixed height of `150` when none is provided.
+   *
+   * @platform android
+   * @platform ios 16+
+   */
+  | 'peek'
+
   /**
    * Relative height as a fraction (0-1) of the available height.
    * For example, 0.5 represents 50% of the available height.

package/src/TrueSheet.web.tsx

@@ -11,9 +11,11 @@ import {
   useState,
 } from 'react';
 import { View, useColorScheme, useWindowDimensions } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 
 import { Drawer } from './web/vaul';
-import { TRANSITIONS } from './web/vaul/constants';
+import { DEFAULT_PEEK_HEIGHT, TRANSITIONS } from './web/vaul/constants';
+import { TrueSheetPeekContext } from './TrueSheetPeek.web';
 import type {
   DetentChangeEvent,
   DetentInfoEventPayload,
@@ -99,7 +101,10 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   } = props;
 
   const validDetents = useMemo(
-    () => detents.filter((d): d is SheetDetent => typeof d === 'number' || d === 'auto'),
+    () =>
+      detents.filter(
+        (d): d is SheetDetent => typeof d === 'number' || d === 'auto' || d === 'peek'
+      ),
     [detents]
   );
 
@@ -149,7 +154,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
     setActiveSnapPoint(
       snapPoint == null
         ? null
-        : typeof snapPoint === 'number' || snapPoint === 'auto'
+        : typeof snapPoint === 'number' || snapPoint === 'auto' || snapPoint === 'peek'
           ? (snapPoint as SheetDetent)
           : null
     );
@@ -227,6 +232,29 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
   const drawerContentRef = useRef<HTMLDivElement | null>(null);
 
+  // Measured header/footer heights drive the 'peek' snap point — mirrors
+  // native, where the controller tracks headerHeight/footerHeight.
+  const [headerHeight, setHeaderHeight] = useState(0);
+  const [footerHeight, setFooterHeight] = useState(0);
+
+  const handleHeaderLayout = useCallback((e: LayoutChangeEvent) => {
+    setHeaderHeight(e.nativeEvent.layout.height);
+  }, []);
+
+  const handleFooterLayout = useCallback((e: LayoutChangeEvent) => {
+    setFooterHeight(e.nativeEvent.layout.height);
+  }, []);
+
+  // Distance from the content top to the bottom of a `TrueSheetPeek` rendered
+  // within the content — measured by the peek against `contentRef`.
+  const [peekContentHeight, setPeekContentHeight] = useState(0);
+  const contentRef = useRef<View>(null);
+  const peekContext = useMemo(() => ({ contentRef, setPeekContentHeight }), []);
+
+  const peekHeight =
+    (header ? headerHeight : 0) + (footer ? footerHeight : 0) + peekContentHeight ||
+    DEFAULT_PEEK_HEIGHT;
+
   // Present/dismiss events. The sheet settles via a CSS `transform` transition
   // on either the drawer (snap-points on autopresent) or the wrapper (whole-
   // card slide on reopen/dismiss). `Animation.finished` from the Web Animations
@@ -295,6 +323,10 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
           const h = Math.min(d * effectiveH, ceiling);
           positions.push(effectiveH - h);
           values.push(effectiveH > 0 ? h / effectiveH : 0);
+        } else if (d === 'peek') {
+          const h = Math.min(peekHeight, ceiling);
+          positions.push(effectiveH - h);
+          values.push(effectiveH > 0 ? h / effectiveH : 0);
         } else {
           positions.push(effectiveH - autoHeight);
           values.push(effectiveH > 0 ? autoHeight / effectiveH : 0);
@@ -346,7 +378,7 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
 
       return { index: count - 1, detent: values[count - 1]! };
     },
-    [effectiveDetached, detachedOffset, maxContentHeight]
+    [effectiveDetached, detachedOffset, maxContentHeight, peekHeight]
   );
 
   const handlePositionChange = useCallback(
@@ -844,75 +876,82 @@ const TrueSheetComponent = forwardRef<TrueSheetMethods, TrueSheetProps>((props,
   );
 
   return (
-    <Drawer.Root
-      open={isOpen}
-      onOpenChange={handleOpenChange}
-      onPositionChange={handlePositionChange}
-      onDrag={handleDrag}
-      onRelease={handleRelease}
-      dismissible={dismissible}
-      draggable={draggable}
-      repositionInputs={false}
-      modal={dimmed}
-      nested={isNested}
-      detached={effectiveDetached}
-      detachedOffset={effectiveDetachedOffset}
-      detachedRadius={effectiveCornerRadius}
-      maxContentHeight={effectiveMaxContentHeight}
-      initialAnimated={initialDetentAnimated}
-      detachedWrapperStyle={wrapperStyle}
-      onContentHeightChange={setMeasuredContentHeight}
-      activeSnapPoint={activeSnapPoint}
-      setActiveSnapPoint={handleSetActiveSnapPoint}
-      {...snapPointsProps}
-    >
-      <Drawer.Portal container={portalContainer ?? undefined}>
-        <Drawer.Overlay style={overlayStyle} />
-        <Drawer.Content
-          ref={drawerContentRef}
-          style={mergedContentStyle}
-          onPointerDownOutside={handlePointerDownOutside}
-          detachedSiblings={
-            footer ? (
-              <div style={footerFloatStyle}>
-                <View style={footerStyle}>
-                  {isValidElement(footer) ? footer : createElement(footer)}
-                </View>
-              </div>
-            ) : undefined
-          }
-        >
-          <Drawer.Title style={visuallyHiddenStyle}>Sheet</Drawer.Title>
-          {grabber && <Drawer.Handle style={handleStyle} />}
-          {scrollable ? (
-            // vaul wraps children in `[data-vaul-auto-size-wrapper]` (display:
-            // flow-root) which doesn't honor descendant flex layout. Use an
-            // absolute fill sized to the visible portion (via vaul's
-            // `--snap-point-height` var) so the inner flex column has a
-            // definite height for the scroll container's flex:1 to fill.
-            <div style={scrollableLayoutStyle}>
-              {header && (
-                <View style={headerStyle}>
-                  {isValidElement(header) ? header : createElement(header)}
-                </View>
-              )}
-              <div style={scrollableContainerStyle}>
-                <View style={style}>{children}</View>
+    <TrueSheetPeekContext.Provider value={peekContext}>
+      <Drawer.Root
+        open={isOpen}
+        onOpenChange={handleOpenChange}
+        onPositionChange={handlePositionChange}
+        onDrag={handleDrag}
+        onRelease={handleRelease}
+        dismissible={dismissible}
+        draggable={draggable}
+        repositionInputs={false}
+        modal={dimmed}
+        nested={isNested}
+        detached={effectiveDetached}
+        detachedOffset={effectiveDetachedOffset}
+        detachedRadius={effectiveCornerRadius}
+        maxContentHeight={effectiveMaxContentHeight}
+        peekHeight={peekHeight}
+        initialAnimated={initialDetentAnimated}
+        detachedWrapperStyle={wrapperStyle}
+        onContentHeightChange={setMeasuredContentHeight}
+        activeSnapPoint={activeSnapPoint}
+        setActiveSnapPoint={handleSetActiveSnapPoint}
+        {...snapPointsProps}
+      >
+        <Drawer.Portal container={portalContainer ?? undefined}>
+          <Drawer.Overlay style={overlayStyle} />
+          <Drawer.Content
+            ref={drawerContentRef}
+            style={mergedContentStyle}
+            onPointerDownOutside={handlePointerDownOutside}
+            detachedSiblings={
+              footer ? (
+                <div style={footerFloatStyle}>
+                  <View style={footerStyle} onLayout={handleFooterLayout}>
+                    {isValidElement(footer) ? footer : createElement(footer)}
+                  </View>
+                </div>
+              ) : undefined
+            }
+          >
+            <Drawer.Title style={visuallyHiddenStyle}>Sheet</Drawer.Title>
+            {grabber && <Drawer.Handle style={handleStyle} />}
+            {scrollable ? (
+              // vaul wraps children in `[data-vaul-auto-size-wrapper]` (display:
+              // flow-root) which doesn't honor descendant flex layout. Use an
+              // absolute fill sized to the visible portion (via vaul's
+              // `--snap-point-height` var) so the inner flex column has a
+              // definite height for the scroll container's flex:1 to fill.
+              <div style={scrollableLayoutStyle}>
+                {header && (
+                  <View style={headerStyle} onLayout={handleHeaderLayout}>
+                    {isValidElement(header) ? header : createElement(header)}
+                  </View>
+                )}
+                <div style={scrollableContainerStyle}>
+                  <View ref={contentRef} style={style}>
+                    {children}
+                  </View>
+                </div>
               </div>
-            </div>
-          ) : (
-            <>
-              {header && (
-                <View style={headerStyle}>
-                  {isValidElement(header) ? header : createElement(header)}
+            ) : (
+              <>
+                {header && (
+                  <View style={headerStyle} onLayout={handleHeaderLayout}>
+                    {isValidElement(header) ? header : createElement(header)}
+                  </View>
+                )}
+                <View ref={contentRef} style={style}>
+                  {children}
                 </View>
-              )}
-              <View style={style}>{children}</View>
-            </>
-          )}
-        </Drawer.Content>
-      </Drawer.Portal>
-    </Drawer.Root>
+              </>
+            )}
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </TrueSheetPeekContext.Provider>
   );
 });
 

package/src/TrueSheetPeek.tsx

@@ -0,0 +1,11 @@
+import type { ViewProps } from 'react-native';
+
+import TrueSheetPeekViewNativeComponent from './fabric/TrueSheetPeekViewNativeComponent';
+
+/**
+ * Wrapper component that marks its children as the sheet's peek content.
+ * When rendered within a `TrueSheet`, the `"peek"` detent reveals everything
+ * from the top of the sheet through the bottom of this component — content
+ * below it stays hidden until the sheet is expanded.
+ */
+export const TrueSheetPeek = (props: ViewProps) => <TrueSheetPeekViewNativeComponent {...props} />;

package/src/TrueSheetPeek.web.tsx

@@ -0,0 +1,48 @@
+import { createContext, useContext, useEffect, useRef, type RefObject } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+
+/**
+ * Reports the measured peek content height to the owning TrueSheet.
+ * @internal
+ */
+export interface TrueSheetPeekContextValue {
+  contentRef: RefObject<View | null>;
+  setPeekContentHeight: (height: number) => void;
+}
+
+export const TrueSheetPeekContext = createContext<TrueSheetPeekContextValue | null>(null);
+
+/**
+ * Wrapper component that marks its children as the sheet's peek content.
+ * When rendered within a `TrueSheet`, the `"peek"` detent reveals everything
+ * from the top of the sheet through the bottom of this component — content
+ * below it stays hidden until the sheet is expanded.
+ */
+export const TrueSheetPeek = ({ onLayout, ...rest }: ViewProps) => {
+  const context = useContext(TrueSheetPeekContext);
+  const viewRef = useRef<View>(null);
+
+  useEffect(() => () => context?.setPeekContentHeight(0), [context]);
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    if (context) {
+      // On web, View refs resolve to the underlying DOM elements.
+      const peekElement = viewRef.current as unknown as HTMLElement | null;
+      const contentElement = context.contentRef.current as unknown as HTMLElement | null;
+
+      // Distance from the top of the content view to the bottom of the peek view,
+      // so the peek view's offset within the content (padding, views above it)
+      // counts toward the peek detent.
+      const bottom =
+        peekElement && contentElement
+          ? peekElement.getBoundingClientRect().bottom - contentElement.getBoundingClientRect().top
+          : event.nativeEvent.layout.height;
+
+      context.setPeekContentHeight(bottom);
+    }
+
+    onLayout?.(event);
+  };
+
+  return <View {...rest} ref={viewRef} onLayout={handleLayout} />;
+};

package/src/fabric/TrueSheetPeekViewNativeComponent.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  // Peek-specific props can be added here if needed
+}
+
+export default codegenNativeComponent<NativeProps>('TrueSheetPeekView', {});

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './TrueSheet';
 export * from './TrueSheet.types';
+export { TrueSheetPeek } from './TrueSheetPeek';
 export { TrueSheetProvider, useTrueSheet } from './TrueSheetProvider';

package/src/mocks/index.ts

@@ -1,5 +1,5 @@
 import React, { createElement, isValidElement, type ReactNode } from 'react';
-import { View } from 'react-native';
+import { View, type ViewProps } from 'react-native';
 
 import type { TrueSheetProps, TrueSheetStaticMethods } from '../TrueSheet.types';
 
@@ -59,6 +59,13 @@ export class TrueSheet extends React.Component<TrueSheetProps, TrueSheetState> {
   }
 }
 
+/**
+ * Mock TrueSheetPeek component for testing.
+ */
+export function TrueSheetPeek({ children, ...rest }: ViewProps) {
+  return React.createElement(View, rest, children);
+}
+
 /**
  * Mock TrueSheetProvider for testing.
  */

package/src/web/vaul/constants.ts

@@ -5,6 +5,8 @@ export const TRANSITIONS = {
 
 export const VELOCITY_THRESHOLD = 0.4;
 
+export const DEFAULT_PEEK_HEIGHT = 150;
+
 export const CLOSE_THRESHOLD = 0.25;
 
 export const SCROLL_LOCK_TIMEOUT = 100;

package/src/web/vaul/index.tsx

@@ -181,6 +181,11 @@ export type DialogProps = {
    * respect a user-specified ceiling.
    */
   maxContentHeight?: number;
+  /**
+   * Resolved height (in px) for the 'peek' snap point — the caller measures
+   * its header/footer and passes the combined height.
+   */
+  peekHeight?: number;
   /**
    * When `false` the first snap on mount is applied without a transition so
    * the sheet appears at its target detent instantly. Defaults to `true`.
@@ -231,6 +236,7 @@ export function Root({
   detachedRadius = 0,
   detachedWrapperStyle,
   maxContentHeight,
+  peekHeight,
   initialAnimated = true,
   onContentHeightChange,
 }: DialogProps) {
@@ -307,6 +313,7 @@ export function Root({
     contentHeight,
     detachedOffset: detached ? detachedOffset : 0,
     maxContentHeight,
+    peekHeight,
     initialAnimated,
   });
 

package/src/web/vaul/use-snap-points.ts

@@ -1,7 +1,7 @@
 // @ts-nocheck — vendored upstream, incompatible with noUncheckedIndexedAccess
 import React from 'react';
 import { set, isVertical } from './helpers';
-import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
+import { DEFAULT_PEEK_HEIGHT, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
 import { useControllableState } from './use-controllable-state';
 import type { DrawerDirection } from './types';
 
@@ -20,6 +20,7 @@ export function useSnapPoints({
   contentHeight,
   detachedOffset = 0,
   maxContentHeight,
+  peekHeight,
   initialAnimated = true,
 }: {
   activeSnapPointProp?: number | string | null;
@@ -36,6 +37,7 @@ export function useSnapPoints({
   contentHeight?: number;
   detachedOffset?: number;
   maxContentHeight?: number;
+  peekHeight?: number;
   initialAnimated?: boolean;
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
@@ -102,11 +104,14 @@ export function useSnapPoints({
       snapPoints?.map((snapPoint) => {
         // 'auto' resolves to measured content height. Falls back to half the
         // container so the initial snap is close to final before ResizeObserver
-        // reports a real measurement.
+        // reports a real measurement. 'peek' resolves to the caller-measured
+        // header + footer height.
         const resolved =
           snapPoint === 'auto'
             ? `${contentHeight && contentHeight > 0 ? contentHeight : effectiveHeight / 2}px`
-            : snapPoint;
+            : snapPoint === 'peek'
+              ? `${peekHeight && peekHeight > 0 ? peekHeight : DEFAULT_PEEK_HEIGHT}px`
+              : snapPoint;
         const isPx = typeof resolved === 'string';
         let snapPointAsNumber = 0;
 
@@ -151,7 +156,15 @@ export function useSnapPoints({
         return width;
       }) ?? []
     );
-  }, [snapPoints, windowDimensions, container, contentHeight, detachedOffset, maxContentHeight]);
+  }, [
+    snapPoints,
+    windowDimensions,
+    container,
+    contentHeight,
+    detachedOffset,
+    maxContentHeight,
+    peekHeight,
+  ]);
 
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),