feat: Make drag activation timings and drop animation duration customizable (#226)

## Description

This PR exposes props changing the delay and duration of the item drag
activation. It also adds a separate prop for dragged item drop animation
duration customization (when the active item is released and animated to
its target position).

This PR also fixes bug that something occurred when an item was added to
the sortable component after initial render and the user started
dragging this item before any other layout change. In this case, the
item drop animation was immediate, which was an invalid behavior.

Author: MatiPl01

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

@@ -101,6 +101,7 @@ export default function DraggableView({
         <GestureDetector gesture={gesture}>
           <ItemDecoration
             isBeingActivated={isBeingActivated}
+            itemKey={key}
             pressProgress={pressProgress}
             // Keep onLayout the closest to the children to measure the real item size
             // (without paddings or other style changes made to the wrapper component)

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

@@ -41,7 +41,7 @@ function DropIndicator({ DropIndicatorComponent, style }: DropIndicatorProps) {
 
   const dropIndex = useSharedValue(0);
   const dropPosition = useSharedValue<Vector>({ x: 0, y: 0 });
-  const prevTouchedItemKey = useSharedValue<null | string>(null);
+  const prevUpdateItemKey = useSharedValue<null | string>(null);
 
   const x = useSharedValue<null | number>(null);
   const y = useSharedValue<null | number>(null);
@@ -59,7 +59,7 @@ function DropIndicator({ DropIndicatorComponent, style }: DropIndicatorProps) {
         dropPosition.value = positions[key] ?? { x: 0, y: 0 };
 
         const update = (target: SharedValue<null | number>, value: number) => {
-          if (target.value === null || prevTouchedItemKey.value === null) {
+          if (target.value === null || prevUpdateItemKey.value === null) {
             target.value = value;
           } else {
             target.value = withTiming(value, {
@@ -74,7 +74,7 @@ function DropIndicator({ DropIndicatorComponent, style }: DropIndicatorProps) {
         x.value = null;
         y.value = null;
       }
-      prevTouchedItemKey.value = key;
+      prevUpdateItemKey.value = key;
     }
   );
 

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

@@ -5,7 +5,8 @@ import Animated, {
   interpolate,
   interpolateColor,
   useAnimatedStyle,
-  useDerivedValue
+  useDerivedValue,
+  withTiming
 } from 'react-native-reanimated';
 
 import { useCommonValuesContext } from '../../providers';
@@ -14,54 +15,69 @@ type ItemDecorationProps = {
   isBeingActivated: SharedValue<boolean>;
   pressProgress: SharedValue<number>;
   onLayout?: ViewProps['onLayout'];
+  itemKey: string;
 } & ViewProps;
 
 export default function ItemDecoration({
   isBeingActivated,
+  itemKey: key,
   pressProgress,
   ...rest
 }: ItemDecorationProps) {
   const {
     activeItemOpacity,
     activeItemScale,
     activeItemShadowOpacity,
+    dragActivationDuration,
     inactiveAnimationProgress,
     inactiveItemOpacity,
     inactiveItemScale,
-    itemsStyleOverride
+    itemsStyleOverride,
+    prevTouchedItemKey
   } = useCommonValuesContext();
 
-  const resultingProgress = useDerivedValue(() =>
-    isBeingActivated.value || pressProgress.value > 0
-      ? pressProgress.value
-      : -inactiveAnimationProgress.value
-  );
+  const adjustedInactiveProgress = useDerivedValue(() => {
+    if (isBeingActivated.value || prevTouchedItemKey.value === key) {
+      return withTiming(0, { duration: dragActivationDuration.value });
+    }
+
+    return interpolate(
+      pressProgress.value,
+      [0, 1],
+      [inactiveAnimationProgress.value, 0]
+    );
+  });
 
   const animatedStyle = useAnimatedStyle(() => {
-    const progress = resultingProgress.value;
+    const progress = pressProgress.value;
+    const zeroProgressOpacity = interpolate(
+      adjustedInactiveProgress.value,
+      [0, 1],
+      [1, inactiveItemOpacity.value]
+    );
+    const zeroProgressScale = interpolate(
+      adjustedInactiveProgress.value,
+      [0, 1],
+      [1, inactiveItemScale.value]
+    );
 
     return {
       opacity: interpolate(
         progress,
-        [-1, 0, 1],
-        [inactiveItemOpacity.value, 1, activeItemOpacity.value]
+        [0, 1],
+        [zeroProgressOpacity, activeItemOpacity.value]
       ),
       shadowColor: interpolateColor(
         progress,
-        [-1, 0, 1],
-        [
-          'transparent',
-          'transparent',
-          `rgba(0, 0, 0, ${activeItemShadowOpacity.value})`
-        ]
+        [0, 1],
+        ['transparent', `rgba(0, 0, 0, ${activeItemShadowOpacity.value})`]
       ),
-      shadowOpacity: interpolate(progress, [-1, 0, 1], [0, 0, 1]),
       transform: [
         {
           scale: interpolate(
             progress,
-            [-1, 0, 1],
-            [inactiveItemScale.value, 1, activeItemScale.value]
+            [0, 1],
+            [zeroProgressScale, activeItemScale.value]
           )
         }
       ],
@@ -79,6 +95,7 @@ const styles = StyleSheet.create({
       height: 0,
       width: 0
     },
+    shadowOpacity: 1,
     shadowRadius: 5
   }
 });

packages/react-native-sortables/src/constants/layout.ts

@@ -1,3 +1,3 @@
 export const OFFSET_EPS = 1;
-export const ACTIVATION_FAIL_OFFSET = 20;
+export const DRAG_ACTIVATION_FAIL_OFFSET = 20;
 export const EXTRA_SWAP_OFFSET = 5;

packages/react-native-sortables/src/constants/layoutAnimations.ts

@@ -1,18 +1,17 @@
-/* eslint-disable import/no-unused-modules */
 import { type LayoutAnimation, withTiming } from 'react-native-reanimated';
 
-import { ITEM_ANIMATION_DURATION } from './timings';
+import { ITEM_LAYOUT_ANIMATION_DURATION } from './timings';
 
 export const SortableItemExiting = (): LayoutAnimation => {
   'worklet';
   const animations = {
     opacity: withTiming(0, {
-      duration: ITEM_ANIMATION_DURATION
+      duration: ITEM_LAYOUT_ANIMATION_DURATION
     }),
     transform: [
       {
         scale: withTiming(0.5, {
-          duration: ITEM_ANIMATION_DURATION
+          duration: ITEM_LAYOUT_ANIMATION_DURATION
         })
       }
     ]
@@ -31,12 +30,12 @@ export const SortableItemEntering = (): LayoutAnimation => {
   'worklet';
   const animations = {
     opacity: withTiming(1, {
-      duration: ITEM_ANIMATION_DURATION
+      duration: ITEM_LAYOUT_ANIMATION_DURATION
     }),
     transform: [
       {
         scale: withTiming(1, {
-          duration: ITEM_ANIMATION_DURATION
+          duration: ITEM_LAYOUT_ANIMATION_DURATION
         })
       }
     ]

packages/react-native-sortables/src/constants/props.ts

@@ -9,7 +9,9 @@ import type {
   SortableGridProps
 } from '../types';
 import { defaultKeyExtractor } from '../utils/keys';
+import { DRAG_ACTIVATION_FAIL_OFFSET } from './layout';
 import { SortableItemEntering, SortableItemExiting } from './layoutAnimations';
+import { DRAG_ACTIVATION_DELAY, DRAG_ANIMATION_DURATION } from './timings';
 
 export const STYLE_PROPS = ['dropIndicatorStyle'] as const;
 
@@ -32,6 +34,10 @@ export const DEFAULT_SHARED_PROPS = {
   autoScrollEnabled: true,
   autoScrollSpeed: 1,
   debug: false,
+  dragActivationDelay: DRAG_ACTIVATION_DELAY,
+  dragActivationDuration: DRAG_ANIMATION_DURATION,
+  dragActivationFailOffset: DRAG_ACTIVATION_FAIL_OFFSET,
+  dropAnimationDuration: DRAG_ANIMATION_DURATION,
   dropIndicatorStyle: {
     backgroundColor: 'rgba(0, 0, 0, 0.1)',
     borderColor: 'black',

packages/react-native-sortables/src/constants/timings.ts

@@ -1,3 +1,3 @@
-export const ITEM_ANIMATION_DURATION = 300;
-export const TIME_TO_ACTIVATE_PAN = 500;
-export const ACTIVATE_PAN_ANIMATION_DELAY = 250;
+export const DRAG_ANIMATION_DURATION = 300;
+export const ITEM_LAYOUT_ANIMATION_DURATION = 300;
+export const DRAG_ACTIVATION_DELAY = 200;

packages/react-native-sortables/src/providers/SharedProvider.tsx

@@ -10,6 +10,7 @@ import type {
   ActiveItemSnapSettings,
   Animatable,
   AutoScrollSettings,
+  ItemActivationSettings,
   PartialBy,
   SortableCallbacks
 } from '../types';
@@ -33,6 +34,7 @@ type SharedProviderProps = PropsWithChildren<
   } & ActiveItemDecorationSettings &
     ActiveItemSnapSettings &
     PartialBy<AutoScrollSettings, 'scrollableRef'> &
+    Required<ItemActivationSettings> &
     Required<SortableCallbacks>
 >;
 

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

@@ -14,6 +14,7 @@ import type {
   Animatable,
   CommonValuesContextType,
   Dimensions,
+  ItemActivationSettings,
   Maybe,
   Vector
 } from '../../types';
@@ -27,7 +28,8 @@ type CommonValuesProviderProps = PropsWithChildren<
     itemKeys: Array<string>;
     initialItemsStyleOverride?: ViewStyle;
   } & ActiveItemDecorationSettings &
-    ActiveItemSnapSettings
+    ActiveItemSnapSettings &
+    ItemActivationSettings
 >;
 
 const { CommonValuesProvider, useCommonValuesContext } = createProvider(
@@ -36,6 +38,10 @@ const { CommonValuesProvider, useCommonValuesContext } = createProvider(
   activeItemOpacity: _activeItemOpacity,
   activeItemScale: _activeItemScale,
   activeItemShadowOpacity: _activeItemShadowOpacity,
+  dragActivationDelay: _dragActivationDelay,
+  dragActivationDuration: _dragActivationDuration,
+  dragActivationFailOffset: _dragActivationFailOffset,
+  dropAnimationDuration: _dropAnimationDuration,
   enableActiveItemSnap: _enableActiveItemSnap,
   inactiveItemOpacity: _inactiveItemOpacity,
   inactiveItemScale: _inactiveItemScale,
@@ -53,7 +59,7 @@ const { CommonValuesProvider, useCommonValuesContext } = createProvider(
     Object.fromEntries(indexToKey.value.map((key, index) => [key, index]))
   );
 
-  // POSITIONs
+  // POSITIONS
   const itemPositions = useSharedValue<Record<string, Vector>>({});
   const touchPosition = useSharedValue<Vector | null>(null);
   const touchedItemPosition = useSharedValue<Vector | null>(null);
@@ -70,12 +76,21 @@ const { CommonValuesProvider, useCommonValuesContext } = createProvider(
 
   // DRAG STATE
   const touchedItemKey = useSharedValue<null | string>(null);
+  const prevTouchedItemKey = useSharedValue<null | string>(null);
   const activeItemKey = useSharedValue<null | string>(null);
   const activationState = useSharedValue(DragActivationState.INACTIVE);
   const activationProgress = useSharedValue(0);
   const inactiveAnimationProgress = useSharedValue(0);
   const activeItemDropped = useSharedValue(true);
 
+  // ITEM ACTIVATION SETTINGS
+  const dragActivationDelay = useAnimatableValue(_dragActivationDelay);
+  const dragActivationDuration = useAnimatableValue(_dragActivationDuration);
+  const dragActivationFailOffset = useAnimatableValue(
+    _dragActivationFailOffset
+  );
+  const dropAnimationDuration = useAnimatableValue(_dropAnimationDuration);
+
   // ACTIVE ITEM DECORATION
   const activeItemOpacity = useAnimatableValue(_activeItemOpacity);
   const activeItemScale = useAnimatableValue(_activeItemScale);
@@ -113,6 +128,10 @@ const { CommonValuesProvider, useCommonValuesContext } = createProvider(
       containerHeight,
       containerRef,
       containerWidth,
+      dragActivationDelay,
+      dragActivationDuration,
+      dragActivationFailOffset,
+      dropAnimationDuration,
       enableActiveItemSnap,
       inactiveAnimationProgress,
       inactiveItemOpacity,
@@ -122,6 +141,7 @@ const { CommonValuesProvider, useCommonValuesContext } = createProvider(
       itemPositions,
       itemsStyleOverride,
       keyToIndex,
+      prevTouchedItemKey,
       snapOffsetX,
       snapOffsetY,
       sortEnabled,