react-native-reorderable-list 0.15.0 → 0.16.0

package/src/components/ReorderableListCore.tsx

@@ -3,6 +3,7 @@ import {
   CellRendererProps,
   FlatList,
   FlatListProps,
+  InteractionManager,
   LayoutChangeEvent,
   Platform,
   ScrollView,
@@ -42,7 +43,7 @@ import {
   SCALE_ANIMATION_CONFIG_DEFAULT,
 } from './constants';
 import {ReorderableListCell} from './ReorderableListCell';
-import {usePropAsSharedValue} from '../hooks';
+import {usePropAsSharedValue, useStableCallback} from '../hooks';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList,
@@ -87,10 +88,12 @@ const ReorderableListCore = <T,>(
     cellAnimations,
     dragEnabled = true,
     shouldUpdateActiveItem,
+    itemLayoutAnimation,
     panGesture,
     panEnabled = true,
     panActivateAfterLongPress,
     data,
+    keyExtractor,
     ...rest
   }: ReorderableListCoreProps<T>,
   ref: React.ForwardedRef<FlatList<T>>,
@@ -98,6 +101,7 @@ const ReorderableListCore = <T,>(
   const scrollEnabled = rest.scrollEnabled ?? true;
 
   const flatListRef = useAnimatedRef<FlatList>();
+  const markedCellsRef = useRef<Map<string, 1>>();
   const [activeIndex, setActiveIndex] = useState(-1);
   const prevItemCount = useRef(data.length);
 
@@ -139,6 +143,12 @@ const ReorderableListCore = <T,>(
   const dragDirection = useSharedValue(0);
   const lastDragDirectionPivot = useSharedValue<number | null>(null);
 
+  const itemLayoutAnimationPropRef = useRef(itemLayoutAnimation);
+  itemLayoutAnimationPropRef.current = itemLayoutAnimation;
+
+  const keyExtractorPropRef = useRef(keyExtractor);
+  keyExtractorPropRef.current = keyExtractor;
+
   const scrollEnabledProp = usePropAsSharedValue(scrollEnabled);
   const animationDurationProp = usePropAsSharedValue(animationDuration);
   const autoscrollActivationDeltaProp = usePropAsSharedValue(
@@ -169,6 +179,42 @@ const ReorderableListCore = <T,>(
     prevItemCount.current = data.length;
   }, [data.length, itemHeight, itemOffset, itemCount]);
 
+  useEffect(() => {
+    if (
+      !markedCellsRef.current ||
+      // Clean keys once they surpass by 10% the size of the list itself.
+      markedCellsRef.current.size <= data.length + Math.ceil(data.length * 0.1)
+    ) {
+      return;
+    }
+
+    // Can be heavy to loop through all items, defer the task to run after interactions.
+    const task = InteractionManager.runAfterInteractions(() => {
+      if (!markedCellsRef.current) {
+        return;
+      }
+
+      const map = new Map<string, 1>();
+      for (let i = 0; i < data.length; i++) {
+        const key = keyExtractorPropRef.current?.(data[i], i) || i.toString();
+        if (markedCellsRef.current.has(key)) {
+          map.set(key, markedCellsRef.current.get(key)!);
+        }
+      }
+
+      markedCellsRef.current = map;
+    });
+
+    return () => {
+      task.cancel();
+    };
+  }, [data]);
+
+  const createCellKey = useCallback((cellKey: string) => {
+    const mark = markedCellsRef.current?.get(cellKey) || 0;
+    return `${cellKey}#${mark}`;
+  }, []);
+
   const listContextValue = useMemo(
     () => ({
       draggedHeight,
@@ -176,6 +222,7 @@ const ReorderableListCore = <T,>(
       draggedIndex,
       dragEndHandlers,
       activeIndex,
+      itemLayoutAnimation: itemLayoutAnimationPropRef,
       cellAnimations: {
         ...cellAnimations,
         transform:
@@ -195,6 +242,7 @@ const ReorderableListCore = <T,>(
       dragEndHandlers,
       activeIndex,
       cellAnimations,
+      itemLayoutAnimationPropRef,
       scaleDefault,
       opacityDefault,
     ],
@@ -394,9 +442,28 @@ const ReorderableListCore = <T,>(
     setTimeout(runOnUI(resetSharedValues), animationDurationProp.value);
   }, [resetSharedValues, animationDurationProp]);
 
+  const markCells = (fromIndex: number, toIndex: number) => {
+    if (!markedCellsRef.current) {
+      markedCellsRef.current = new Map();
+    }
+
+    const start = Math.min(fromIndex, toIndex);
+    const end = Math.max(fromIndex, toIndex);
+    for (let i = start; i <= end; i++) {
+      const cellKey = keyExtractorPropRef.current?.(data[i], i) || i.toString();
+      if (!markedCellsRef.current.has(cellKey)) {
+        markedCellsRef.current.set(cellKey, 1);
+      } else {
+        markedCellsRef.current.delete(cellKey);
+      }
+    }
+  };
+
   const reorder = (fromIndex: number, toIndex: number) => {
     runOnUI(resetSharedValues)();
 
+    markCells(fromIndex, toIndex);
+
     if (fromIndex !== toIndex) {
       onReorder({from: fromIndex, to: toIndex});
     }
@@ -950,12 +1017,12 @@ const ReorderableListCore = <T,>(
     onScroll || null,
   ]);
 
-  const renderAnimatedCell = useCallback(
+  const renderAnimatedCell = useStableCallback(
     ({cellKey, ...props}: CellRendererProps<T>) => (
       <ReorderableListCell
         {...props}
         // forces remount with key change on reorder
-        key={`${cellKey}+${props.index}`}
+        key={createCellKey(cellKey)}
         itemOffset={itemOffset}
         itemHeight={itemHeight}
         dragY={dragY}
@@ -964,14 +1031,6 @@ const ReorderableListCore = <T,>(
         startDrag={startDrag}
       />
     ),
-    [
-      itemOffset,
-      itemHeight,
-      dragY,
-      draggedIndex,
-      animationDurationProp,
-      startDrag,
-    ],
   );
 
   return (
@@ -981,6 +1040,7 @@ const ReorderableListCore = <T,>(
           {...rest}
           ref={handleRef}
           data={data}
+          keyExtractor={keyExtractor}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
           onScroll={composedScrollHandler}

package/src/contexts/ReorderableListContext.ts

@@ -2,13 +2,14 @@ import React from 'react';
 
 import type {SharedValue} from 'react-native-reanimated';
 
-import {ReorderableListCellAnimations} from '../types';
+import {ItemLayoutAnimation, ReorderableListCellAnimations} from '../types';
 
 interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
   draggedHeight: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
   activeIndex: number;
+  itemLayoutAnimation: React.MutableRefObject<ItemLayoutAnimation | undefined>;
   cellAnimations: ReorderableListCellAnimations;
 }
 

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useIsActive';
 export * from './useReorderableDrag';
 export * from './useReorderableDragEnd';
 export * from './useReorderableDragStart';
+export * from './useStableCallback';

package/src/hooks/useStableCallback.ts

@@ -0,0 +1,16 @@
+import {useCallback, useLayoutEffect, useRef} from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Fn = (...args: any[]) => any;
+
+export const useStableCallback = <T extends Fn>(value: T) => {
+  const callback = useRef<T>(value);
+
+  useLayoutEffect(() => {
+    callback.current = value;
+  });
+
+  return useCallback((...args: Parameters<T>): ReturnType<T> => {
+    return callback.current?.(...args);
+  }, []);
+};

package/src/types/misc.ts

@@ -1,4 +1,6 @@
-import {SharedValue} from 'react-native-reanimated';
+import {ComponentProps} from 'react';
+
+import Animated, {SharedValue} from 'react-native-reanimated';
 
 export enum ReorderableListState {
   IDLE = 0,
@@ -7,6 +9,11 @@ export enum ReorderableListState {
   AUTOSCROLL,
 }
 
+export type ItemLayoutAnimation = Exclude<
+  ComponentProps<typeof Animated.View>['layout'],
+  undefined
+>;
+
 export type SharedValueOrType<T> = {
   [TKey in keyof T]?: SharedValue<T[TKey]> | T[TKey];
 };

package/src/types/props.ts

@@ -20,7 +20,7 @@ import type {
 import {PanGesture} from 'react-native-gesture-handler';
 import {SharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 
-import {MaximumOneOf, SharedValueOrType} from './misc';
+import {ItemLayoutAnimation, MaximumOneOf, SharedValueOrType} from './misc';
 
 export interface ReorderableListReorderEvent {
   /**
@@ -131,6 +131,10 @@ export interface ReorderableListProps<T>
    * @deprecated In favor of `panGesture` prop.
    */
   panActivateAfterLongPress?: number;
+  /**
+   * Layout animation when the item is added to and/or removed from the view hierarchy. To skip entering or exiting animations use the LayoutAnimationConfig component from [Reanimated](https://docs.swmansion.com/react-native-reanimated).
+   */
+  itemLayoutAnimation?: ItemLayoutAnimation;
   /**
    * Event fired after an item is released and the list is reordered.
    */