react-native-reorderable-list 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reorderable-list",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "Reorderable list for React Native applications, powered by Reanimated",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -81,8 +81,8 @@
     "react": "18.3.1",
     "react-native": "0.76.5",
     "react-native-builder-bob": "^0.20.0",
-    "react-native-gesture-handler": "^2.12.0",
-    "react-native-reanimated": "^3.15.3",
+    "react-native-gesture-handler": "2.12.0",
+    "react-native-reanimated": "3.12.0",
     "release-it": "^17.6.0",
     "tsc": "^2.0.4",
     "typescript": "5.0.4"
@@ -90,8 +90,8 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.6.0"
+    "react-native-gesture-handler": ">=2.12.0",
+    "react-native-reanimated": ">=3.12.0"
   },
   "engines": {
     "node": ">= 18.0.0"

package/src/components/ReorderableList.tsx

@@ -7,22 +7,20 @@ import type {ReorderableListProps} from '../types';
 const ReorderableListWithRef = <T,>(
   {scrollEnabled = true, ...rest}: ReorderableListProps<T>,
   ref: React.Ref<FlatList<T>>,
-) => {
-  return (
-    <ReorderableListCore
-      {...rest}
-      ref={ref}
-      scrollEnabled={scrollEnabled}
-      initialScrollViewScrollEnabled={true}
-      scrollable={true}
-      scrollViewContainerRef={undefined}
-      scrollViewScrollOffsetY={undefined}
-      scrollViewHeightY={undefined}
-      outerScrollGesture={undefined}
-      scrollViewScrollEnabled={undefined}
-    />
-  );
-};
+) => (
+  <ReorderableListCore
+    {...rest}
+    ref={ref}
+    scrollEnabled={scrollEnabled}
+    initialScrollViewScrollEnabled={true}
+    scrollable={true}
+    scrollViewContainerRef={undefined}
+    scrollViewScrollOffsetY={undefined}
+    scrollViewHeightY={undefined}
+    outerScrollGesture={undefined}
+    scrollViewScrollEnabled={undefined}
+  />
+);
 
 export const ReorderableList = forwardRef(ReorderableListWithRef) as <T>(
   props: ReorderableListProps<T> & React.RefAttributes<FlatList<T>>,

package/src/components/ReorderableListCell.tsx

@@ -1,5 +1,5 @@
 import React, {memo, useCallback, useMemo} from 'react';
-import type {CellRendererProps, LayoutChangeEvent} from 'react-native';
+import {CellRendererProps, LayoutChangeEvent} from 'react-native';
 
 import Animated, {
   Easing,
@@ -7,6 +7,7 @@ import Animated, {
   runOnUI,
   useAnimatedReaction,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
@@ -21,7 +22,6 @@ interface ReorderableListCellProps<T>
   itemHeight: SharedValue<number[]>;
   dragY: SharedValue<number>;
   draggedIndex: SharedValue<number>;
-  // animation duration as a shared value allows to avoid re-renders on value change
   animationDuration: SharedValue<number>;
 }
 
@@ -37,36 +37,39 @@ export const ReorderableListCell = memo(
     draggedIndex,
     animationDuration,
   }: ReorderableListCellProps<T>) => {
-    const dragHandler = useCallback(() => {
-      'worklet';
-
-      startDrag(index);
-    }, [startDrag, index]);
+    const {currentIndex, draggedHeight, scale, opacity, activeIndex} =
+      useContext(ReorderableListContext);
+    const dragHandler = useCallback(
+      () => runOnUI(startDrag)(index),
+      [startDrag, index],
+    );
 
+    const isActive = activeIndex === index;
     const contextValue = useMemo(
       () => ({
         index,
         dragHandler,
         draggedIndex,
+        isActive,
       }),
-      [index, dragHandler, draggedIndex],
+      [index, dragHandler, draggedIndex, isActive],
     );
-    const {currentIndex, draggedHeight} = useContext(ReorderableListContext);
 
-    const itemZIndex = useSharedValue(0);
-    const itemPositionY = useSharedValue(0);
-    const itemDragY = useSharedValue(0);
-    const itemIndex = useSharedValue(index);
+    // Keep separate animated reactions that update itemTranslateY
+    // otherwise animations might stutter if multiple are triggered
+    // (even in other cells, e.g. released item and reordering cells)
+    const itemTranslateY = useSharedValue(0);
+    const isActiveCell = useDerivedValue(() => draggedIndex.value === index);
 
     useAnimatedReaction(
       () => dragY.value,
       () => {
         if (
-          itemIndex.value === draggedIndex.value &&
+          index === draggedIndex.value &&
           currentIndex.value >= 0 &&
           draggedIndex.value >= 0
         ) {
-          itemDragY.value = dragY.value;
+          itemTranslateY.value = dragY.value;
         }
       },
     );
@@ -75,7 +78,7 @@ export const ReorderableListCell = memo(
       () => currentIndex.value,
       () => {
         if (
-          itemIndex.value !== draggedIndex.value &&
+          index !== draggedIndex.value &&
           currentIndex.value >= 0 &&
           draggedIndex.value >= 0
         ) {
@@ -84,12 +87,12 @@ export const ReorderableListCell = memo(
           const endMove = Math.max(draggedIndex.value, currentIndex.value);
           let newValue = 0;
 
-          if (itemIndex.value >= startMove && itemIndex.value <= endMove) {
+          if (index >= startMove && index <= endMove) {
             newValue = moveDown ? -draggedHeight.value : draggedHeight.value;
           }
 
-          if (newValue !== itemPositionY.value) {
-            itemPositionY.value = withTiming(newValue, {
+          if (newValue !== itemTranslateY.value) {
+            itemTranslateY.value = withTiming(newValue, {
               duration: animationDuration.value,
               easing: Easing.out(Easing.ease),
             });
@@ -98,20 +101,22 @@ export const ReorderableListCell = memo(
       },
     );
 
-    useAnimatedReaction(
-      () => draggedIndex.value === index,
-      newValue => {
-        itemZIndex.value = newValue ? 999 : 0;
-      },
-    );
-
-    const animatedStyle = useAnimatedStyle(() => ({
-      zIndex: itemZIndex.value,
-      transform: [
-        {translateY: itemDragY.value},
-        {translateY: itemPositionY.value},
-      ],
-    }));
+    const animatedStyle = useAnimatedStyle(() => {
+      if (isActiveCell.value) {
+        return {
+          transform: [{translateY: itemTranslateY.value}, {scale: scale.value}],
+          opacity: opacity.value,
+          zIndex: 999,
+        };
+      }
+
+      return {
+        transform: [{translateY: itemTranslateY.value}],
+        // TODO: move to stylesheet when this is fixed
+        // https://github.com/software-mansion/react-native-reanimated/issues/6681#issuecomment-2514228447
+        zIndex: 0,
+      };
+    });
 
     const handleLayout = (e: LayoutChangeEvent) => {
       runOnUI((y: number, height: number) => {

package/src/components/ReorderableListCore/ReorderableListCore.tsx

@@ -12,9 +12,12 @@ import {
   GestureDetector,
   NativeGesture,
 } from 'react-native-gesture-handler';
-import Animated, {SharedValue} from 'react-native-reanimated';
+import Animated, {
+  SharedValue,
+  useComposedEventHandler,
+} from 'react-native-reanimated';
 
-import {AUTOSCROLL_CONFIG} from './constants';
+import {AUTOSCROLL_CONFIG} from './autoscrollConfig';
 import {useReorderableListCore} from './useReorderableListCore';
 import {ReorderableListContext} from '../../contexts';
 import type {ReorderableListProps} from '../../types';
@@ -40,7 +43,6 @@ interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
 
 const ReorderableListCore = <T,>(
   {
-    data,
     autoscrollThreshold = 0.1,
     autoscrollSpeedScale = 1,
     autoscrollDelay = AUTOSCROLL_CONFIG.delay,
@@ -49,17 +51,19 @@ const ReorderableListCore = <T,>(
     onLayout,
     onReorder,
     onScroll,
+    onDragStart,
     onDragEnd,
-    keyExtractor,
-    extraData,
     scrollViewContainerRef,
     scrollViewHeightY,
     scrollViewScrollOffsetY,
     scrollViewScrollEnabled,
-    scrollEnabled,
     initialScrollViewScrollEnabled,
     scrollable,
     outerScrollGesture,
+    cellAnimations,
+    shouldUpdateActiveItem,
+    panEnabled = true,
+    panActivateAfterLongPress,
     ...rest
   }: ReorderableListCoreProps<T>,
   ref: React.ForwardedRef<FlatList<T>>,
@@ -85,7 +89,7 @@ const ReorderableListCore = <T,>(
     dragReorderThreshold,
     onLayout,
     onReorder,
-    onScroll,
+    onDragStart,
     onDragEnd,
     scrollViewContainerRef,
     scrollViewHeightY,
@@ -94,12 +98,16 @@ const ReorderableListCore = <T,>(
     // flatlist will default to true if we pass explicitly undefined,
     // but internally we would treat it as false, so we force true
     initialScrollEnabled:
-      typeof scrollEnabled === 'undefined' ? true : scrollEnabled,
+      typeof rest.scrollEnabled === 'undefined' ? true : rest.scrollEnabled,
     initialScrollViewScrollEnabled:
       typeof initialScrollViewScrollEnabled === 'undefined'
         ? true
         : initialScrollViewScrollEnabled,
     nestedScrollable: scrollable,
+    cellAnimations,
+    shouldUpdateActiveItem,
+    panEnabled,
+    panActivateAfterLongPress,
   });
 
   const combinedGesture = useMemo(() => {
@@ -111,6 +119,11 @@ const ReorderableListCore = <T,>(
     return gestureHandler;
   }, [scrollable, outerScrollGesture, gestureHandler]);
 
+  const composedScrollHandler = useComposedEventHandler([
+    handleScroll,
+    onScroll || null,
+  ]);
+
   const renderAnimatedCell = useCallback(
     ({cellKey, ...props}: CellRendererProps<T>) => (
       <ReorderableListCell
@@ -134,17 +147,13 @@ const ReorderableListCore = <T,>(
         <AnimatedFlatList
           {...rest}
           ref={handleRef}
-          data={data}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
-          onScroll={handleScroll}
+          onScroll={composedScrollHandler}
           scrollEventThrottle={1}
           horizontal={false}
           removeClippedSubviews={false}
-          keyExtractor={keyExtractor}
-          extraData={extraData}
           numColumns={1}
-          scrollEnabled={scrollEnabled}
         />
       </GestureDetector>
     </ReorderableListContext.Provider>

package/src/components/ReorderableListCore/animationDefaults.ts

@@ -0,0 +1,35 @@
+import {Easing, WithTimingConfig} from 'react-native-reanimated';
+
+const DURATION_START = 150;
+const DURATION_END = 200;
+
+interface AnimationConfig {
+  start: WithTimingConfig & {toValue: number};
+  end: WithTimingConfig & {toValue: number};
+}
+
+export const SCALE_ANIMATION_CONFIG_DEFAULT: AnimationConfig = {
+  start: {
+    toValue: 1.025,
+    easing: Easing.in(Easing.ease),
+    duration: DURATION_START,
+  },
+  end: {
+    toValue: 1,
+    easing: Easing.out(Easing.ease),
+    duration: DURATION_END,
+  },
+};
+
+export const OPACITY_ANIMATION_CONFIG_DEFAULT: AnimationConfig = {
+  start: {
+    toValue: 0.75,
+    easing: Easing.in(Easing.ease),
+    duration: DURATION_START,
+  },
+  end: {
+    toValue: 1,
+    easing: Easing.out(Easing.ease),
+    duration: DURATION_END,
+  },
+};