react-native-reorderable-list 0.9.0 → 0.11.0

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,KAAkD,MAAM,OAAO,CAAC;AACvE,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;IAC1D,sBAAsB,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB;;;;;uBAolBvB,MAAM;;;;;6CAniBN,MAAM,MAAM,MAAM,KAAK,IAAI;;;;;;;;;;CAsnBtC,CAAC"}
+{"version":3,"file":"useReorderableListCore.d.ts","sourceRoot":"","sources":["../../../../src/components/ReorderableListCore/useReorderableListCore.ts"],"names":[],"mappings":"AAAA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,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,EAC7B,+BAA+B,EAEhC,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,yBAAyB,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,SAAS,CAAC;IACvE,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,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,IAAI,CAAC;IACjE,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;IAC1D,sBAAsB,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,yBAAyB,EAAE,MAAM,GAAG,SAAS,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB;;;;;uBAymBvB,MAAM;;;;;6CAtjBN,MAAM,MAAM,MAAM,KAAK,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyoBtC,CAAC"}

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

@@ -0,0 +1,11 @@
+/**
+ * Flattens an object containing `SharedValue`s by extracting their underlying values.
+ *
+ * @param target - An object to which the flattened shared values and every other field will be mapped to.
+ * @param source - The object containing, possibly among others, the shared values.
+ * @param excludedKeys - The keys to exclude from flattening and mapping.
+ *
+ * @returns The object to which the fields where flattened and mapped to.
+ */
+export declare const applyAnimatedStyles: (target: Record<string, any>, source: Record<string, any>, excludedKeys?: string[]) => Record<string, any>;
+//# sourceMappingURL=helpers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,WAEtB,OAAO,MAAM,EAAE,GAAG,CAAC,UAEnB,OAAO,MAAM,EAAE,GAAG,CAAC,iBACb,MAAM,EAAE,KAErB,OAAO,MAAM,EAAE,GAAG,CAmBpB,CAAC"}

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import type { SharedValue } from 'react-native-reanimated';
+import { ReorderableListCellAnimations } from '../types';
 interface ReorderableListContextData {
     currentIndex: SharedValue<number>;
     draggedHeight: SharedValue<number>;
     dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
-    scale: SharedValue<number>;
-    opacity: SharedValue<number>;
     activeIndex: number;
+    cellAnimations: ReorderableListCellAnimations;
 }
 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;IACvE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC;CACrB;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,OAAO,EAAC,6BAA6B,EAAC,MAAM,UAAU,CAAC;AAEvD,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,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,6BAA6B,CAAC;CAC/C;AAED,eAAO,MAAM,sBAAsB,uDAEvB,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,7 +1,7 @@
 import { NestedReorderableList, ReorderableList, ScrollViewContainer } from './components';
 import { useIsActive, useReorderableDrag, useReorderableDragEnd, useReorderableDragStart } from './hooks';
-import type { ReorderableListCellAnimations, ReorderableListDragEndEvent, ReorderableListDragStartEvent, ReorderableListProps, ReorderableListReorderEvent, ScrollViewContainerProps } from './types';
+import type { ReorderableListCellAnimations, ReorderableListDragEndEvent, ReorderableListDragStartEvent, ReorderableListIndexChangeEvent, ReorderableListProps, ReorderableListReorderEvent, ScrollViewContainerProps } from './types';
 import { reorderItems } from './utils';
-export { useIsActive, useReorderableDrag, useReorderableDragStart, useReorderableDragEnd, ReorderableListProps, ReorderableListReorderEvent, ReorderableListCellAnimations, ReorderableListDragStartEvent, ReorderableListDragEndEvent, ScrollViewContainer, ScrollViewContainerProps, NestedReorderableList, reorderItems, };
+export { useIsActive, useReorderableDrag, useReorderableDragStart, useReorderableDragEnd, ReorderableListProps, ReorderableListReorderEvent, ReorderableListCellAnimations, ReorderableListDragStartEvent, ReorderableListDragEndEvent, ReorderableListIndexChangeEvent, 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,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,WAAW,EACX,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,WAAW,EACX,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"}
+{"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,WAAW,EACX,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,SAAS,CAAC;AACjB,OAAO,KAAK,EACV,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,+BAA+B,EAC/B,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,EACzB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAErC,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,2BAA2B,EAC3B,6BAA6B,EAC7B,6BAA6B,EAC7B,2BAA2B,EAC3B,+BAA+B,EAC/B,mBAAmB,EACnB,wBAAwB,EACxB,qBAAqB,EACrB,YAAY,GACb,CAAC;AACF,eAAe,eAAe,CAAC"}

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

@@ -1,7 +1,16 @@
+import { SharedValue } from 'react-native-reanimated';
 export declare enum ReorderableListState {
     IDLE = 0,
     DRAGGED = 1,
     RELEASED = 2,
     AUTOSCROLL = 3
 }
+export type SharedValueOrType<T> = {
+    [TKey in keyof T]?: SharedValue<T[TKey]> | T[TKey];
+};
+export type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T ? {
+    [P in K]: T[K];
+} & {
+    [P in Exclude<keyof T, K>]?: never;
+} : never;
 //# 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,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,UAAU,IAAA;CACX"}
+{"version":3,"file":"misc.d.ts","sourceRoot":"","sources":["../../../src/types/misc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,yBAAyB,CAAC;AAEpD,oBAAY,oBAAoB;IAC9B,IAAI,IAAI;IACR,OAAO,IAAA;IACP,QAAQ,IAAA;IACR,UAAU,IAAA;CACX;AAED,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI;KAChC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;CACnD,CAAC;AAEF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,MAAM,CAAC,GACxE;KAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAC,GAAG;KAAE,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK;CAAC,GACvD,KAAK,CAAC"}

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

@@ -1,5 +1,6 @@
-import type { FlatListProps, ScrollViewProps } from 'react-native';
+import type { FlatListProps, MatrixTransform, PerspectiveTransform, RotateTransform, RotateXTransform, RotateYTransform, RotateZTransform, ScaleTransform, ScaleXTransform, ScaleYTransform, ScrollViewProps, SkewXTransform, SkewYTransform, TranslateXTransform, TranslateYTransform, ViewStyle } from 'react-native';
 import { SharedValue, useAnimatedScrollHandler } from 'react-native-reanimated';
+import { MaximumOneOf, SharedValueOrType } from './misc';
 export interface ReorderableListReorderEvent {
     /**
      * Index of the dragged item.
@@ -16,6 +17,12 @@ export interface ReorderableListDragStartEvent {
      */
     index: number;
 }
+export interface ReorderableListIndexChangeEvent {
+    /**
+     * Index of the dragged item.
+     */
+    index: number;
+}
 export interface ReorderableListDragEndEvent {
     /**
      * Index of the dragged item.
@@ -30,11 +37,19 @@ type OmittedProps = 'horizontal' | 'onScroll' | 'scrollEventThrottle' | 'removeC
 export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedProps> {
     data: T[];
     /**
-     * Threshold  at the extremety of the list which triggers autoscroll when an item is dragged to it.
+     * Threshold at the extremety of the list which triggers autoscroll when an item is dragged to it.
      * A value of 0.1 means that 10% of the area at the top and 10% at the bottom of the list will trigger autoscroll
      * when an item is dragged to it. Min value: `0`. Max value: `0.4`. Default: `0.1`.
      */
     autoscrollThreshold?: number;
+    /**
+     * Amount by which the threshold is offset at the extremety of the list.
+     * For example, setting `{top: 50}` will make the autoscroll trigger 50 pixels earlier at the top.
+     */
+    autoscrollThresholdOffset?: {
+        top?: number;
+        bottom?: number;
+    };
     /**
      * Scales the autoscroll spreed at which the list scrolls when an item is dragged to the scroll areas. Default: `1`.
      */
@@ -58,7 +73,7 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
      */
     animationDuration?: number;
     /**
-     * Allows passing an object with shared values that can animate a cell by using the `onDragStart` and `onDragEnd` events.
+     * Allows passing an object with values and/or shared values that can animate a cell, for example by using the `onDragStart` and `onDragEnd` events. Supports view style properties. Override opacity and/or transform to disable the default animation, e.g. `{opacity: 1, transform: []}`.
      */
     cellAnimations?: ReorderableListCellAnimations;
     /**
@@ -70,7 +85,7 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
      */
     panEnabled?: boolean;
     /**
-     * Duration in milliseconds of a long press on the list before pan gestures, necessary for dragging, are allowed to activate.
+     * Duration in milliseconds of the long press on the list before the pan gesture for dragging is allowed to activate.
      */
     panActivateAfterLongPress?: number;
     /**
@@ -89,16 +104,26 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
      * 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;
+    /**
+     * Event fired when the index of the dragged item changes. Needs to be a `worklet`. See [Reanimated docs](https://docs.swmansion.com/react-native-reanimated) for further info.
+     */
+    onIndexChange?: (event: ReorderableListIndexChangeEvent) => void;
 }
-export interface ReorderableListCellAnimations {
+export type Transforms = PerspectiveTransform & RotateTransform & RotateXTransform & RotateYTransform & RotateZTransform & ScaleTransform & ScaleXTransform & ScaleYTransform & TranslateXTransform & TranslateYTransform & SkewXTransform & SkewYTransform & MatrixTransform;
+export type ReorderableListCellAnimatedStyles = Omit<{
+    [StyleKey in keyof ViewStyle]?: SharedValue<ViewStyle[StyleKey]> | ViewStyle[StyleKey];
+}, 'transform' | 'opacity'>;
+export interface ReorderableListCellAnimations extends ReorderableListCellAnimatedStyles {
     /**
-     * Shared value to animate the opacity of a dragged item. Set to false to disable default opacity animations.
+     * Transform animations for a dragged item.
+     * Disable default animation by overriding transform, e.g. `[]` or `[{ scale: customSharedValue }]`.
      */
-    opacity?: SharedValue<number> | false;
+    transform?: Readonly<MaximumOneOf<SharedValueOrType<Transforms>>[]>;
     /**
-     * Shared value to animate the scale of a dragged item. Set to false to disable default scale animations.
+     * Shared value to animate the opacity of a dragged item.
+     * Disable default animation by overriding opacity, e.g `1`.
      */
-    scale?: SharedValue<number> | false;
+    opacity?: SharedValue<number> | number;
 }
 export interface ScrollViewContainerProps extends Omit<ScrollViewProps, 'onScroll'> {
     /**

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,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,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC;;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"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/types/props.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-reorderable-list",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Reorderable list for React Native applications, powered by Reanimated",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -146,6 +146,8 @@
       "import"
     ],
     "rules": {
+      "@typescript-eslint/no-explicit-any": "error",
+      "no-console": "error",
       "prettier/prettier": [
         "error",
         {

package/src/components/ReorderableListCell.tsx

@@ -14,6 +14,7 @@ import Animated, {
 
 import {ReorderableCellContext, ReorderableListContext} from '../contexts';
 import {useContext} from '../hooks';
+import {applyAnimatedStyles} from './helpers';
 
 interface ReorderableListCellProps<T>
   extends Omit<CellRendererProps<T>, 'cellKey'> {
@@ -37,7 +38,7 @@ export const ReorderableListCell = memo(
     draggedIndex,
     animationDuration,
   }: ReorderableListCellProps<T>) => {
-    const {currentIndex, draggedHeight, scale, opacity, activeIndex} =
+    const {currentIndex, draggedHeight, activeIndex, cellAnimations} =
       useContext(ReorderableListContext);
     const dragHandler = useCallback(
       () => runOnUI(startDrag)(index),
@@ -103,11 +104,22 @@ export const ReorderableListCell = memo(
 
     const animatedStyle = useAnimatedStyle(() => {
       if (isActiveCell.value) {
-        return {
-          transform: [{translateY: itemTranslateY.value}, {scale: scale.value}],
-          opacity: opacity.value,
-          zIndex: 999,
-        };
+        const transform = [{translateY: itemTranslateY.value}];
+        if (Array.isArray(cellAnimations.transform)) {
+          const customTransform = cellAnimations.transform.map(x =>
+            applyAnimatedStyles({}, x),
+          ) as [];
+          transform.push(...customTransform);
+        }
+
+        return applyAnimatedStyles(
+          {
+            transform,
+            zIndex: 999,
+          },
+          cellAnimations,
+          ['transform'],
+        );
       }
 
       return {

package/src/components/ReorderableListCore/ReorderableListCore.tsx

@@ -44,6 +44,7 @@ interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
 const ReorderableListCore = <T,>(
   {
     autoscrollThreshold = 0.1,
+    autoscrollThresholdOffset,
     autoscrollSpeedScale = 1,
     autoscrollDelay = AUTOSCROLL_CONFIG.delay,
     animationDuration = 200,
@@ -53,6 +54,7 @@ const ReorderableListCore = <T,>(
     onScroll,
     onDragStart,
     onDragEnd,
+    onIndexChange,
     scrollViewContainerRef,
     scrollViewHeightY,
     scrollViewScrollOffsetY,
@@ -83,6 +85,7 @@ const ReorderableListCore = <T,>(
   } = useReorderableListCore({
     ref,
     autoscrollThreshold,
+    autoscrollThresholdOffset,
     autoscrollSpeedScale,
     autoscrollDelay,
     animationDuration,
@@ -91,6 +94,7 @@ const ReorderableListCore = <T,>(
     onReorder,
     onDragStart,
     onDragEnd,
+    onIndexChange,
     scrollViewContainerRef,
     scrollViewHeightY,
     scrollViewScrollOffsetY,

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -31,6 +31,7 @@ import {
   ReorderableListCellAnimations,
   ReorderableListDragEndEvent,
   ReorderableListDragStartEvent,
+  ReorderableListIndexChangeEvent,
   ReorderableListState,
 } from '../../types';
 import type {ReorderableListReorderEvent} from '../../types';
@@ -43,6 +44,7 @@ const hasAutomaticBatching = version.length
 interface UseReorderableListCoreArgs<T> {
   ref: React.ForwardedRef<FlatList<T>>;
   autoscrollThreshold: number;
+  autoscrollThresholdOffset: {top?: number; bottom?: number} | undefined;
   autoscrollSpeedScale: number;
   autoscrollDelay: number;
   animationDuration: number;
@@ -50,6 +52,7 @@ interface UseReorderableListCoreArgs<T> {
   onReorder: (event: ReorderableListReorderEvent) => void;
   onDragStart?: (event: ReorderableListDragStartEvent) => void;
   onDragEnd?: (event: ReorderableListDragEndEvent) => void;
+  onIndexChange?: (event: ReorderableListIndexChangeEvent) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
   scrollViewContainerRef: React.RefObject<ScrollView> | undefined;
   scrollViewHeightY: SharedValue<number> | undefined;
@@ -67,6 +70,7 @@ interface UseReorderableListCoreArgs<T> {
 export const useReorderableListCore = <T>({
   ref,
   autoscrollThreshold,
+  autoscrollThresholdOffset,
   autoscrollSpeedScale,
   autoscrollDelay,
   animationDuration,
@@ -75,6 +79,7 @@ export const useReorderableListCore = <T>({
   onDragStart,
   onDragEnd,
   onLayout,
+  onIndexChange,
   scrollViewContainerRef,
   scrollViewHeightY,
   scrollViewScrollOffsetY,
@@ -119,7 +124,6 @@ export const useReorderableListCore = <T>({
   const duration = useSharedValue(animationDuration);
   const scaleDefault = useSharedValue(1);
   const opacityDefault = useSharedValue(1);
-  const {scale, opacity} = cellAnimations || {};
 
   useEffect(() => {
     duration.value = animationDuration;
@@ -132,8 +136,17 @@ export const useReorderableListCore = <T>({
       draggedIndex,
       dragEndHandlers,
       activeIndex,
-      scale: scale || scaleDefault,
-      opacity: opacity || opacityDefault,
+      cellAnimations: {
+        ...cellAnimations,
+        transform:
+          cellAnimations && 'transform' in cellAnimations
+            ? cellAnimations.transform
+            : [{scale: scaleDefault}],
+        opacity:
+          cellAnimations && 'opacity' in cellAnimations
+            ? cellAnimations.opacity
+            : opacityDefault,
+      },
     }),
     [
       draggedHeight,
@@ -141,9 +154,8 @@ export const useReorderableListCore = <T>({
       draggedIndex,
       dragEndHandlers,
       activeIndex,
-      scale,
+      cellAnimations,
       scaleDefault,
-      opacity,
       opacityDefault,
     ],
   );
@@ -342,6 +354,8 @@ export const useReorderableListCore = <T>({
         previousDirection.value = newDirection;
         previousIndex.value = currentIndex.value;
         currentIndex.value = newIndex;
+
+        onIndexChange?.({index: newIndex});
       }
     },
     [
@@ -352,6 +366,7 @@ export const useReorderableListCore = <T>({
       itemOffset,
       itemHeight,
       getIndexFromY,
+      onIndexChange,
     ],
   );
 
@@ -359,19 +374,19 @@ export const useReorderableListCore = <T>({
     (type: 'start' | 'end') => {
       'worklet';
 
-      // if animation is not disabled and not custom run the default
-      if (scale !== false && !scale) {
+      // if no custom scale run default
+      if (!(cellAnimations && 'transformtra' in cellAnimations)) {
         const scaleConfig = SCALE_ANIMATION_CONFIG_DEFAULT[type];
         scaleDefault.value = withTiming(scaleConfig.toValue, scaleConfig);
       }
 
-      // if animation is not disabled and not custom run the default
-      if (opacity !== false && !opacity) {
+      // if no custom opacity run the default
+      if (!(cellAnimations && 'opacity' in cellAnimations)) {
         const opacityConfig = OPACITY_ANIMATION_CONFIG_DEFAULT[type];
         opacityDefault.value = withTiming(opacityConfig.toValue, opacityConfig);
       }
     },
-    [scale, scaleDefault, opacity, opacityDefault],
+    [cellAnimations, scaleDefault, opacityDefault],
   );
 
   useAnimatedReaction(
@@ -467,24 +482,33 @@ export const useReorderableListCore = <T>({
   const calculateThresholdArea = useCallback(
     (hiddenArea: {top: number; bottom: number}) => {
       'worklet';
+      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
       const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
       const visibleHeight =
-        flatListHeightY.value - (hiddenArea.top + hiddenArea.bottom);
+        flatListHeightY.value -
+        (hiddenArea.top + hiddenArea.bottom) -
+        (offsetTop + offsetBottom);
 
-      const top = visibleHeight * threshold;
-      const bottom = flatListHeightY.value - top;
+      const area = visibleHeight * threshold;
+      const top = area + offsetTop;
+      const bottom = flatListHeightY.value - area - offsetBottom;
 
       return {top, bottom};
     },
-    [autoscrollThreshold, flatListHeightY],
+    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
   );
 
   const calculateThresholdAreaParent = useCallback(
     (hiddenArea: {top: number; bottom: number}) => {
       'worklet';
+      const offsetTop = Math.max(0, autoscrollThresholdOffset?.top || 0);
+      const offsetBottom = Math.max(0, autoscrollThresholdOffset?.bottom || 0);
       const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-      const top = flatListHeightY.value * threshold;
-      const bottom = flatListHeightY.value - top;
+
+      const area = flatListHeightY.value * threshold;
+      const top = area + offsetTop;
+      const bottom = flatListHeightY.value - area - offsetBottom;
 
       // if the hidden area is 0 then we don't have a threshold area
       // we might have floating errors like 0.0001 which we should ignore
@@ -493,7 +517,7 @@ export const useReorderableListCore = <T>({
         bottom: hiddenArea.bottom > 0.1 ? bottom - hiddenArea.bottom : 0,
       };
     },
-    [autoscrollThreshold, flatListHeightY],
+    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
   );
 
   const shouldScrollParent = useCallback(

package/src/components/helpers.ts

@@ -0,0 +1,36 @@
+/**
+ * Flattens an object containing `SharedValue`s by extracting their underlying values.
+ *
+ * @param target - An object to which the flattened shared values and every other field will be mapped to.
+ * @param source - The object containing, possibly among others, the shared values.
+ * @param excludedKeys - The keys to exclude from flattening and mapping.
+ *
+ * @returns The object to which the fields where flattened and mapped to.
+ */
+export const applyAnimatedStyles = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  target: Record<string, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  source: Record<string, any>,
+  excludedKeys: string[] = [],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Record<string, any> => {
+  'worklet';
+
+  let keys = Object.keys(source);
+
+  for (let key of keys) {
+    if (excludedKeys.includes(key)) {
+      continue;
+    }
+
+    let value = source[key];
+
+    target[key] =
+      value !== null && typeof value === 'object' && 'value' in value
+        ? value.value
+        : value;
+  }
+
+  return target;
+};

package/src/contexts/ReorderableListContext.ts

@@ -2,13 +2,14 @@ import React from 'react';
 
 import type {SharedValue} from 'react-native-reanimated';
 
+import {ReorderableListCellAnimations} from '../types';
+
 interface ReorderableListContextData {
   currentIndex: SharedValue<number>;
   draggedHeight: SharedValue<number>;
   dragEndHandlers: SharedValue<((from: number, to: number) => void)[][]>;
-  scale: SharedValue<number>;
-  opacity: SharedValue<number>;
   activeIndex: number;
+  cellAnimations: ReorderableListCellAnimations;
 }
 
 export const ReorderableListContext = React.createContext<

package/src/index.ts

@@ -13,6 +13,7 @@ import type {
   ReorderableListCellAnimations,
   ReorderableListDragEndEvent,
   ReorderableListDragStartEvent,
+  ReorderableListIndexChangeEvent,
   ReorderableListProps,
   ReorderableListReorderEvent,
   ScrollViewContainerProps,
@@ -29,6 +30,7 @@ export {
   ReorderableListCellAnimations,
   ReorderableListDragStartEvent,
   ReorderableListDragEndEvent,
+  ReorderableListIndexChangeEvent,
   ScrollViewContainer,
   ScrollViewContainerProps,
   NestedReorderableList,

package/src/types/misc.ts

@@ -1,6 +1,16 @@
+import {SharedValue} from 'react-native-reanimated';
+
 export enum ReorderableListState {
   IDLE = 0,
   DRAGGED,
   RELEASED,
   AUTOSCROLL,
 }
+
+export type SharedValueOrType<T> = {
+  [TKey in keyof T]?: SharedValue<T[TKey]> | T[TKey];
+};
+
+export type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
+  ? {[P in K]: T[K]} & {[P in Exclude<keyof T, K>]?: never}
+  : never;