@tamagui/sheet 2.0.0-rc.9 → 2.1.0

package/src/SheetImplementationCustom.tsx

@@ -5,7 +5,6 @@ import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import {
   LayoutMeasurementController,
   View as TamaguiView,
-  Theme,
   useConfiguration,
   useDidFinishSSR,
   useEvent,
@@ -23,8 +22,15 @@ import type {
 import { Dimensions, PanResponder, View } from 'react-native'
 import { ParentSheetContext, SheetInsideSheetContext } from './contexts'
 import { GestureDetectorWrapper } from './GestureDetectorWrapper'
+import { getGestureHandlerState } from './gestureState'
 import { GestureSheetProvider } from './GestureSheetContext'
 import { resisted } from './helpers'
+import { getKeyboardOccludedHeight } from './keyboardAvoidance'
+import {
+  getStableLayoutViewportHeight,
+  getWebKeyboardHeight,
+  MIN_KEYBOARD_HEIGHT,
+} from './webViewport'
 import { SheetProvider } from './SheetContext'
 import type { SheetProps, SnapPointsMode } from './types'
 import { useGestureHandlerPan } from './useGestureHandlerPan'
@@ -34,6 +40,14 @@ import { useSheetProviderProps } from './useSheetProviderProps'
 
 const hiddenSize = 10_000.1
 
+// the re-established rngh root for a modal sheet (see modal branch below).
+// GestureHandlerRootView does its own native touch interception and ignores
+// pointerEvents, so it would block the whole app while the sheet sits closed
+// but mounted. instead it stays full-width for correct child layout/measurement
+// and collapses to 0 height when closed so it has no hit area.
+const rnghRootStyleOpen = { width: '100%', height: '100%' } as const
+const rnghRootStyleClosed = { width: '100%', height: 0 } as const
+
 // safe area top inset, cached per-session (device-constant value)
 let _cachedSafeAreaTop: number | undefined
 function getSafeAreaTopInset(): number {
@@ -48,6 +62,19 @@ let sheetHiddenStyleSheet: HTMLStyleElement | null = null
 // on web we are always relative to window, on to screen
 const relativeDimensionTo = isWeb ? 'window' : 'screen'
 
+// height of the viewport the sheet positions against. on web this MUST be the
+// stable layout viewport and NOT Dimensions.get('window') — react-native-web's
+// Dimensions tracks visualViewport, which shrinks by the soft keyboard. capping
+// frameSize / maxContentSize against that shrinking value corrupts the fit-mode
+// math (translateY = screenSize - frameSize), detaching the sheet's bottom from
+// the screen edge when the keyboard opens. NOTE: window.innerHeight is NOT
+// stable on real iOS Safari (it shrinks with the keyboard too), so we use the
+// self-correcting baseline from webViewport instead. see getStableLayoutViewportHeight.
+function getStableViewportHeight(): number {
+  if (isWeb && typeof window !== 'undefined') return getStableLayoutViewportHeight()
+  return Dimensions.get(relativeDimensionTo).height
+}
+
 export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
   function SheetImplementationCustom(props, forwardedRef) {
     const parentSheet = React.useContext(ParentSheetContext)
@@ -61,6 +88,7 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       unmountChildrenWhenHidden = false,
       portalProps,
       containerComponent: ContainerComponent = React.Fragment,
+      onAnimationComplete,
     } = props
 
     const state = useSheetOpenState(props)
@@ -83,6 +111,8 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       maxSnapPoint,
     } = providerProps
     const { open, controller, isHidden } = state
+    const openRef = React.useRef(open)
+    openRef.current = open
 
     const sheetRef = React.useRef<View>(undefined as unknown as View)
     const ref = useComposedRefs(forwardedRef, sheetRef, providerProps.contentRef as any)
@@ -130,6 +160,19 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       setIsShowingInnerSheet(hasChild)
     }, [])
 
+    // keyboard state tracking — just tracks height/visibility, no position animation.
+    // Position animation is handled via keyboard-adjusted positions below,
+    // matching the react-native-actions-sheet pattern.
+    const {
+      keyboardHeight,
+      isKeyboardVisible,
+      dismissKeyboard,
+      pauseKeyboardHandler,
+      flushPendingHide,
+    } = useKeyboardControllerSheet({
+      enabled: Boolean(moveOnKeyboardChange),
+    })
+
     // FIX: Store stable frameSize to prevent recalculation during exit animation
     const stableFrameSize = React.useRef(frameSize)
 
@@ -140,31 +183,84 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       }
     }, [open, frameSize])
 
+    // WEB keyboard anchor freeze. on real iOS Safari opening the keyboard shrinks
+    // the visual viewport AND innerHeight AND the measured layout, which would
+    // re-derive screenSize/frameSize smaller, recompute the fit positions, and
+    // fly the frame up then back down ("goes back down after the keyboard opens").
+    // so we snapshot the pre-keyboard geometry — captured every render while the
+    // keyboard is CLOSED, which dodges the open-transition race where a shrunk
+    // onLayout lands before isKeyboardVisible flips — and use it for the anchor
+    // math while the keyboard is open. the sheet then stays put; only the scroll
+    // content shifts to clear the keyboard (keyboardOccludedHeight padding below
+    // + SheetScrollView's frozen height).
+    // this sheet is the kind the web keyboard anchor freeze is designed for — a
+    // fit-mode web sheet opted into keyboard handling. percent/constant sheets
+    // keep the live geometry (their height isn't pinned, so a frozen anchor
+    // would mismatch).
+    const isWebKbSheet = isWeb && hasFit && moveOnKeyboardChange
+
+    // whether we ever captured geometry while the keyboard was CLOSED. that's the
+    // authoritative baseline; until we have it, the autofocus-on-open seed below
+    // reconstructs one from keyboard-up measurements.
+    const hasCleanKbBaseline = React.useRef(false)
+    // the autofocus-on-open seed has settled on a stable frame height (the
+    // unclipped content stopped growing). until then we keep the seed phase open.
+    const seedSettled = React.useRef(false)
+    const stableKbGeom = React.useRef({ frame: 0, screen: 0 })
+    if ((!isWeb || !isKeyboardVisible) && frameSize > 0 && screenSize > 0) {
+      // keyboard-free render — the authoritative baseline. mutate in place: the
+      // ref is only ever read field-by-field, never identity-compared, so this
+      // avoids a per-render allocation.
+      stableKbGeom.current.frame = frameSize
+      stableKbGeom.current.screen = screenSize
+      hasCleanKbBaseline.current = true
+    } else if (
+      isWebKbSheet &&
+      isKeyboardVisible &&
+      !hasCleanKbBaseline.current &&
+      screenSize > 0
+    ) {
+      // AUTOFOCUS-ON-OPEN seed. when the input autofocuses as the sheet animates
+      // in, the keyboard rises BEFORE any keyboard-free layout lands, so the
+      // branch above never runs (frameSize/screenSize were 0 the whole time the
+      // keyboard was up) and freezeForKb stays false, collapsing the sheet to the
+      // shrunk consumer maxHeight. instead, reconstruct the baseline from the
+      // keyboard-up render: screen = the stable layout viewport
+      // (keyboard-independent). the frame is grown by the seeding layout path
+      // below: while seeding, the tail padding is suppressed and the scroll view
+      // is unclipped (via keyboardStableFrameHeight = stable screen), so the frame
+      // converges on its pure pre-keyboard content height across a couple layout
+      // passes. a real keyboard-free render later replaces it with the exact value
+      // (branch above).
+      stableKbGeom.current.screen = Math.max(stableKbGeom.current.screen, screenSize)
+    }
+    // are we still reconstructing the baseline from a keyboard-up render? true
+    // until either a clean baseline lands or the seeded frame settles.
+    const seedingKbBaseline =
+      isWebKbSheet &&
+      isKeyboardVisible &&
+      !hasCleanKbBaseline.current &&
+      !seedSettled.current
+    const freezeForKb =
+      isWebKbSheet && isKeyboardVisible && stableKbGeom.current.frame > 0
+    const effScreenSize = freezeForKb ? stableKbGeom.current.screen : screenSize
+
     // use stableFrameSize when closing to prevent position jumps during exit animation
     // but when opening, always use the current frameSize so positions update correctly
-    const effectiveFrameSize = open ? frameSize : stableFrameSize.current || frameSize
+    const effectiveFrameSize = freezeForKb
+      ? stableKbGeom.current.frame
+      : open
+        ? frameSize
+        : stableFrameSize.current || frameSize
 
     const positions = React.useMemo(
       () =>
         snapPoints.map((point) =>
-          getYPositions(snapPointsMode, point, screenSize, effectiveFrameSize)
+          getYPositions(snapPointsMode, point, effScreenSize, effectiveFrameSize)
         ),
-      [screenSize, effectiveFrameSize, snapPoints, snapPointsMode]
+      [effScreenSize, effectiveFrameSize, snapPoints, snapPointsMode]
     )
 
-    // keyboard state tracking — just tracks height/visibility, no position animation.
-    // Position animation is handled via keyboard-adjusted positions below,
-    // matching the react-native-actions-sheet pattern.
-    const {
-      keyboardHeight,
-      isKeyboardVisible,
-      dismissKeyboard,
-      pauseKeyboardHandler,
-      flushPendingHide,
-    } = useKeyboardControllerSheet({
-      enabled: !isWeb && Boolean(moveOnKeyboardChange),
-    })
-
     const [isDragging, setIsDragging_] = React.useState(false)
 
     // synchronous dragging ref — set BEFORE async state commits.
@@ -186,28 +282,32 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       [pauseKeyboardHandler, flushPendingHide]
     )
 
-    // keyboard-adjusted positions: shift snap points up by keyboard height
-    // when keyboard is visible. This drives both gesture snap calculation
-    // and animation targets — keyboard never dismissed during drag.
-    // Capped at safe area top inset so the sheet never goes above the notch/status bar
-    // (matching the react-native-actions-sheet pattern).
+    // keyboard-adjusted snap positions.
     //
-    // IMPORTANT: frozen during drag to prevent gesture handler recreation.
-    // When user drags, TextInput may blur → keyboard dismisses → positions would revert,
-    // causing the gesture useMemo to recreate and cancel the active drag.
-    // The post-drag reconciliation effect handles animating to correct position after drag ends.
+    // WEB: the sheet stays ANCHORED at the bottom and keeps its full pre-keyboard
+    // height — it does NOT shift up or resize. Shifting/resizing with the
+    // translateY model detaches the bottom from the screen edge or teleports it.
+    // Instead the frame's anchor geometry is frozen (effScreenSize/effectiveFrameSize
+    // above) and its height is pinned (keyboardStableFrameHeight -> SheetScrollView);
+    // the scroll content is padded by keyboardOccludedHeight and the browser
+    // scroll-into-view lifts the focused input above the keyboard. So
+    // activePositions === positions on web.
+    //
+    // NATIVE: shift snap points up by keyboard height (the native keyboard is
+    // opaque and pushes content), capped at the safe-area top inset.
+    //
+    // IMPORTANT: frozen during drag to prevent gesture handler recreation —
+    // when a TextInput blurs mid-drag the keyboard state would otherwise revert
+    // and recreate the gesture useMemo, cancelling the active drag.
     const activePositionsRef = React.useRef(positions)
     const activePositions = React.useMemo(() => {
-      // during drag, return frozen positions to prevent gesture handler recreation.
-      // check both state (for re-render trigger) and ref (for synchronous check
-      // when keyboard hide event fires before isDragging state commits)
       if (isDragging || isDraggingRef.current) return activePositionsRef.current
 
       let result: number[]
-      if (!isKeyboardVisible || keyboardHeight <= 0) {
+      if (isWeb || !isKeyboardVisible || keyboardHeight <= 0) {
         result = positions
       } else {
-        const safeAreaTop = isWeb ? 0 : getSafeAreaTopInset()
+        const safeAreaTop = getSafeAreaTopInset()
         result = positions.map((p) => {
           // don't adjust the off-screen/close position (from dismissOnSnapToBottom's 0% snap)
           // — it must stay at screenSize so the user can drag between real snap points
@@ -220,6 +320,40 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       return result
     }, [positions, isKeyboardVisible, keyboardHeight, screenSize, isDragging])
 
+    const keyboardOccludedHeight = seedingKbBaseline
+      ? // while seeding, suppress the keyboard tail padding so the frame measures
+        // its PURE pre-keyboard content height (the padding would otherwise inflate
+        // it toward the full screen). re-enabled once the baseline is captured.
+        0
+      : getKeyboardOccludedHeight({
+          frameSize: effectiveFrameSize,
+          isKeyboardVisible,
+          keyboardHeight,
+          screenSize: effScreenSize,
+          sheetY: position >= 0 ? activePositions[position] : undefined,
+        })
+
+    // the authoritative pre-keyboard frame height to pin the scroll view to while
+    // the keyboard is open (web). stableKbGeom.frame is captured every render the
+    // keyboard is closed, so it survives the open transition; SheetScrollView
+    // gates application on its own live keyboard check.
+    //
+    // AUTOFOCUS-ON-OPEN seed: while still reconstructing the baseline (seeding,
+    // not yet settled) we use the STABLE SCREEN SIZE — a safe upper bound (a fit
+    // frame never exceeds the screen) that is > 0, so SheetScrollView's height
+    // override engages and UNCLIPS the scroll view from the shrunk consumer
+    // maxHeight. with the tail padding suppressed (above) the content then lays
+    // out to its pure intrinsic height, which the seeding layout grows the frame
+    // baseline toward across a couple passes. once settled (or once a real
+    // keyboard-free baseline lands) we pin that exact frame height.
+    const keyboardStableFrameHeight = !isWebKbSheet
+      ? 0
+      : seedingKbBaseline
+        ? stableKbGeom.current.screen || screenSize
+        : stableKbGeom.current.frame > 0
+          ? stableKbGeom.current.frame
+          : 0
+
     const { useAnimatedNumber, useAnimatedNumberStyle, useAnimatedNumberReaction } =
       animationDriver
     const AnimatedView = (animationDriver.View ?? TamaguiView) as typeof Animated.View
@@ -254,6 +388,9 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
 
     const hasScrollView = React.useRef(false)
 
+    // safety fallback timer for sheet close opacity
+    const opacityFallbackTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null)
+
     useAnimatedNumberReaction(
       {
         value: animatedNumber,
@@ -273,6 +410,12 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
             // when reaching top, enable scroll; when leaving top, disable scroll
             // this preemptively sets scroll state before any gestures start
             if (nowAtTop) {
+              // if scroll drifted during drag (e.g. fast swipe from position 1),
+              // reset it to 0 before enabling free scroll
+              if (scrollBridge.y > 0) {
+                scrollBridge.forceScrollTo?.(0)
+                scrollBridge.y = 0
+              }
               scrollBridge.scrollLockY = undefined
               scrollBridge.setScrollEnabled?.(true)
             } else {
@@ -296,17 +439,61 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
     const animateTo = useEvent((position: number, animationOverride?: any) => {
       if (frameSize === 0) return
 
-      let toValue = isHidden || position === -1 ? screenSize : activePositions[position]
+      // use effScreenSize (the frozen anchor space the positions were built in) for
+      // the off-screen/close target too, so a close while the keyboard is still up
+      // animates fully out instead of to a mismatched live screenSize.
+      let toValue =
+        isHidden || position === -1 ? effScreenSize : activePositions[position]
 
       if (at.current === toValue) return
 
       at.current = toValue
       stopSpring()
 
+      const isOpenAnimation = position !== -1 && !isHidden
+
+      // clear any pending fallback timer
+      if (opacityFallbackTimer.current) {
+        clearTimeout(opacityFallbackTimer.current)
+        opacityFallbackTimer.current = null
+      }
+
+      const animationCompleteCallback = () => {
+        if (opacityFallbackTimer.current) {
+          clearTimeout(opacityFallbackTimer.current)
+          opacityFallbackTimer.current = null
+        }
+        // use openRef (live) not open (stale closure) — if the sheet
+        // was reopened before this callback fires (e.g. cancelled close
+        // animation), we must not hide it
+        if (!isOpenAnimation && !openRef.current) {
+          setOpacity(0)
+        }
+        onAnimationComplete?.({ open: isOpenAnimation })
+        // also notify the SheetController so a parent (e.g. Dialog adapt)
+        // can hold the sheet's children mounted until the slide-out is done
+        controller?.onAnimationComplete?.({ open: isOpenAnimation })
+      }
+
+      // safety fallback: if animation callback never fires, still hide the sheet
+      if (!isOpenAnimation) {
+        opacityFallbackTimer.current = setTimeout(() => {
+          opacityFallbackTimer.current = null
+          // check live open state via ref — sheet may have reopened (e.g. adapt handoff)
+          if (!openRef.current) {
+            setOpacity(0)
+          }
+        }, 1000)
+      }
+
       // skip animation when adapting from dialog to sheet
       if (skipAdaptAnimation.current) {
         skipAdaptAnimation.current = false
-        animatedNumber.setValue(toValue, { type: 'timing', duration: 0 })
+        animatedNumber.setValue(
+          toValue,
+          { type: 'timing', duration: 0 },
+          animationCompleteCallback
+        )
         return
       }
 
@@ -315,7 +502,8 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
         animationOverride || {
           type: 'spring',
           ...transitionConfig,
-        }
+        },
+        animationCompleteCallback
       )
     })
 
@@ -347,6 +535,16 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
         return
       }
 
+      // never fight an active drag: the gesture owns the animated position. on
+      // web the AnimatedView's onLayout re-fires with sub-pixel jitter as the
+      // frame translates (frameSize 499.99996 <-> 500.00003), and since frameSize
+      // is a dep of this effect that would re-run it mid-pull and snap the sheet
+      // back to its resting snap point. read the live ref so drag-end (which the
+      // reconcile-after-drag effect handles) isn't gated by stale deps.
+      if (isDraggingRef.current) {
+        return
+      }
+
       if (!frameSize || !screenSize || isHidden || (hasntMeasured && !open)) {
         return
       }
@@ -384,7 +582,11 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       if (!frameSize) return
       if (isShowingInnerSheet) return
 
-      const minY = positions[0]
+      // use keyboard-adjusted positions (matches the RNGH path): when the
+      // keyboard is open the sheet sits at activePositions[0], so clamping drags
+      // against the un-adjusted positions[0] would rubber-band the sheet down to
+      // near the bottom on any drag.
+      const minY = activePositions[0]
       scrollBridge.paneMinY = minY
       let startY = at.current
 
@@ -427,8 +629,8 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
         let closestPoint = 0
         let dist = Number.POSITIVE_INFINITY
 
-        for (let i = 0; i < positions.length; i++) {
-          const position = positions[i]
+        for (let i = 0; i < activePositions.length; i++) {
+          const position = activePositions[i]
           const curDist = end > position ? end - position : position - end
           if (curDist < dist) {
             dist = curDist
@@ -460,6 +662,16 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
             return true
           }
 
+          // touch is on the ScrollView node — the web scroll-view gesture hook
+          // owns it and drives drag/release through scrollBridge directly (it
+          // re-baselines via scrollBridge.startPanDrag on each pan handoff). if
+          // we also granted here, RNW's PanResponder would set the animated
+          // position from a second, differently-based offset every move and the
+          // sheet would jitter/jump. defer entirely to the hook.
+          if (scrollBridge.scrollNodeTouched) {
+            return false
+          }
+
           if (scrollBridge.hasScrollableContent === true) {
             if (scrollBridge.scrollLock) {
               return false
@@ -505,6 +717,17 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
 
       let isExternalDrag = false
 
+      // re-baseline a pan drag to the current animated position. the web
+      // scroll-view hook calls this on every transition INTO pan ownership
+      // (including handoffs back from scroll), so its panDragOffset — which it
+      // resets to 0 at each pan entry — is measured from where the sheet
+      // actually is now, not from where the gesture first grabbed it. without
+      // this the sheet would jump to a stale origin on a scroll→pan handoff.
+      scrollBridge.startPanDrag = () => {
+        isExternalDrag = true
+        grant()
+      }
+
       scrollBridge.drag = (dy) => {
         if (!isExternalDrag) {
           isExternalDrag = true
@@ -546,10 +769,22 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
         onPanResponderTerminate: finish,
         onPanResponderRelease: finish,
       })
-    }, [disableDrag, isShowingInnerSheet, animateTo, frameSize, positions, setPosition])
+    }, [
+      disableDrag,
+      isShowingInnerSheet,
+      animateTo,
+      frameSize,
+      activePositions,
+      setPosition,
+    ])
 
-    // animate to keyboard-adjusted position when keyboard state changes
+    // animate to keyboard-adjusted position when keyboard state changes.
+    // WEB skips this: the sheet stays anchored at its frozen position/height
+    // (activePositions don't change with the keyboard, and the anchor geometry is
+    // frozen), so there's nothing to re-animate. Running a timing animation here
+    // would only introduce movement where the sheet should hold perfectly still.
     React.useEffect(() => {
+      if (isWeb) return
       if (isDragging || isHidden || !open || disableAnimation) return
       if (!frameSize || !screenSize) return
       // use timing animation to match iOS keyboard animation (~250ms)
@@ -577,6 +812,11 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
     React.useEffect(() => {
       if (!open && isKeyboardVisible) {
         dismissKeyboard()
+        // if the sheet was closed mid-drag the keyboard-hide handler was paused
+        // and a hide could be left pending — clear it so isKeyboardVisible can't
+        // stick true after the sheet is gone. (no-op for a normal close.)
+        pauseKeyboardHandler.current = false
+        flushPendingHide()
       }
     }, [open])
 
@@ -601,61 +841,128 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
       pauseKeyboardHandler,
     })
 
-    const handleAnimationViewLayout = React.useCallback(
+    // ignore any layout measured while the soft keyboard is up (web +
+    // moveOnKeyboardChange): the visual viewport (which RN's web layout follows)
+    // shrinks, so the height would be the collapsed sheet — keeping it would
+    // recompute the fit anchor and fly the frame. a LIVE DOM check, NOT the
+    // isKeyboardVisible React state, is required: the state lags the resize, so
+    // the first shrunk onLayout lands before the flag flips. holding the measured
+    // sizes keeps the sheet anchored; the scroll content shifts to clear the kb.
+    const ignoreLayoutForKeyboard = useEvent(
+      () => isWeb && moveOnKeyboardChange && getWebKeyboardHeight() >= MIN_KEYBOARD_HEIGHT
+    )
+
+    // AUTOFOCUS-ON-OPEN seed gates. normally a layout measured while the keyboard
+    // is up is dropped (it's the shrunk/collapsed sheet). but if the keyboard rose
+    // before ANY keyboard-free baseline was captured (the autofocus race),
+    // dropping every measurement leaves frameSize/screenSize stuck at 0 forever
+    // and the freeze never engages.
+    //
+    // frame: while seeding (not settled) the scroll view is unclipped and the
+    // tail padding suppressed, so the frame measures toward its pure pre-keyboard
+    // content height. the first keyboard-up pass is still clipped at the consumer
+    // maxHeight; the override only unclips it the following pass, so the frame
+    // grows. we take the MAX and mark the seed SETTLED once it stops growing
+    // (handled in handleAnimationViewLayout) — then later keyboard-up layouts are
+    // dropped again so the re-enabled tail padding can't inflate the frame.
+    const shouldSeedKbFrame = useEvent(
+      () =>
+        isWebKbSheet &&
+        !hasCleanKbBaseline.current &&
+        !seedSettled.current &&
+        ignoreLayoutForKeyboard()
+    )
+    // screen (= maxContentSize): keep reconstructing from the stable viewport for
+    // the whole keyboard-up-without-clean-baseline window.
+    const shouldSeedKbScreen = useEvent(
+      () => isWebKbSheet && !hasCleanKbBaseline.current && ignoreLayoutForKeyboard()
+    )
+
+    const handleAnimationViewLayout = useEvent((e: LayoutChangeEvent) => {
+      // don't update frameSize during exit animation to prevent position jumps
+      if (!open && stableFrameSize.current !== 0) {
+        return
+      }
+
+      const seeding = shouldSeedKbFrame()
+      if (!seeding && ignoreLayoutForKeyboard()) return
+
+      // avoid bugs where it grows forever for whatever reason
+      // For inline mode (non-modal), don't cap at window height - use actual layout
+      const layoutHeight = e.nativeEvent?.layout.height
+      // while seeding, the keyboardStableFrameHeight fallback has unclipped the
+      // scroll view (capped at the stable screen) and the tail padding is
+      // suppressed, so this measures the pure pre-keyboard content height — cap it
+      // at the stable viewport like modal does.
+      const next =
+        modal || seeding
+          ? Math.min(layoutHeight, getStableViewportHeight())
+          : layoutHeight
+      if (!next) return
+      // round: web onLayout reports sub-pixel heights (e.g. 499.99996) that jitter
+      // frame to frame as the view transforms; the raw float would re-fire every
+      // effect that depends on frameSize on each drag move.
+      const rounded = Math.round(next)
+      // seeding the frame: grow the baseline toward the unclipped content height.
+      // the first keyboard-up pass is clipped; the scroll-view override unclips it
+      // the next pass so it grows. once a pass doesn't exceed the running max the
+      // content has settled — mark the seed done so the next render exits the seed
+      // phase (freezeForKb pins this height, tail padding re-enables for scroll).
+      if (seeding) {
+        if (rounded > stableKbGeom.current.frame) {
+          stableKbGeom.current.frame = rounded
+        } else if (stableKbGeom.current.frame > 0) {
+          seedSettled.current = true
+        }
+      }
+      setFrameSize(rounded)
+    })
+
+    const handleMaxContentViewLayout = React.useCallback(
       (e: LayoutChangeEvent) => {
-        // FIX: Don't update frameSize during exit animation to prevent position jumps
-        if (!open && stableFrameSize.current !== 0) {
+        // same keyboard guard so screenSize (= maxContentSize) stays the full
+        // pre-keyboard viewport — except while seeding the baseline (see above),
+        // where we use the stable layout viewport directly so screenSize lands at
+        // the full pre-keyboard height instead of the shrunk visual viewport.
+        if (shouldSeedKbScreen()) {
+          setMaxContentSize(Math.round(getStableViewportHeight()))
           return
         }
-
+        if (ignoreLayoutForKeyboard()) return
         // avoid bugs where it grows forever for whatever reason
-        // For inline mode (non-modal), don't cap at window height - use actual layout
-        const layoutHeight = e.nativeEvent?.layout.height
-        const next = modal
-          ? Math.min(layoutHeight, Dimensions.get(relativeDimensionTo).height)
-          : layoutHeight
+        const next = Math.min(e.nativeEvent?.layout.height, getStableViewportHeight())
         if (!next) return
-        setFrameSize(next)
+        // round to avoid sub-pixel churn re-firing size-dependent effects
+        setMaxContentSize(Math.round(next))
       },
-      [open, modal]
+      [ignoreLayoutForKeyboard, shouldSeedKbScreen]
     )
 
-    const handleMaxContentViewLayout = React.useCallback((e: LayoutChangeEvent) => {
-      // avoid bugs where it grows forever for whatever reason
-      const next = Math.min(
-        e.nativeEvent?.layout.height,
-        Dimensions.get(relativeDimensionTo).height
-      )
-      if (!next) return
-      setMaxContentSize(next)
-    }, [])
+    const getAnimatedNumberStyle = React.useCallback(
+      (val: number) => {
+        'worklet'
+        const translateY = frameSize === 0 ? hiddenSize : val
 
-    const animatedStyle = useAnimatedNumberStyle(animatedNumber, (val) => {
-      'worklet'
-      const translateY = frameSize === 0 ? hiddenSize : val
+        return {
+          transform: [{ translateY }],
+        }
+      },
+      [frameSize]
+    )
 
-      return {
-        transform: [{ translateY }],
-      }
-    })
+    const animatedStyle = useAnimatedNumberStyle(animatedNumber, getAnimatedNumberStyle)
 
     // we need to set this *after* fully closed to 0, to avoid it overlapping
     // the page when resizing quickly on web for example
     const [opacity, setOpacity] = React.useState(open ? 1 : 0)
     if (open && opacity === 0) {
       setOpacity(1)
-    }
-    React.useEffect(() => {
-      if (!open) {
-        // need to wait for animation complete, for now lets just do it naively
-        const tm = setTimeout(() => {
-          setOpacity(0)
-        }, 400)
-        return () => {
-          clearTimeout(tm)
-        }
+      // cancel any pending close fallback — sheet is reopening
+      if (opacityFallbackTimer.current) {
+        clearTimeout(opacityFallbackTimer.current)
+        opacityFallbackTimer.current = null
       }
-    }, [open])
+    }
 
     const forcedContentHeight = hasFit
       ? undefined
@@ -676,7 +983,14 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
     let contents = (
       <LayoutMeasurementController disable={!open}>
         <ParentSheetContext.Provider value={nextParentContext}>
-          <SheetProvider {...providerProps} setHasScrollView={setHasScrollView}>
+          <SheetProvider
+            {...providerProps}
+            keyboardOccludedHeight={keyboardOccludedHeight}
+            isKeyboardVisible={isKeyboardVisible}
+            keyboardStableFrameHeight={keyboardStableFrameHeight}
+            isKeyboardSeeding={seedingKbBaseline}
+            setHasScrollView={setHasScrollView}
+          >
             <GestureSheetProvider
               isDragging={isDragging}
               blockPan={blockPan}
@@ -761,14 +1075,30 @@ export const SheetImplementationCustom = React.forwardRef<View, SheetProps>(
     const shouldMountChildren = unmountChildrenWhenHidden ? !!opacity : true
 
     if (modal) {
+      // a modal sheet is teleported through <Portal> to the root portal host.
+      // that host is mounted by TamaguiProvider, which may sit ABOVE the app's
+      // GestureHandlerRootView - so the teleported content lands outside any
+      // rngh root and every gesture inside the sheet (the drag pan, pressables
+      // on the rngh press path) silently goes dead. re-establish an rngh root
+      // around the teleported content so it works regardless of where the app
+      // mounts GestureHandlerRootView.
+      //
+      // the root stays mounted and full-width whenever the sheet content is
+      // (so child layout/measurement/close-animation are unaffected) and only
+      // collapses to 0 height while closed so it occupies no hit area - see
+      // rnghRootStyleOpen/Closed above for why pointerEvents can't be used.
+      const RNGHRoot = getGestureHandlerState().RootView
+      const mountedContents = shouldMountChildren ? (
+        <ContainerComponent>{contents}</ContainerComponent>
+      ) : null
       const modalContents = (
         <Portal stackZIndex={zIndex} {...portalProps}>
-          {shouldMountChildren && (
-            <ContainerComponent>
-              <Theme contain forceClassName name={themeName}>
-                {contents}
-              </Theme>
-            </ContainerComponent>
+          {mountedContents && RNGHRoot ? (
+            <RNGHRoot style={open ? rnghRootStyleOpen : rnghRootStyleClosed}>
+              {mountedContents}
+            </RNGHRoot>
+          ) : (
+            mountedContents
           )}
         </Portal>
       )