@lodev09/react-native-true-sheet 4.0.0-beta.21 → 4.0.0-beta.22

package/src/web/vaul/index.tsx

@@ -299,6 +299,7 @@ export function Root({
   const dismissAttempted = React.useRef(false);
   const keyboardIsOpen = React.useRef(false);
   const shouldAnimate = React.useRef(!defaultOpen);
+  const hasPresented = React.useRef(false);
   const previousDiffFromInitial = React.useRef(0);
   const drawerRef = React.useRef<HTMLDivElement>(null);
   const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -315,10 +316,14 @@ export function Root({
     onContentHeightChangeRef.current?.(measuredContentHeight);
   }, [measuredContentHeight]);
 
-  const onSnapPointChange = React.useCallback((activeSnapPointIndex: number) => {
+  const onSnapPointChange = React.useCallback((activeSnapPointIndex: number, animated: boolean) => {
     // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
     if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1)
       openTime.current = new Date();
+    // Instant snaps do not emit transition events for position tracking.
+    if (!animated && drawerRef.current) {
+      onPositionChangeRef.current?.(drawerRef.current.getBoundingClientRect().top);
+    }
   }, []);
 
   const {
@@ -1017,6 +1022,8 @@ export function Root({
           dismissible,
           onDismissAttempt,
           shouldAnimate,
+          initialAnimated,
+          hasPresented,
           handleOnly,
           isOpen,
           isDragging,
@@ -1175,6 +1182,8 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
       container,
       handleOnly,
       shouldAnimate,
+      initialAnimated,
+      hasPresented,
       autoFocus,
       onPositionChangeRef,
       setContentHeight,
@@ -1423,15 +1432,18 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(
           wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
         } else if (isOpen && !wasOpenRef.current) {
           wrapper.style.transition = 'none';
-          wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
-          // eslint-disable-next-line no-void
-          void wrapper.offsetHeight;
-          wrapper.style.transition = transition;
+          if (hasPresented.current || initialAnimated) {
+            wrapper.style.transform = `translate3d(0, ${viewportH}px, 0)`;
+            // eslint-disable-next-line no-void
+            void wrapper.offsetHeight;
+            wrapper.style.transition = transition;
+          }
           wrapper.style.transform = 'translate3d(0, 0, 0)';
+          hasPresented.current = true;
         }
       }
       wasOpenRef.current = isOpen;
-    }, [isOpen, detached, drawerRef]);
+    }, [isOpen, detached, drawerRef, initialAnimated, hasPresented]);
 
     // Subsequent snap writes belong to useSnapPoints. A React style update on
     // release would overwrite the live drag value before its transition starts.

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

@@ -35,7 +35,7 @@ export function useSnapPoints({
   fadeFromIndex?: number;
   drawerRef: React.RefObject<HTMLDivElement | null>;
   overlayRef: React.RefObject<HTMLDivElement | null>;
-  onSnapPointChange(activeSnapPointIndex: number): void;
+  onSnapPointChange(activeSnapPointIndex: number, animated: boolean): void;
   direction?: DrawerDirection;
   container?: HTMLElement | null | undefined;
   snapToSequentialPoint?: boolean;
@@ -193,17 +193,31 @@ export function useSnapPoints({
     });
   };
 
-  // Skip the transition on the very first snap when the consumer opts out of
-  // the initial presentation animation. All subsequent snaps still animate.
+  // Initial measurements can take several commits before the first paint.
+  // Keep all of them unanimated when initial presentation animation is disabled.
   const hasSnappedRef = React.useRef(false);
+  const initialSnapFrameRef = React.useRef<number | null>(null);
+  React.useEffect(
+    () => () => {
+      if (initialSnapFrameRef.current !== null) {
+        window.cancelAnimationFrame(initialSnapFrameRef.current);
+        initialSnapFrameRef.current = null;
+      }
+    },
+    []
+  );
   const snapToPoint = React.useCallback(
     (dimension: number) => {
+      if (!drawerRef.current) return;
       const newSnapPointIndex =
         snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
-      onSnapPointChange(newSnapPointIndex);
 
       const animateThisSnap = hasSnappedRef.current || initialAnimated;
-      hasSnappedRef.current = true;
+      if (initialSnapFrameRef.current === null) {
+        initialSnapFrameRef.current = window.requestAnimationFrame(() => {
+          hasSnappedRef.current = true;
+        });
+      }
       // One animated value drives both the translation and the visible height.
       set(drawerRef.current, {
         'transition': animateThisSnap
@@ -216,6 +230,9 @@ export function useSnapPoints({
       // Snapping implies drag overshoot (if any) should be undone.
       setDetachedWrapperTransform(0, animateThisSnap);
 
+      const overlayTransition = animateThisSnap
+        ? `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`
+        : 'none';
       if (
         snapPointsOffset &&
         newSnapPointIndex !== snapPointsOffset.length - 1 &&
@@ -224,24 +241,33 @@ export function useSnapPoints({
         newSnapPointIndex < fadeFromIndex
       ) {
         set(overlayRef.current, {
-          transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+          transition: overlayTransition,
           opacity: '0',
           pointerEvents: 'none',
         });
       } else {
         set(overlayRef.current, {
-          transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+          transition: overlayTransition,
           opacity: '1',
           pointerEvents: 'auto',
         });
       }
 
+      onSnapPointChange(newSnapPointIndex, animateThisSnap);
       setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
     },
-    [drawerRef.current, snapPoints, snapPointsOffset, fadeFromIndex, overlayRef, setActiveSnapPoint]
+    [
+      drawerRef.current,
+      snapPoints,
+      snapPointsOffset,
+      fadeFromIndex,
+      overlayRef,
+      setActiveSnapPoint,
+      initialAnimated,
+    ]
   );
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     if (!isOpen) return;
     if (activeSnapPoint || activeSnapPointProp) {
       const newIndex =