@lodev09/react-native-true-sheet 4.0.0-beta.24 → 4.0.0-beta.26

package/src/web/vaul/index.tsx

@@ -28,7 +28,7 @@ import {
   reset,
   set,
 } from './helpers';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 import { useComposedRefs } from './use-composed-refs';
 import { useControllableState } from './use-controllable-state';
 import { usePositionFixed } from './use-position-fixed';
@@ -224,6 +224,12 @@ export type DialogProps = {
    * from natural flow.
    */
   contentHeight?: number;
+  /**
+   * Lays the drawer out in the visual viewport above a soft keyboard. The
+   * wrapper and snap offsets fit the visible area, while fractional snap
+   * points keep scaling against the full layout height.
+   */
+  keyboardViewport?: KeyboardViewport;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 export function Root({
@@ -269,6 +275,7 @@ export function Root({
   initialAnimated = true,
   onContentHeightChange,
   contentHeight: contentHeightProp,
+  keyboardViewport,
 }: DialogProps) {
   const [isOpen = false, setIsOpen] = useControllableState({
     defaultProp: defaultOpen,
@@ -352,6 +359,7 @@ export function Root({
     maxContentHeight,
     peekHeight,
     initialAnimated,
+    keyboardViewport,
   });
 
   usePreventScroll({
@@ -1049,6 +1057,7 @@ export function Root({
           detachedOffset: detached ? detachedOffset : 0,
           detachedRadius: detached ? detachedRadius : 0,
           detachedWrapperStyle,
+          keyboardViewport,
         }}
       >
         {children}
@@ -1191,6 +1200,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       detachedOffset,
       detachedRadius,
       detachedWrapperStyle: detachedWrapperStyleProp,
+      keyboardViewport,
     } = useDrawerContext();
     // Always measure the inner wrapper's natural height. The drawer itself may
     // be styled to a fixed viewport height, so we measure an inner wrapper
@@ -1393,14 +1403,19 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
     // with a bottom gap and rounded bottom corners; otherwise it sits flush.
     // Transform/transition are managed imperatively (via drag overshoot and the
     // dismiss effect) so React doesn't skip DOM writes for values it thinks it
-    // already owns.
+    // already owns. Above a soft keyboard the wrapper fits the visual viewport,
+    // which the full-height layout viewport extends behind.
     const wrapperStyle = React.useMemo<React.CSSProperties>(
       () => ({
         position: 'fixed',
-        top: 0,
         left: 0,
         right: 0,
-        bottom: detached ? detachedOffset : 0,
+        ...(keyboardViewport
+          ? {
+              top: keyboardViewport.top,
+              height: Math.max(0, keyboardViewport.height - (detached ? detachedOffset : 0)),
+            }
+          : { top: 0, bottom: detached ? detachedOffset : 0 }),
         overflow: 'hidden',
         contain: 'paint',
         pointerEvents: 'none',
@@ -1408,7 +1423,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
         borderBottomRightRadius: detached ? detachedRadius : 0,
         ...detachedWrapperStyleProp,
       }),
-      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp]
+      [detached, detachedOffset, detachedRadius, detachedWrapperStyleProp, keyboardViewport]
     );
 
     // Translate the wrapper off-screen on dismiss so the whole card slides out

package/src/web/vaul/types.ts

@@ -5,3 +5,13 @@ export interface SnapPoint {
 }
 
 export type AnyFunction = (...args: any) => any;
+
+/**
+ * The visual viewport while a soft keyboard shrinks it, in layout-viewport px.
+ * `layoutHeight` is the full (keyboard-free) height.
+ */
+export interface KeyboardViewport {
+  top: number;
+  height: number;
+  layoutHeight: number;
+}

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

@@ -9,7 +9,7 @@ import {
   VELOCITY_THRESHOLD,
 } from './constants';
 import { useControllableState } from './use-controllable-state';
-import type { DrawerDirection } from './types';
+import type { DrawerDirection, KeyboardViewport } from './types';
 
 export function useSnapPoints({
   activeSnapPointProp,
@@ -28,6 +28,7 @@ export function useSnapPoints({
   maxContentHeight,
   peekHeight,
   initialAnimated = true,
+  keyboardViewport,
 }: {
   activeSnapPointProp?: number | string | null;
   setActiveSnapPointProp?(snapPoint: number | null | string): void;
@@ -45,6 +46,7 @@ export function useSnapPoints({
   maxContentHeight?: number;
   peekHeight?: number;
   initialAnimated?: boolean;
+  keyboardViewport?: KeyboardViewport;
 }) {
   const [activeSnapPoint, setActiveSnapPoint] = useControllableState<string | number | null>({
     prop: activeSnapPointProp,
@@ -98,13 +100,18 @@ export function useSnapPoints({
           height: container.getBoundingClientRect().height,
         }
       : typeof window !== 'undefined'
-        ? { width: window.innerWidth, height: window.innerHeight }
+        ? { width: window.innerWidth, height: keyboardViewport?.height ?? window.innerHeight }
         : { width: 0, height: 0 };
 
     // Shrink the effective vertical area by detachedOffset so snap math
     // reserves a fixed gap at the bottom — the floating card stays offset
     // from the viewport edge through drag, snap and resize.
     const effectiveHeight = Math.max(0, containerSize.height - (detachedOffset || 0));
+    // Above a keyboard, fractional snap points keep their full-height size and
+    // only cap at the visible area — mirrors native, where the sheet rises.
+    const fractionHeight = keyboardViewport
+      ? Math.max(0, keyboardViewport.layoutHeight - (detachedOffset || 0))
+      : effectiveHeight;
 
     return (
       snapPoints?.map((snapPoint) => {
@@ -129,11 +136,11 @@ export function useSnapPoints({
           const rawHeight = isPx
             ? snapPointAsNumber
             : windowDimensions
-              ? resolved * effectiveHeight
+              ? resolved * fractionHeight
               : 0;
-          // Cap px/'auto' snap points so a content taller than the viewport
-          // doesn't push the drawer past the top edge (offset would go
-          // negative). Fractional detents are already ≤ effectiveHeight.
+          // Cap snap points so content taller than the viewport (or a
+          // fraction above a keyboard) doesn't push the drawer past the top
+          // edge (offset would go negative).
           // `maxContentHeight`, when set, caps the visible sheet further so
           // full/'auto' detents respect the user's ceiling.
           const ceiling =
@@ -170,8 +177,11 @@ export function useSnapPoints({
     detachedOffset,
     maxContentHeight,
     peekHeight,
+    keyboardViewport,
   ]);
 
+  const getViewportHeight = () => keyboardViewport?.height ?? window.innerHeight;
+
   const activeSnapPointOffset = React.useMemo(
     () => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null),
     [snapPointsOffset, activeSnapPointIndex]
@@ -334,7 +344,7 @@ export function useSnapPoints({
       (direction === 'bottom' || direction === 'right') &&
       currentPosition > snapPointsOffset[0]
     ) {
-      const viewportDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+      const viewportDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
       const effectiveDim = Math.max(0, viewportDim - (detachedOffset || 0));
       const visibleAtLowest = Math.max(0, effectiveDim - snapPointsOffset[0]);
       const overshoot = currentPosition - snapPointsOffset[0];
@@ -362,7 +372,7 @@ export function useSnapPoints({
       return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
     });
 
-    const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+    const dim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
     if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
       const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
 
@@ -444,7 +454,7 @@ export function useSnapPoints({
       if (activeSnapPointIndex === 0 && !isDraggingDown) {
         const activeOffset = snapPointsOffset[activeSnapPointIndex];
         if (activeOffset === undefined) return 0;
-        const windowDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+        const windowDim = isVertical(direction) ? getViewportHeight() : window.innerWidth;
         const dismissOffset =
           direction === 'bottom' || direction === 'right' ? windowDim : -windowDim;
         const dismissRange = Math.abs(dismissOffset - activeOffset);