react-native-reorderable-list 0.9.0 → 0.10.0

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/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.
@@ -30,11 +31,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 +67,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;
     /**
@@ -90,15 +99,21 @@ export interface ReorderableListProps<T> extends Omit<FlatListProps<T>, OmittedP
      */
     onDragEnd?: (event: ReorderableListDragEndEvent) => 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.10.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,
@@ -83,6 +84,7 @@ const ReorderableListCore = <T,>(
   } = useReorderableListCore({
     ref,
     autoscrollThreshold,
+    autoscrollThresholdOffset,
     autoscrollSpeedScale,
     autoscrollDelay,
     animationDuration,

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -43,6 +43,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;
@@ -67,6 +68,7 @@ interface UseReorderableListCoreArgs<T> {
 export const useReorderableListCore = <T>({
   ref,
   autoscrollThreshold,
+  autoscrollThresholdOffset,
   autoscrollSpeedScale,
   autoscrollDelay,
   animationDuration,
@@ -119,7 +121,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 +133,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 +151,8 @@ export const useReorderableListCore = <T>({
       draggedIndex,
       dragEndHandlers,
       activeIndex,
-      scale,
+      cellAnimations,
       scaleDefault,
-      opacity,
       opacityDefault,
     ],
   );
@@ -359,19 +368,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 +476,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 +511,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/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;

package/src/types/props.ts

@@ -1,7 +1,26 @@
-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.
@@ -43,11 +62,16 @@ 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`.
    */
@@ -71,7 +95,7 @@ export interface ReorderableListProps<T>
    */
   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;
   /**
@@ -104,15 +128,42 @@ export interface ReorderableListProps<T>
   onDragEnd?: (event: ReorderableListDragEndEvent) => 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];
+  },
+  // omit custom type and type with JSDoc
+  '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