react-native-reorderable-list 0.8.0 → 0.10.0

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,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.8.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,28 +38,29 @@ export const ReorderableListCell = memo(
     draggedIndex,
     animationDuration,
   }: ReorderableListCellProps<T>) => {
-    const {currentIndex, draggedHeight, scale, opacity} = useContext(
-      ReorderableListContext,
-    );
+    const {currentIndex, draggedHeight, activeIndex, cellAnimations} =
+      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],
     );
 
     // 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);
+    const isActiveCell = useDerivedValue(() => draggedIndex.value === index);
 
     useAnimatedReaction(
       () => dragY.value,
@@ -101,12 +103,23 @@ export const ReorderableListCell = memo(
     );
 
     const animatedStyle = useAnimatedStyle(() => {
-      if (isActive.value) {
-        return {
-          transform: [{translateY: itemTranslateY.value}, {scale: scale.value}],
-          opacity: opacity.value,
-          zIndex: 999,
-        };
+      if (isActiveCell.value) {
+        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

@@ -43,8 +43,8 @@ interface ReorderableListCoreProps<T> extends ReorderableListProps<T> {
 
 const ReorderableListCore = <T,>(
   {
-    data,
     autoscrollThreshold = 0.1,
+    autoscrollThresholdOffset,
     autoscrollSpeedScale = 1,
     autoscrollDelay = AUTOSCROLL_CONFIG.delay,
     animationDuration = 200,
@@ -54,17 +54,17 @@ const ReorderableListCore = <T,>(
     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>>,
@@ -84,6 +84,7 @@ const ReorderableListCore = <T,>(
   } = useReorderableListCore({
     ref,
     autoscrollThreshold,
+    autoscrollThresholdOffset,
     autoscrollSpeedScale,
     autoscrollDelay,
     animationDuration,
@@ -99,13 +100,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(() => {
@@ -145,17 +149,13 @@ const ReorderableListCore = <T,>(
         <AnimatedFlatList
           {...rest}
           ref={handleRef}
-          data={data}
           CellRendererComponent={renderAnimatedCell}
           onLayout={handleFlatListLayout}
           onScroll={composedScrollHandler}
           scrollEventThrottle={1}
           horizontal={false}
           removeClippedSubviews={false}
-          keyExtractor={keyExtractor}
-          extraData={extraData}
           numColumns={1}
-          scrollEnabled={scrollEnabled}
         />
       </GestureDetector>
     </ReorderableListContext.Provider>

package/src/components/ReorderableListCore/useReorderableListCore.ts

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {
   FlatList,
   LayoutChangeEvent,
@@ -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;
@@ -59,11 +60,15 @@ interface UseReorderableListCoreArgs<T> {
   initialScrollViewScrollEnabled: boolean | undefined;
   nestedScrollable: boolean | undefined;
   cellAnimations: ReorderableListCellAnimations | undefined;
+  shouldUpdateActiveItem: boolean | undefined;
+  panEnabled: boolean;
+  panActivateAfterLongPress: number | undefined;
 }
 
 export const useReorderableListCore = <T>({
   ref,
   autoscrollThreshold,
+  autoscrollThresholdOffset,
   autoscrollSpeedScale,
   autoscrollDelay,
   animationDuration,
@@ -80,8 +85,12 @@ export const useReorderableListCore = <T>({
   initialScrollViewScrollEnabled,
   nestedScrollable,
   cellAnimations,
+  shouldUpdateActiveItem,
+  panActivateAfterLongPress,
+  panEnabled,
 }: UseReorderableListCoreArgs<T>) => {
   const flatListRef = useAnimatedRef<FlatList>();
+  const [activeIndex, setActiveIndex] = useState(-1);
   const scrollEnabled = useSharedValue(initialScrollEnabled);
   const gestureState = useSharedValue<State>(State.UNDETERMINED);
   const currentY = useSharedValue(0);
@@ -112,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;
@@ -124,17 +132,27 @@ export const useReorderableListCore = <T>({
       currentIndex,
       draggedIndex,
       dragEndHandlers,
-      scale: scale || scaleDefault,
-      opacity: opacity || opacityDefault,
+      activeIndex,
+      cellAnimations: {
+        ...cellAnimations,
+        transform:
+          cellAnimations && 'transform' in cellAnimations
+            ? cellAnimations.transform
+            : [{scale: scaleDefault}],
+        opacity:
+          cellAnimations && 'opacity' in cellAnimations
+            ? cellAnimations.opacity
+            : opacityDefault,
+      },
     }),
     [
       draggedHeight,
       currentIndex,
       draggedIndex,
       dragEndHandlers,
-      scale,
+      activeIndex,
+      cellAnimations,
       scaleDefault,
-      opacity,
       opacityDefault,
     ],
   );
@@ -177,9 +195,21 @@ export const useReorderableListCore = <T>({
     ],
   );
 
+  const panGestureHandlerWithOptions = useMemo(() => {
+    if (typeof panActivateAfterLongPress === 'number') {
+      panGestureHandler.activateAfterLongPress(panActivateAfterLongPress);
+    }
+
+    if (!panEnabled) {
+      panGestureHandler.enabled(panEnabled);
+    }
+
+    return panGestureHandler;
+  }, [panActivateAfterLongPress, panEnabled, panGestureHandler]);
+
   const gestureHandler = useMemo(
-    () => Gesture.Simultaneous(Gesture.Native(), panGestureHandler),
-    [panGestureHandler],
+    () => Gesture.Simultaneous(Gesture.Native(), panGestureHandlerWithOptions),
+    [panGestureHandlerWithOptions],
   );
 
   const setScrollEnabled = useCallback(
@@ -338,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(
@@ -367,6 +397,10 @@ export const useReorderableListCore = <T>({
         // enable back scroll on releasing
         runOnJS(setScrollEnabled)(true);
 
+        if (shouldUpdateActiveItem) {
+          runOnJS(setActiveIndex)(-1);
+        }
+
         // trigger onDragEnd event
         let e = {from: draggedIndex.value, to: currentIndex.value};
         onDragEnd?.(e);
@@ -442,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
@@ -468,7 +511,7 @@ export const useReorderableListCore = <T>({
         bottom: hiddenArea.bottom > 0.1 ? bottom - hiddenArea.bottom : 0,
       };
     },
-    [autoscrollThreshold, flatListHeightY],
+    [autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY],
   );
 
   const shouldScrollParent = useCallback(
@@ -644,6 +687,10 @@ export const useReorderableListCore = <T>({
         // after scrolling the parent list it would offset the new dragged item in another nested list
         resetSharedValues();
 
+        if (shouldUpdateActiveItem) {
+          runOnJS(setActiveIndex)(index);
+        }
+
         dragInitialScrollOffsetY.value = flatListScrollOffsetY.value;
         scrollViewDragInitialScrollOffsetY.value = scrollViewScrollOffsetY
           ? scrollViewScrollOffsetY.value
@@ -664,6 +711,7 @@ export const useReorderableListCore = <T>({
     },
     [
       resetSharedValues,
+      shouldUpdateActiveItem,
       dragInitialScrollOffsetY,
       scrollViewScrollOffsetY,
       scrollViewDragInitialScrollOffsetY,

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/ReorderableCellContext.ts

@@ -6,6 +6,7 @@ interface ReorderableCellContextData {
   index: number;
   dragHandler: () => void;
   draggedIndex: SharedValue<number>;
+  isActive: boolean;
 }
 
 export const ReorderableCellContext = React.createContext<

package/src/contexts/ReorderableListContext.ts

@@ -2,12 +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/hooks/index.ts

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

package/src/hooks/useIsActive.ts

@@ -0,0 +1,7 @@
+import {useContext} from './useContext';
+import {ReorderableCellContext} from '../contexts';
+
+export const useIsActive = () => {
+  const {isActive} = useContext(ReorderableCellContext);
+  return isActive;
+};

package/src/index.ts

@@ -4,6 +4,7 @@ import {
   ScrollViewContainer,
 } from './components';
 import {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragEnd,
   useReorderableDragStart,
@@ -19,6 +20,7 @@ import type {
 import {reorderItems} from './utils';
 
 export {
+  useIsActive,
   useReorderableDrag,
   useReorderableDragStart,
   useReorderableDragEnd,

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,9 +95,21 @@ 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;
+  /**
+   * Whether the active item should be updated. Enables usage of `useIsActive` hook. Default: `false`.
+   */
+  shouldUpdateActiveItem?: boolean;
+  /**
+   * Wether the pan gestures necessary for dragging are enabled. Default: `true`.
+   */
+  panEnabled?: boolean;
+  /**
+   * Duration in milliseconds of a long press on the list before pan gestures, necessary for dragging, are allowed to activate.
+   */
+  panActivateAfterLongPress?: number;
   /**
    * Event fired after an item is released and the list is reordered.
    */
@@ -92,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