react-native-reorderable-list 0.7.1 → 0.8.0

package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { FlatList, LayoutChangeEvent, NativeScrollEvent, ScrollView } from 'react-native';
+import { FlatList, LayoutChangeEvent, ScrollView } from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
-import { ReorderableListDragEndEvent } from '../../types';
+import { ReorderableListCellAnimations, ReorderableListDragEndEvent, ReorderableListDragStartEvent } from '../../types';
 import type { ReorderableListReorderEvent } from '../../types';
 interface UseReorderableListCoreArgs<T> {
     ref: React.ForwardedRef<FlatList<T>>;
@@ -11,8 +11,8 @@ interface UseReorderableListCoreArgs<T> {
     animationDuration: number;
     dragReorderThreshold: number;
     onReorder: (event: ReorderableListReorderEvent) => void;
+    onDragStart?: (event: ReorderableListDragStartEvent) => void;
     onDragEnd?: (event: ReorderableListDragEndEvent) => void;
-    onScroll?: (event: NativeScrollEvent) => void;
     onLayout?: (event: LayoutChangeEvent) => void;
     scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
     scrollViewHeightY: SharedValue<number> | undefined;
@@ -21,8 +21,9 @@ interface UseReorderableListCoreArgs<T> {
     initialScrollEnabled: boolean | undefined;
     initialScrollViewScrollEnabled: boolean | undefined;
     nestedScrollable: boolean | undefined;
+    cellAnimations: ReorderableListCellAnimations | undefined;
 }
-export declare const useReorderableListCore: <T>({ ref, autoscrollThreshold, autoscrollSpeedScale, autoscrollDelay, animationDuration, dragReorderThreshold, onReorder, onDragEnd, onScroll, onLayout, scrollViewContainerRef, scrollViewHeightY, scrollViewScrollOffsetY, scrollViewScrollEnabled, initialScrollEnabled, initialScrollViewScrollEnabled, nestedScrollable, }: UseReorderableListCoreArgs<T>) => {
+export declare const useReorderableListCore: <T>({ ref, autoscrollThreshold, autoscrollSpeedScale, autoscrollDelay, animationDuration, dragReorderThreshold, onReorder, onDragStart, onDragEnd, onLayout, scrollViewContainerRef, scrollViewHeightY, scrollViewScrollOffsetY, scrollViewScrollEnabled, initialScrollEnabled, initialScrollViewScrollEnabled, nestedScrollable, cellAnimations, }: UseReorderableListCoreArgs<T>) => {
     gestureHandler: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").SimultaneousGesture;
     handleScroll: import("react-native-reanimated").ScrollHandlerProcessed<Record<string, unknown>>;
     handleFlatListLayout: (e: LayoutChangeEvent) => void;
@@ -33,6 +34,8 @@ export declare const useReorderableListCore: <T>({ ref, autoscrollThreshold, aut
         currentIndex: SharedValue<number>;
         draggedIndex: SharedValue<number>;
         dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
+        scale: SharedValue<number>;
+        opacity: SharedValue<number>;
     };
     itemOffset: SharedValue<number[]>;
     itemHeight: SharedValue<number[]>;

package/lib/typescript/components/ReorderableListCore/useReorderableListCore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReorderableListCore.d.ts","sourceRoot":"","sources":["../../../../src/components/ReorderableListCore/useReorderableListCore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EAEX,MAAM,cAAc,CAAC;AAGtB,OAAiB,EAGf,WAAW,EAUZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAC,2BAA2B,EAAuB,MAAM,aAAa,CAAC;AAC9E,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAO7D,UAAU,0BAA0B,CAAC,CAAC;IACpC,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAChE,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD,uBAAuB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACzD,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC1D,oBAAoB,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,8BAA8B,EAAE,OAAO,GAAG,SAAS,CAAC;IACpD,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;CACvC;AAED,eAAO,MAAM,sBAAsB;;;;;uBA8hBvB,MAAM;;;;;6CAlfN,MAAM,MAAM,MAAM,KAAK,IAAI;;;;;;;CA0jBtC,CAAC"}
+{"version":3,"file":"useReorderableListCore.d.ts","sourceRoot":"","sources":["../../../../src/components/ReorderableListCore/useReorderableListCore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAC7D,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,UAAU,EAEX,MAAM,cAAc,CAAC;AAGtB,OAAiB,EAGf,WAAW,EAUZ,MAAM,yBAAyB,CAAC;AAOjC,OAAO,EACL,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAE9B,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAC,2BAA2B,EAAC,MAAM,aAAa,CAAC;AAO7D,UAAU,0BAA0B,CAAC,CAAC;IACpC,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IACrC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACxD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,IAAI,CAAC;IAC7D,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;IAChE,iBAAiB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACnD,uBAAuB,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACzD,uBAAuB,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IAC1D,oBAAoB,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1C,8BAA8B,EAAE,OAAO,GAAG,SAAS,CAAC;IACpD,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAC;IACtC,cAAc,EAAE,6BAA6B,GAAG,SAAS,CAAC;CAC3D;AAED,eAAO,MAAM,sBAAsB;;;;;uBA8jBvB,MAAM;;;;;6CAjhBN,MAAM,MAAM,MAAM,KAAK,IAAI;;;;;;;;;CA+lBtC,CAAC"}

package/lib/typescript/components/ScrollViewContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollViewContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollViewContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAWrC,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4DlE,CAAC"}
+{"version":3,"file":"ScrollViewContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollViewContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAYrC,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,UAAU,CAAC;AAEvD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+DlE,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './ReorderableList';
 export * from './NestedReorderableList';
 export * from './ReorderableListCell';
-export * from './ReorderableListItem';
 export * from './ScrollViewContainer';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}

package/lib/typescript/contexts/ReorderableListContext.d.ts

@@ -4,6 +4,8 @@ interface ReorderableListContextData {
     currentIndex: SharedValue<number>;
     draggedHeight: SharedValue<number>;
     dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
+    scale: SharedValue<number>;
+    opacity: SharedValue<number>;
 }
 export declare const ReorderableListContext: React.Context<ReorderableListContextData | undefined>;
 export {};

package/lib/typescript/contexts/ReorderableListContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderableListContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ReorderableListContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEzD,UAAU,0BAA0B;IAClC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;CACxE;AAED,eAAO,MAAM,sBAAsB,uDAEvB,CAAC"}
+{"version":3,"file":"ReorderableListContext.d.ts","sourceRoot":"","sources":["../../../src/contexts/ReorderableListContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEzD,UAAU,0BAA0B;IAClC,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAClC,aAAa,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACnC,eAAe,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;IACvE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC9B;AAED,eAAO,MAAM,sBAAsB,uDAEvB,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,7 +1,7 @@
-import { NestedReorderableList, ReorderableList, ReorderableListItem, ScrollViewContainer } from './components';
+import { NestedReorderableList, ReorderableList, ScrollViewContainer } from './components';
 import { useReorderableDrag, useReorderableDragEnd, useReorderableDragStart } from './hooks';
-import type { ReorderableListDragEndEvent, ReorderableListItemConfig, ReorderableListItemProps, ReorderableListProps, ReorderableListReorderEvent, ScrollViewContainerProps } from './types';
+import type { ReorderableListCellAnimations, ReorderableListDragEndEvent, ReorderableListDragStartEvent, ReorderableListProps, ReorderableListReorderEvent, ScrollViewContainerProps } from './types';
 import { reorderItems } from './utils';
-export { useReorderableDrag, useReorderableDragStart, useReorderableDragEnd, ReorderableListProps, ReorderableListReorderEvent, ReorderableListDragEndEvent, ReorderableListItem, ReorderableListItemConfig, ReorderableListItemProps, ScrollViewContainer, ScrollViewContainerProps, NestedReorderableList, reorderItems, };
+export { useReorderableDrag, useReorderableDragStart, useReorderableDragEnd, ReorderableListProps, ReorderableListReorderEvent, ReorderableListCellAnimations, ReorderableListDragStartEvent, ReorderableListDragEndEvent, ScrollViewContainer, ScrollViewContainerProps, NestedReorderableList, reorderItems, };
 export default ReorderableList;
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EACV,2BAA2B,EAC3B,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EACzB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,mBAAmB,EACnB,yBAAyB,EACzB,wBAAwB,EACxB,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,YAAY,GACb,CAAC;AACF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,mBAAmB,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EACV,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EACzB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,6BAA6B,EAC7B,6BAA6B,EAC7B,2BAA2B,EAC3B,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,YAAY,GACb,CAAC;AACF,eAAe,eAAe,CAAC"}

package/lib/typescript/types/misc.d.ts

@@ -1,7 +1,7 @@
 export declare enum ReorderableListState {
     IDLE = 0,
-    DRAGGING = 1,
-    RELEASING = 2,
-    AUTO_SCROLL = 3
+    DRAGGED = 1,
+    RELEASED = 2,
+    AUTOSCROLL = 3
 }
 //# sourceMappingURL=misc.d.ts.map

package/lib/typescript/types/misc.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/types/misc.ts"],"names":[],"mappings":"AAAA,oBAAY,oBAAoB;IAC9B,IAAI,IAAI;IACR,QAAQ,IAAA;IACR,SAAS,IAAA;IACT,WAAW,IAAA;CACZ"}
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/types/misc.ts"],"names":[],"mappings":"AAAA,oBAAY,oBAAoB;IAC9B,IAAI,IAAI;IACR,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,UAAU,IAAA;CACX"}

package/lib/typescript/types/props.d.ts

@@ -1,5 +1,5 @@
-import type { FlatListProps, NativeScrollEvent, ScrollViewProps, ViewProps } from 'react-native';
-import { EasingFunction } from 'react-native-reanimated';
+import type { FlatListProps, ScrollViewProps } from 'react-native';
+import { SharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';
 export interface ReorderableListReorderEvent {
     /**
      * Index of the dragged item.
@@ -10,6 +10,12 @@ export interface ReorderableListReorderEvent {
      */
     to: number;
 }
+export interface ReorderableListDragStartEvent {
+    /**
+     * Index of the dragged item.
+     */
+    index: number;
+}
 export interface ReorderableListDragEndEvent {
     /**
      * Index of the dragged item.
@@ -52,59 +58,41 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
      */
     animationDuration?: number;
     /**
-     * Event fired after an item is released and the list is reordered.
+     * Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events.
      */
-    onReorder: (event: ReorderableListReorderEvent) => void;
+    cellAnimations?: ReorderableListCellAnimations;
     /**
-     * Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
-     */
-    onScroll?: (event: NativeScrollEvent) => void;
-    /**
-     * Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
-     */
-    onDragEnd?: (event: ReorderableListDragEndEvent) => void;
-}
-export interface ReorderableListItemConfig {
-    /**
-     * Value of the animated style on drag end.
-     */
-    enabled?: boolean;
-    /**
-     * Value of the animated style on drag end.
-     */
-    valueEnd?: number;
-    /**
-     * Value of the animated style on drag start.
+     * Event fired after an item is released and the list is reordered.
      */
-    valueStart?: number;
+    onReorder: (event: ReorderableListReorderEvent) => void;
     /**
-     * Easing function for the animation to the end value. Default: `Easing.in(Easing.ease)`.
+     * An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
      */
-    easingEnd?: EasingFunction;
+    onScroll?: ReturnType<typeof useAnimatedScrollHandler>;
     /**
-     * Easing function for the animation to the start value. Default: `Easing.out(Easing.ease)`.
+     * Event fired when an item is dragged. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
      */
-    easingStart?: EasingFunction;
+    onDragStart?: (event: ReorderableListDragStartEvent) => void;
     /**
-     * Duration of the animations in milliseconds. Default: `200`.
+     * Event fired when the dragged item is released. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
      */
-    duration?: number;
+    onDragEnd?: (event: ReorderableListDragEndEvent) => void;
 }
-export interface ReorderableListItemProps extends ViewProps {
+export interface ReorderableListCellAnimations {
     /**
-     * Config for the `opacity` animation. Enabled by default with custom default options.
+     * Shared value to animate the opacity of a dragged item. Set to false to disable default opacity animations.
      */
-    opacityAnimationConfig?: ReorderableListItemConfig;
+    opacity?: SharedValue<number> | false;
     /**
-     * Config for the `scale` animation. Enabled by default with custom default options.
+     * Shared value to animate the scale of a dragged item. Set to false to disable default scale animations.
      */
-    scaleAnimationConfig?: ReorderableListItemConfig;
+    scale?: SharedValue<number> | false;
 }
 export interface ScrollViewContainerProps extends Omit<ScrollViewProps, 'onScroll'> {
     /**
-     * Event fired at most once per frame during scrolling. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+     * An animated scroll handler created with useAnimatedScrollHandler. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
      */
-    onScroll?: (event: NativeScrollEvent) => void;
+    onScroll?: ReturnType<typeof useAnimatedScrollHandler>;
 }
 export interface NestedReorderableListProps<T> extends ReorderableListProps<T> {
     /**

package/lib/typescript/types/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,SAAS,EACV,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAC,cAAc,EAAC,MAAM,yBAAyB,CAAC;AAEvD,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,YAAY,GACb,YAAY,GACZ,UAAU,GACV,qBAAqB,GACrB,uBAAuB,GACvB,uBAAuB,GACvB,YAAY,CAAC;AAEjB,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC;IAC5C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD;;OAEG;IACH,sBAAsB,CAAC,EAAE,yBAAyB,CAAC;IACnD;;OAEG;IACH,oBAAoB,CAAC,EAAE,yBAAyB,CAAC;CAClD;AAED,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAC5E;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/types/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,aAAa,EAAE,eAAe,EAAC,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAC,WAAW,EAAE,wBAAwB,EAAC,MAAM,yBAAyB,CAAC;AAE9E,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,2BAA2B;IAC1C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,KAAK,YAAY,GACb,YAAY,GACZ,UAAU,GACV,qBAAqB,GACrB,uBAAuB,GACvB,uBAAuB,GACvB,YAAY,CAAC;AAEjB,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC;IAC5C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,6BAA6B,CAAC;IAC/C;;OAEG;IACH,SAAS,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;IACxD;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;IACvD;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,2BAA2B,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,WAAW,6BAA6B;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC;CACrC;AAED,MAAM,WAAW,wBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,0BAA0B,CAAC,CAAC,CAAE,SAAQ,oBAAoB,CAAC,CAAC,CAAC;IAC5E;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reorderable-list",
-  "version": "0.7.1",
+  "version": "0.8.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,11 +37,13 @@ export const ReorderableListCell = memo(
     draggedIndex,
     animationDuration,
   }: ReorderableListCellProps<T>) => {
-    const dragHandler = useCallback(() => {
-      'worklet';
-
-      startDrag(index);
-    }, [startDrag, index]);
+    const {currentIndex, draggedHeight, scale, opacity} = useContext(
+      ReorderableListContext,
+    );
+    const dragHandler = useCallback(
+      () => runOnUI(startDrag)(index),
+      [startDrag, index],
+    );
 
     const contextValue = useMemo(
       () => ({
@@ -51,22 +53,22 @@ export const ReorderableListCell = memo(
       }),
       [index, dragHandler, draggedIndex],
     );
-    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 isActive = 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 +77,7 @@ export const ReorderableListCell = memo(
       () => currentIndex.value,
       () => {
         if (
-          itemIndex.value !== draggedIndex.value &&
+          index !== draggedIndex.value &&
           currentIndex.value >= 0 &&
           draggedIndex.value >= 0
         ) {
@@ -84,12 +86,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 +100,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 (isActive.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';
@@ -49,6 +52,7 @@ const ReorderableListCore = <T,>(
     onLayout,
     onReorder,
     onScroll,
+    onDragStart,
     onDragEnd,
     keyExtractor,
     extraData,
@@ -60,6 +64,7 @@ const ReorderableListCore = <T,>(
     initialScrollViewScrollEnabled,
     scrollable,
     outerScrollGesture,
+    cellAnimations,
     ...rest
   }: ReorderableListCoreProps<T>,
   ref: React.ForwardedRef<FlatList<T>>,
@@ -85,7 +90,7 @@ const ReorderableListCore = <T,>(
     dragReorderThreshold,
     onLayout,
     onReorder,
-    onScroll,
+    onDragStart,
     onDragEnd,
     scrollViewContainerRef,
     scrollViewHeightY,
@@ -100,6 +105,7 @@ const ReorderableListCore = <T,>(
         ? true
         : initialScrollViewScrollEnabled,
     nestedScrollable: scrollable,
+    cellAnimations,
   });
 
   const combinedGesture = useMemo(() => {
@@ -111,6 +117,11 @@ const ReorderableListCore = <T,>(
     return gestureHandler;
   }, [scrollable, outerScrollGesture, gestureHandler]);
 
+  const composedScrollHandler = useComposedEventHandler([
+    handleScroll,
+    onScroll || null,
+  ]);
+
   const renderAnimatedCell = useCallback(
     ({cellKey, ...props}: CellRendererProps<T>) => (
       <ReorderableListCell
@@ -137,7 +148,7 @@ const ReorderableListCore = <T,>(
           data={data}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
-          onScroll={handleScroll}
+          onScroll={composedScrollHandler}
           scrollEventThrottle={1}
           horizontal={false}
           removeClippedSubviews={false}

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,
+  },
+};