fix: Long drop duration reordering issues (#406)

## Description

This PR fixes plain and teleported item animation when sortable items
are reordered before the item reached its drop position.

What was wrong?

- items reordering duration was the same as active item drop animation
duration, which is not correct,
- items drop animation was rapidly changed without smooth animation when
the drop target position was modified (e.g. because of the items order
change),
- app crashed when teleport was enabled/disabled during the drop
animation,

## Example recordings

### Without portal

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/0fceeb96-b5d2-4b1e-8062-1685056ddc28"
/> | <video
src="https://github.com/user-attachments/assets/445e04e6-729c-4e91-bb81-157340b044e8"
/> |

### With portal

| Before | After |
|-|-|
| <video
src="https://github.com/user-attachments/assets/7746658a-b653-4bb1-a4fb-e52eab1d90b8"
/> | <video
src="https://github.com/user-attachments/assets/dd791d10-dbf3-46cb-b9a7-42c3305c0e81"
/> |

Author: MatiPl01

packages/react-native-sortables/src/components/shared/DraggableView/ActiveItemPortal.tsx

@@ -12,14 +12,12 @@ type ActiveItemPortalProps = PropsWithChildren<{
   teleportedItemId: string;
   activationAnimationProgress: SharedValue<number>;
   renderTeleportedItemCell: () => ReactNode;
-  setIsTeleported: (isTeleported: boolean) => void;
 }>;
 
 export default function ActiveItemPortal({
   activationAnimationProgress,
   children,
   renderTeleportedItemCell,
-  setIsTeleported,
   teleportedItemId
 }: ActiveItemPortalProps) {
   const { teleport } = usePortalContext()!;
@@ -36,18 +34,16 @@ export default function ActiveItemPortal({
 
   const enableTeleport = () => {
     teleport(teleportedItemId, renderTeleportedItemCell());
-    setIsTeleported(true);
   };
 
   const disableTeleport = () => {
     runOnJS(teleport)(teleportedItemId, null);
-    setIsTeleported(false);
   };
 
   useAnimatedReaction(
     () => activationAnimationProgress.value,
-    progress => {
-      if (progress > 0 && !teleportEnabled.value) {
+    (progress, prevProgress) => {
+      if (prevProgress && progress > prevProgress && !teleportEnabled.value) {
         teleportEnabled.value = true;
         runOnJS(enableTeleport)();
       } else if (progress === 0 && teleportEnabled.value) {

packages/react-native-sortables/src/components/shared/DraggableView/DraggableView.tsx

@@ -63,6 +63,22 @@ function DraggableView({
     return () => removeItemMeasurements(key);
   }, [key, removeItemMeasurements, teleportedItemId]);
 
+  useEffect(() => {
+    if (!portalContext) {
+      setIsTeleported(false);
+    }
+
+    const unsubscribe = portalContext?.subscribe?.(
+      teleportedItemId,
+      setIsTeleported
+    );
+
+    return () => {
+      portalContext?.teleport?.(teleportedItemId, null);
+      unsubscribe?.();
+    };
+  }, [portalContext, teleportedItemId]);
+
   const withItemContext = (component: ReactNode) => (
     <ItemContextProvider
       activationAnimationProgress={activationAnimationProgress}
@@ -133,7 +149,6 @@ function DraggableView({
       <ActiveItemPortal
         activationAnimationProgress={activationAnimationProgress}
         renderTeleportedItemCell={renderTeleportedItemCell}
-        setIsTeleported={setIsTeleported}
         teleportedItemId={teleportedItemId}>
         {children}
       </ActiveItemPortal>

packages/react-native-sortables/src/providers/shared/PortalProvider.tsx

@@ -1,8 +1,12 @@
 import type { ReactNode } from 'react';
-import { Fragment, useCallback, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useSharedValue } from 'react-native-reanimated';
 
-import type { PortalContextType, Vector } from '../../types';
+import type {
+  PortalContextType,
+  PortalSubscription,
+  Vector
+} from '../../types';
 import { createProvider } from '../utils';
 import { PortalOutletProvider } from './PortalOutletProvider';
 
@@ -17,20 +21,47 @@ const { PortalProvider, usePortalContext } = createProvider('Portal', {
   const [teleportedNodes, setTeleportedNodes] = useState<
     Record<string, React.ReactNode>
   >({});
+  const subscribersRef = useRef<Record<string, Set<PortalSubscription>>>({});
 
   const activeItemAbsolutePosition = useSharedValue<null | Vector>(null);
 
-  const teleport = useCallback((id: string, node: React.ReactNode) => {
-    if (node) {
-      setTeleportedNodes(prev => ({ ...prev, [id]: node }));
-    } else {
-      setTeleportedNodes(prev => {
-        const { [id]: _, ...rest } = prev;
-        return rest;
-      });
+  useEffect(() => {
+    if (!enabled) {
+      setTeleportedNodes({});
     }
+  }, [enabled]);
+
+  const notifySubscribers = useCallback((id: string, isTeleported: boolean) => {
+    subscribersRef.current[id]?.forEach(subscriber => subscriber(isTeleported));
   }, []);
 
+  const teleport = useCallback(
+    (id: string, node: React.ReactNode) => {
+      if (node) {
+        setTeleportedNodes(prev => ({ ...prev, [id]: node }));
+        notifySubscribers(id, true);
+      } else {
+        setTeleportedNodes(prev => {
+          const { [id]: _, ...rest } = prev;
+          return rest;
+        });
+        notifySubscribers(id, false);
+      }
+    },
+    [notifySubscribers]
+  );
+
+  const subscribe = useCallback(
+    (id: string, subscriber: PortalSubscription) => {
+      subscribersRef.current[id] = subscribersRef.current[id] ?? new Set();
+      subscribersRef.current[id].add(subscriber);
+      return () => {
+        subscribersRef.current[id]?.delete(subscriber);
+      };
+    },
+    []
+  );
+
   return {
     children: (
       <Fragment>
@@ -45,6 +76,7 @@ const { PortalProvider, usePortalContext } = createProvider('Portal', {
     enabled,
     value: {
       activeItemAbsolutePosition,
+      subscribe,
       teleport
     }
   };

packages/react-native-sortables/src/providers/shared/hooks/useItemLayoutStyles.ts

@@ -1,13 +1,15 @@
 import type { ViewStyle } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import {
+  interpolate,
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   withTiming
 } from 'react-native-reanimated';
 
-import { type AnimatedStyleProp } from '../../../types';
+import type { AnimatedStyleProp, Vector } from '../../../types';
+import { areVectorsDifferent } from '../../../utils';
 import { useCommonValuesContext } from '../CommonValuesProvider';
 import useItemZIndex from './useItemZIndex';
 
@@ -32,45 +34,73 @@ export default function useItemLayoutStyles(
     activeItemKey,
     activeItemPosition,
     animateLayoutOnReorderOnly,
-    dropAnimationDuration,
     itemPositions,
     shouldAnimateLayout,
     usesAbsoluteLayout
   } = useCommonValuesContext();
 
   const zIndex = useItemZIndex(key, activationAnimationProgress);
+  const dropStartValues = useSharedValue<null | {
+    position: Vector;
+    progress: number;
+  }>(null);
 
   const translateX = useSharedValue<null | number>(null);
   const translateY = useSharedValue<null | number>(null);
 
   // Inactive item updater
   useAnimatedReaction(
     () => ({
+      activationProgress: activationAnimationProgress.value,
       isActive: activeItemKey.value === key,
-      position: itemPositions.value[key]
+      itemPosition: itemPositions.value[key]
     }),
-    ({ isActive, position }) => {
-      if (isActive || !position) {
+    ({ activationProgress, isActive, itemPosition }, prev) => {
+      if (isActive || !itemPosition) {
+        dropStartValues.value = null;
         return;
       }
 
       if (
         translateX.value === null ||
         translateY.value === null ||
         !shouldAnimateLayout.value ||
-        (activeItemKey.value === null &&
-          animateLayoutOnReorderOnly.value &&
+        (animateLayoutOnReorderOnly.value &&
+          activationProgress === 0 &&
           activeItemDropped.value)
       ) {
-        translateX.value = position.x;
-        translateY.value = position.y;
+        // No animation case
+        translateX.value = itemPosition.x;
+        translateY.value = itemPosition.y;
+      } else if (activationProgress > 0) {
+        // Drop animation case
+        if (
+          !dropStartValues.value ||
+          (prev?.itemPosition &&
+            areVectorsDifferent(prev.itemPosition, itemPosition))
+        ) {
+          dropStartValues.value = {
+            position: {
+              x: translateX.value,
+              y: translateY.value
+            },
+            progress: activationProgress
+          };
+        }
+
+        const {
+          position: { x, y },
+          progress
+        } = dropStartValues.value;
+        const animate = (from: number, to: number) =>
+          interpolate(activationProgress, [progress, 0], [from, to]);
+
+        translateX.value = animate(x, itemPosition.x);
+        translateY.value = animate(y, itemPosition.y);
       } else {
-        translateX.value = withTiming(position.x, {
-          duration: dropAnimationDuration.value
-        });
-        translateY.value = withTiming(position.y, {
-          duration: dropAnimationDuration.value
-        });
+        // Order change animation case
+        translateX.value = withTiming(itemPosition.x);
+        translateY.value = withTiming(itemPosition.y);
       }
     }
   );

packages/react-native-sortables/src/providers/shared/hooks/useTeleportedItemStyles.ts

@@ -21,63 +21,100 @@ export default function useTeleportedItemStyles(
   isActive: SharedValue<boolean>,
   activationAnimationProgress: SharedValue<number>
 ): StyleProp<AnimatedStyle<ViewStyle>> {
-  const { activeItemAbsolutePosition } = usePortalContext()!;
-  const { portalOutletMeasurements } = usePortalOutletContext()!;
+  const { activeItemAbsolutePosition } = usePortalContext() ?? {};
+  const { portalOutletMeasurements } = usePortalOutletContext() ?? {};
   const { containerRef, itemPositions } = useCommonValuesContext();
 
   const zIndex = useItemZIndex(key, activationAnimationProgress);
-  const dropStartTranslation = useSharedValue<null | Vector>(null);
 
-  // Inactive item updater (for drop animation)
+  const dropStartValues = useSharedValue<null | {
+    fromAbsolute: Vector;
+    progress: number;
+    toRelative: Vector;
+  }>(null);
+
+  // Drop start values calculation reaction
   useAnimatedReaction(
     () => ({
       active: isActive.value
     }),
     ({ active }) => {
-      if (!active) {
-        dropStartTranslation.value = activeItemAbsolutePosition.value;
+      if (active) {
+        dropStartValues.value = null;
+      } else if (
+        activeItemAbsolutePosition?.value &&
+        itemPositions.value[key]
+      ) {
+        dropStartValues.value = {
+          fromAbsolute: activeItemAbsolutePosition.value,
+          progress: activationAnimationProgress.value,
+          toRelative: itemPositions.value[key]
+        };
       }
     }
   );
 
   const absoluteItemPosition = useDerivedValue(() => {
-    let absolutePosition: null | Vector = null;
-
     if (isActive.value) {
-      absolutePosition = activeItemAbsolutePosition.value;
-    } else if (dropStartTranslation.value) {
-      const animate = (from: number, to: number) =>
-        interpolate(activationAnimationProgress.value, [1, 0], [from, to]);
-      const { x: startX, y: startY } = dropStartTranslation.value;
-
-      const containerMeasurements = measure(containerRef);
-      const itemPosition = itemPositions.value[key];
+      return activeItemAbsolutePosition?.value ?? null;
+    }
 
-      if (!containerMeasurements || !itemPosition) {
-        // This should never happen
+    if (dropStartValues.value) {
+      const measurements = measure(containerRef);
+      if (!measurements) {
         return null;
       }
 
-      absolutePosition = {
-        x: animate(startX, containerMeasurements.pageX + itemPosition.x),
-        y: animate(startY, containerMeasurements.pageY + itemPosition.y)
+      const { fromAbsolute, progress, toRelative } = dropStartValues.value;
+
+      const animate = (source: number, target: number) =>
+        interpolate(
+          activationAnimationProgress.value,
+          [progress, 0],
+          [source, target]
+        );
+
+      return {
+        x: animate(fromAbsolute.x, measurements.pageX + toRelative.x),
+        y: animate(fromAbsolute.y, measurements.pageY + toRelative.y)
       };
     }
 
-    return absolutePosition;
+    return null;
   });
 
+  // Drop start values updater on target position change
+  useAnimatedReaction(
+    () => itemPositions.value[key],
+    position => {
+      if (
+        isActive.value ||
+        activationAnimationProgress.value === 0 ||
+        !position ||
+        !absoluteItemPosition.value
+      ) {
+        return;
+      }
+
+      dropStartValues.value = {
+        fromAbsolute: absoluteItemPosition.value,
+        progress: activationAnimationProgress.value,
+        toRelative: position
+      };
+    }
+  );
+
   const animatedStyle = useAnimatedStyle(() => {
-    if (!portalOutletMeasurements.value || !absoluteItemPosition.value) {
+    if (!portalOutletMeasurements?.value || !absoluteItemPosition.value) {
       // This should never happen
-      return { opacity: 0 };
+      return { display: 'none' };
     }
 
     const { pageX: outletX, pageY: outletY } = portalOutletMeasurements.value;
     const { x: itemX, y: itemY } = absoluteItemPosition.value;
 
     return {
-      opacity: 1,
+      display: 'flex',
       transform: [
         { translateX: itemX - outletX },
         { translateY: itemY - outletY }

packages/react-native-sortables/src/types/providers/shared.ts

@@ -184,6 +184,7 @@ export type PortalSubscription = (isTeleported: boolean) => void;
 export type PortalContextType = {
   activeItemAbsolutePosition: SharedValue<null | Vector>;
   teleport: (id: string, node: ReactNode) => void;
+  subscribe: (id: string, subscriber: PortalSubscription) => () => void;
 };
 
 // PORTAL OUTLET