react-native-drax 0.10.3 → 0.11.0-alpha.2

package/build/types.d.ts

@@ -1,13 +1,15 @@
-import { RefObject, ReactNode } from 'react';
-import { ViewProps, Animated, FlatListProps, ViewStyle, StyleProp, ScrollViewProps, ListRenderItemInfo } from 'react-native';
-import { LongPressGestureHandlerStateChangeEvent, LongPressGestureHandlerGestureEvent } from 'react-native-gesture-handler';
-import { PayloadActionCreator, ActionType } from 'typesafe-actions';
+import { ElementRef, MutableRefObject, PropsWithChildren, ReactNode, RefObject } from 'react';
+import { FlatListProps, ListRenderItem, ListRenderItemInfo, ScrollView, ScrollViewComponent, ScrollViewProps, StyleProp, View, ViewProps, ViewStyle } from 'react-native';
+import { GestureStateChangeEvent, GestureUpdateEvent, LongPressGesture, LongPressGestureHandlerStateChangeEvent, PanGestureHandlerEventPayload } from 'react-native-gesture-handler';
+import { AnimatedStyle, FlatListPropsWithLayout, SharedValue, StyleProps } from 'react-native-reanimated';
+import { ActionType, PayloadActionCreator } from 'typesafe-actions';
 /** Gesture state change event expected by Drax handler */
-export declare type DraxGestureStateChangeEvent = LongPressGestureHandlerStateChangeEvent['nativeEvent'];
+export type DraxGestureStateChangeEvent = LongPressGestureHandlerStateChangeEvent['nativeEvent'];
 /** Gesture event expected by Drax handler */
-export declare type DraxGestureEvent = LongPressGestureHandlerGestureEvent['nativeEvent'];
+export type DraxGestureEvent = LongPressGesture;
 /** An xy-coordinate position value */
 export interface Position {
+    [k: string]: number;
     /** Position on horizontal x-axis, positive is right */
     x: number;
     /** Position on vertical y-axis, positive is down */
@@ -26,7 +28,7 @@ export interface ViewDimensions {
 export interface DraxViewMeasurements extends Position, ViewDimensions {
 }
 /** Data about a view involved in a Drax event */
-export interface DraxEventViewData {
+export interface DraxEventViewData extends DraxPayloadViewData {
     /** The view's id */
     id: string;
     /** The view's parent id, if any */
@@ -45,7 +47,7 @@ export interface DraxEventDraggedViewData extends DraxEventViewData {
     /** The relative offset/dimensions ratio of where the view was grabbed */
     grabOffsetRatio: Position;
     /** The position in absolute coordinates of the dragged hover view (dragAbsolutePosition - grabOffset) */
-    hoverPosition: Animated.ValueXY;
+    hoverPosition: Position;
 }
 /** Data about a receiver view involved in a Drax event */
 export interface DraxEventReceiverViewData extends DraxEventViewData {
@@ -81,12 +83,18 @@ export interface DraxDragWithReceiverEventData extends DraxDragEventData {
 /** Data about a Drax drag/receive end event */
 export interface DraxDragWithReceiverEndEventData extends DraxDragWithReceiverEventData, WithCancelledFlag {
 }
-/** Data about a Drax snapback, used for custom animations */
-export interface DraxSnapbackData {
-    hoverPosition: Animated.ValueXY;
+/** Data about a Drax snap, used for custom animations */
+export interface DraxSnapData {
+    hoverPosition: SharedValue<Position>;
     toValue: Position;
     delay: number;
     duration: number;
+    /** Scroll position
+     *  Will be receiver's parent scroll on succesful drops,
+     *  else will be dragged parent scroll */
+    scrollPosition?: SharedValue<Position>;
+    /** Needed to pass to the custom animator for Drax to work properly. */
+    finishedCallback: (finished: boolean) => void;
 }
 /** Data about a Drax monitor event */
 export interface DraxMonitorEventData extends DraxDragEventData {
@@ -103,37 +111,44 @@ export interface DraxMonitorEndEventData extends DraxMonitorEventData, WithCance
 /** Data about a Drax monitor drag-drop event */
 export interface DraxMonitorDragDropEventData extends Required<DraxMonitorEventData> {
 }
-/** Preset values for specifying snapback targets without a Position */
+/** Preset values for specifying snap targets without a Position */
 export declare enum DraxSnapbackTargetPreset {
     Default = 0,
     None = 1
 }
-/** Target for snapback hover view release animation: none, default, or specified Position */
-export declare type DraxSnapbackTarget = DraxSnapbackTargetPreset | Position;
+/** Target for snap hover view release animation: none, default, or specified Position */
+export type DraxSnapbackTarget = DraxSnapbackTargetPreset | Position;
 /**
  * Response type for Drax protocol callbacks involving end of a drag,
- * allowing override of default release snapback behavior.
+ * allowing override of default release snap behavior.
  */
-export declare type DraxProtocolDragEndResponse = void | DraxSnapbackTarget;
+export type DraxProtocolDragEndResponse = void | DraxSnapbackTarget;
 /** Props provided to an internal render function for a hovering copy of a Drax view */
 export interface DraxInternalRenderHoverViewProps {
     /** Key of the hover view React node */
     key: string;
-    /** Hover position of the view */
-    hoverPosition: Animated.ValueXY;
+    /** Hover position of the view - Reanimated shared value */
+    hoverPosition: SharedValue<Position>;
     /** State for the view */
     viewState: DraxViewState;
     /** Drax tracking status */
     trackingStatus: DraxTrackingStatus;
     /** Dimensions for the view */
     dimensions: ViewDimensions;
-}
+    /** Scroll Position - Reanimated shared value
+     *  Will be receiver's parent scroll on succesful drops,
+     *  else will be dragged parent scroll */
+    scrollPosition?: SharedValue<Position>;
+}
+export type TReanimatedHoverViewProps = {
+    internalProps: DraxInternalRenderHoverViewProps;
+} & Partial<DraxViewProps>;
 /** Props provided to a render function for a Drax view */
 export interface DraxRenderContentProps {
     /** State for the view, if available */
     viewState?: DraxViewState;
     /** Drax tracking status */
-    trackingStatus: DraxTrackingStatus;
+    trackingStatus?: DraxTrackingStatus;
     /** Is this a hovering copy of the view? */
     hover: boolean;
     /** React children of the DraxView */
@@ -142,10 +157,24 @@ export interface DraxRenderContentProps {
     dimensions?: ViewDimensions;
 }
 /** Props provided to a render function for a hovering copy of a Drax view, compatible with DraxRenderContentProps */
-export interface DraxRenderHoverContentProps extends Required<DraxRenderContentProps> {
+export interface DraxRenderHoverContentProps extends DraxRenderContentProps {
 }
+type DraxPayloadViewData = {
+    data: DraxAbsoluteViewData;
+};
+type DraxSnapPayload = {
+    dragged: DraxPayloadViewData & Omit<DraxTrackingDrag, 'receiver'>;
+    receiver?: DraxPayloadViewData & DraxTrackingReceiver;
+};
 /** Callback protocol for communicating Drax events to views */
 export interface DraxProtocol {
+    hoverPosition: SharedValue<Position>;
+    scrollPositionValue?: Position;
+    /** A function that can be used to conditionally enable or disable receiving. `receptive` prop will override it. */
+    dynamicReceptiveCallback?: (data: {
+        foundView: DraxFoundAbsoluteViewEntry;
+        excludedView: DraxAbsoluteViewData;
+    }) => boolean;
     /** Called in the dragged view when a drag action begins */
     onDragStart?: (data: DraxDragEventData) => void;
     /** Called in the dragged view repeatedly while dragged, not over any receiver */
@@ -160,8 +189,10 @@ export interface DraxProtocol {
     onDragEnd?: (data: DraxDragEndEventData) => DraxProtocolDragEndResponse;
     /** Called in the dragged view when drag ends over a receiver */
     onDragDrop?: (data: DraxDragWithReceiverEventData) => DraxProtocolDragEndResponse;
-    /** Called in the dragged view when drag release snapback ends */
-    onSnapbackEnd?: () => void;
+    /** Called in the dragged view when drag release snap ends */
+    onSnapEnd?: (snapPayload: DraxSnapPayload) => void;
+    /** Called in the receiver view when drag release snap ends */
+    onReceiveSnapEnd?: (snapPayload: DraxSnapPayload) => void;
     /** Called in the receiver view each time an item is initially dragged over it */
     onReceiveDragEnter?: (data: DraxDragWithReceiverEventData) => void;
     /** Called in the receiver view repeatedly while an item is dragged over it */
@@ -182,35 +213,38 @@ export interface DraxProtocol {
     onMonitorDragEnd?: (data: DraxMonitorEndEventData) => DraxProtocolDragEndResponse;
     /** Called in the monitor view when drag ends over it while over a receiver */
     onMonitorDragDrop?: (data: DraxMonitorDragDropEventData) => DraxProtocolDragEndResponse;
-    /** Whether or not to animate hover view snapback after drag release, defaults to true */
-    animateSnapback?: boolean;
-    /** Delay in ms before hover view snapback begins after drag is released */
-    snapbackDelay?: number;
-    /** Duration in ms for hover view snapback to complete */
-    snapbackDuration?: number;
-    /** Function returning custom hover view snapback animation */
-    snapbackAnimator?: (data: DraxSnapbackData) => Animated.CompositeAnimation;
+    /** Whether or not to animate hover view snap after drag release, defaults to true */
+    animateSnap?: boolean;
+    /** Delay in ms before hover view snap begins after drag is released */
+    snapDelay?: number;
+    /** Duration in ms for hover view snap to complete */
+    snapDuration?: number;
+    /** Function returning custom hover view snap animation */
+    snapAnimator?: (data: DraxSnapData) => void;
     /** Payload that will be delivered to receiver views when this view is dragged; overrides `payload` */
     dragPayload?: any;
     /** Payload that will be delievered to dragged views when this view receives them; overrides `payload` */
     receiverPayload?: any;
+    /** Convenience prop to provide one value for both `dragPayload` and `receiverPayload` */
+    payload?: any;
     /** Whether the view can be dragged */
-    draggable: boolean;
+    draggable?: boolean;
     /** Whether the view can receive drags */
-    receptive: boolean;
+    receptive?: boolean;
     /** Whether the view can monitor drags */
-    monitoring: boolean;
+    monitoring?: boolean;
     /** If true, lock drag's x-position */
     lockDragXPosition?: boolean;
     /** If true, lock drag's y position */
     lockDragYPosition?: boolean;
-    /** Function used internally for rendering hovering copy of view when dragged/released */
-    internalRenderHoverView?: (props: DraxInternalRenderHoverViewProps) => ReactNode;
+    /**
+     * Disable automatic HoverView measurements which occur on the `onLayout` event.
+     * Could be useful in case the area size that activates the drag might differ from the actual HoverView
+     * content size. */
+    disableHoverViewMeasurementsOnLayout?: boolean;
 }
 /** Props for components implementing the protocol */
 export interface DraxProtocolProps extends Partial<Omit<DraxProtocol, 'internalRenderHoverView'>> {
-    /** Convenience prop to provide one value for both `dragPayload` and `receiverPayload` */
-    payload?: any;
 }
 /** The states a dragged view can be in */
 export declare enum DraxViewDragStatus {
@@ -233,11 +267,13 @@ export interface DraxViewData {
     /** The view's Drax parent view id, if nested */
     parentId?: string;
     /** The view's scroll position ref, if it is a scrollable parent view */
-    scrollPositionRef?: RefObject<Position>;
+    scrollPosition?: SharedValue<Position>;
     /** The view's protocol callbacks and data */
     protocol: DraxProtocol;
     /** The view's measurements for bounds checking */
     measurements?: DraxViewMeasurements;
+    /** The hover view's measurements for bounds checking */
+    hoverMeasurements?: DraxViewMeasurements;
 }
 /** Information about a view, plus its clipped absolute measurements */
 export interface DraxAbsoluteViewData extends Omit<DraxViewData, 'measurements'>, Required<Pick<DraxViewData, 'measurements'>> {
@@ -287,7 +323,7 @@ export interface DraxTrackingDrag {
     /** The relative offset/dimensions ratio within the dragged view of where it was grabbed */
     grabOffsetRatio: Position;
     /** The position in absolute coordinates of the dragged hover view (dragAbsolutePosition - grabOffset) */
-    hoverPosition: Animated.ValueXY;
+    hoverPosition: SharedValue<Position>;
     /** Tracking information about the current drag receiver, if any */
     receiver?: DraxTrackingReceiver;
     /** View ids of monitors that the drag is currently over */
@@ -298,7 +334,13 @@ export interface DraxTrackingRelease {
     /** View id of the released view */
     viewId: string;
     /** The position in absolute coordinates of the released hover view */
-    hoverPosition: Animated.ValueXY;
+    hoverPosition: SharedValue<Position>;
+    /** Scroll position - Reanimated shared value
+     *  Will be receiver's parent scroll on succesful drops,
+     *  else will be dragged parent scroll */
+    scrollPosition: SharedValue<Position>;
+    /** Offset of the snap's target scroll position in the moment of the release. */
+    scrollPositionOffset: Position;
 }
 /** Tracking status for reference in views */
 export interface DraxTrackingStatus {
@@ -308,7 +350,8 @@ export interface DraxTrackingStatus {
     receiving: boolean;
 }
 /** Render-related state for a registered view */
-export interface DraxViewState {
+export interface DraxViewState extends Partial<DraxPayloadViewData> {
+    id?: string;
     /** Current drag status of the view: Dragged, Released, or Inactive */
     dragStatus: DraxViewDragStatus;
     /** If being dragged, the position in absolute coordinates of the drag point */
@@ -324,7 +367,6 @@ export interface DraxViewState {
     /** If being dragged, the relative offset/dimensions ratio of where the view was grabbed */
     grabOffsetRatio?: Position;
     /** The position in absolute coordinates of the dragged hover view (dragAbsolutePosition - grabOffset) */
-    hoverPosition?: Animated.ValueXY;
     /** Data about the receiver this view is being dragged over, if any */
     draggingOverReceiver?: DraxEventViewData;
     /** Current receive status of the view: Receiving or Inactive */
@@ -335,6 +377,8 @@ export interface DraxViewState {
     receiveOffsetRatio?: Position;
     /** Data about the dragged item this view is receiving, if any */
     receivingDrag?: DraxEventViewData;
+    /** Data about the released dragged item  */
+    releasedDragTracking?: DraxTrackingDrag;
 }
 /** Drax provider render state; maintains render-related data */
 export interface DraxState {
@@ -366,7 +410,7 @@ export interface RegisterViewPayload {
     /** The view's Drax parent view id, if nested */
     parentId?: string;
     /** The view's scroll position ref, if it is a scrollable parent view */
-    scrollPositionRef?: RefObject<Position>;
+    scrollPosition?: SharedValue<Position>;
 }
 /** Payload for unregistering a Drax view */
 export interface UnregisterViewPayload {
@@ -415,9 +459,9 @@ export interface DraxStateActionCreators {
     updateTrackingStatus: PayloadActionCreator<'updateTrackingStatus', UpdateTrackingStatusPayload>;
 }
 /** Dispatchable Drax state action */
-export declare type DraxStateAction = ActionType<DraxStateActionCreators>;
+export type DraxStateAction = ActionType<DraxStateActionCreators>;
 /** Dispatcher of Drax state actions */
-export declare type DraxStateDispatch = (action: DraxStateAction) => void;
+export type DraxStateDispatch = (action: DraxStateAction) => void;
 /** Drax provider internal registry; maintains view data and tracks drags, updating state */
 export interface DraxRegistry {
     /** A list of the unique identifiers of the registered views, in order of registration */
@@ -438,9 +482,56 @@ export interface DraxRegistry {
     /** Drax state dispatch function */
     stateDispatch: DraxStateDispatch;
 }
+export type TDragPositionData = {
+    dragAbsolutePosition: {
+        x: number;
+        y: number;
+    };
+    dragTranslation: {
+        x: number;
+        y: number;
+    };
+    dragTranslationRatio: {
+        x: number;
+        y: number;
+    };
+} | undefined;
+export interface GetDragPositionDataParams {
+    parentPosition: Position;
+    draggedMeasurements: DraxViewMeasurements;
+    lockXPosition?: boolean;
+    lockYPosition?: boolean;
+}
+export type TPanGestureDetectorProps = PropsWithChildren<{
+    id: string;
+    longPressDelay: number;
+    draggable: boolean;
+}>;
 /** Context value used internally by Drax provider */
 export interface DraxContextValue {
-    /** Get a Drax view state by view id, if it exists */
+    getReleaseViews: () => string[];
+    startPosition: SharedValue<TStartPosition>;
+    parentPosition: SharedValue<Position>;
+    findMonitorsAndReceiver: (absolutePosition: Position, excludeViewId: string) => {
+        monitors: DraxFoundAbsoluteViewEntry[];
+        receiver: DraxFoundAbsoluteViewEntry | undefined;
+    };
+    getTrackingDragged: () => {
+        tracking: DraxTrackingDrag;
+        id: string;
+        data: DraxAbsoluteViewData;
+    } | undefined;
+    getTrackingReceiver: () => {
+        tracking: DraxTrackingReceiver;
+        id: string;
+        data: DraxAbsoluteViewData;
+    } | undefined;
+    resetReceiver: () => void;
+    getAbsoluteViewData: (id: string | undefined) => DraxAbsoluteViewData | undefined;
+    getTrackingMonitorIds: () => string[];
+    setMonitorIds: (monitorIds: string[]) => void;
+    updateReceiver: (receiver: DraxFoundAbsoluteViewEntry, dragged: DraxAbsoluteViewEntry) => DraxTrackingReceiver | undefined;
+    dragPositionDataSV: SharedValue<TDragPositionData> /** Get a Drax view state by view id, if it exists */;
     getViewState: (id: string) => DraxViewState | undefined;
     /** Get current Drax tracking status */
     getTrackingStatus: () => DraxTrackingStatus;
@@ -452,12 +543,14 @@ export interface DraxContextValue {
     updateViewProtocol: (payload: UpdateViewProtocolPayload) => void;
     /** Update view measurements for a registered Drax view */
     updateViewMeasurements: (payload: UpdateViewMeasurementsPayload) => void;
+    /** Update hover view measurements for a registered Drax view */
+    updateHoverViewMeasurements: (payload: UpdateViewMeasurementsPayload) => void;
     /** Handle gesture state change for a registered Drax view */
-    handleGestureStateChange: (id: string, event: DraxGestureStateChangeEvent) => void;
+    handleGestureStateChange: (id: string) => (event: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => void;
     /** Handle gesture event for a registered Drax view */
-    handleGestureEvent: (id: string, event: DraxGestureEvent) => void;
-    /** Root node handle ref for the Drax provider, for measuring non-parented views in relation to */
-    rootNodeHandleRef: RefObject<number | null>;
+    handleGestureEvent: (id: string, event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => void;
+    /** Root View ref for the Drax provider, for measuring non-parented views in relation to */
+    rootViewRef: RefObject<View | null>;
     /** Drax parent view for all views under this context, when nesting */
     parent?: DraxParentView;
 }
@@ -481,33 +574,34 @@ export interface DraxViewRegistration {
 export interface DraxParentView {
     /** Drax view id of the parent */
     id: string;
-    /** Ref to node handle of the parent, for measuring relative to */
-    nodeHandleRef: RefObject<number | null>;
+    /** View Ref of the parent, for measuring relative to */
+    viewRef: RefObject<ElementRef<typeof ScrollViewComponent> | ScrollView | View | null | undefined>;
 }
 /** Function that receives a Drax view measurement */
 export interface DraxViewMeasurementHandler {
     (measurements: DraxViewMeasurements | undefined): void;
 }
 /** Layout-related style keys that are omitted from hover view styles */
-export declare type LayoutStyleKey = ('margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'marginStart' | 'marginEnd' | 'left' | 'right' | 'top' | 'bottom' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexGrow' | 'flexShrink');
+export type LayoutStyleKey = 'margin' | 'marginHorizontal' | 'marginVertical' | 'marginLeft' | 'marginRight' | 'marginTop' | 'marginBottom' | 'marginStart' | 'marginEnd' | 'left' | 'right' | 'top' | 'bottom' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexGrow' | 'flexShrink';
+export type TSDraxtyles = ViewStyle | StyleProp<StyleProps> | null | StyleProp<ViewStyle> | StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
 /** Style for a Animated.View used for a hover view */
-export declare type AnimatedViewStyleWithoutLayout = Omit<Animated.WithAnimatedValue<ViewStyle>, LayoutStyleKey>;
+export type AnimatedViewStyleWithoutLayout = Omit<TSDraxtyles, LayoutStyleKey>;
 /** Style prop for a Animated.View used for a hover view */
-export declare type AnimatedViewStylePropWithoutLayout = StyleProp<AnimatedViewStyleWithoutLayout>;
+export type AnimatedViewStylePropWithoutLayout = TSDraxtyles;
 /** Style-related props for a Drax view */
 export interface DraxViewStyleProps {
     /** Custom style prop to allow animated values */
-    style?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    style?: TSDraxtyles;
     /** Additional view style applied while this view is not being dragged or released */
-    dragInactiveStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    dragInactiveStyle?: TSDraxtyles;
     /** Additional view style applied while this view is being dragged */
-    draggingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    draggingStyle?: TSDraxtyles;
     /** Additional view style applied while this view is being dragged over a receiver */
-    draggingWithReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    draggingWithReceiverStyle?: TSDraxtyles;
     /** Additional view style applied while this view is being dragged NOT over a receiver */
-    draggingWithoutReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    draggingWithoutReceiverStyle?: TSDraxtyles;
     /** Additional view style applied while this view has just been released from a drag */
-    dragReleasedStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    dragReleasedStyle?: TSDraxtyles;
     /** Additional view style applied to the hovering copy of this view during drag/release */
     hoverStyle?: AnimatedViewStylePropWithoutLayout;
     /** Additional view style applied to the hovering copy of this view while dragging */
@@ -519,15 +613,15 @@ export interface DraxViewStyleProps {
     /** Additional view style applied to the hovering copy of this view when just released */
     hoverDragReleasedStyle?: AnimatedViewStylePropWithoutLayout;
     /** Additional view style applied while this view is not receiving a drag */
-    receiverInactiveStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    receiverInactiveStyle?: TSDraxtyles;
     /** Additional view style applied while this view is receiving a drag */
-    receivingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    receivingStyle?: TSDraxtyles;
     /** Additional view style applied to this view while any other view is being dragged */
-    otherDraggingStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    otherDraggingStyle?: TSDraxtyles;
     /** Additional view style applied to this view while any other view is being dragged over a receiver */
-    otherDraggingWithReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    otherDraggingWithReceiverStyle?: TSDraxtyles;
     /** Additional view style applied to this view while any other view is being dragged NOT over a receiver */
-    otherDraggingWithoutReceiverStyle?: StyleProp<Animated.WithAnimatedValue<ViewStyle>>;
+    otherDraggingWithoutReceiverStyle?: TSDraxtyles;
 }
 /** Custom render function for content of a DraxView */
 export interface DraxViewRenderContent {
@@ -537,6 +631,10 @@ export interface DraxViewRenderContent {
 export interface DraxViewRenderHoverContent {
     (props: DraxRenderHoverContentProps): ReactNode;
 }
+export type TStartPosition = {
+    parent: Position;
+    grab: Position;
+};
 /** Props for a DraxView; combines protocol props and standard view props */
 export interface DraxViewProps extends Omit<ViewProps, 'style'>, DraxProtocolProps, DraxViewStyleProps {
     /** Custom render function for content of this view */
@@ -555,8 +653,8 @@ export interface DraxViewProps extends Omit<ViewProps, 'style'>, DraxProtocolPro
     parent?: DraxParentView;
     /** If true, treat this view as a Drax parent view for nested children */
     isParent?: boolean;
-    /** The view's scroll position ref, if it is a scrollable parent view */
-    scrollPositionRef?: RefObject<Position>;
+    /** Used internally -  The view's scroll position, if it is a scrollable parent view */
+    scrollPosition?: SharedValue<Position>;
     /** Time in milliseconds view needs to be pressed before drag starts */
     longPressDelay?: number;
 }
@@ -588,8 +686,12 @@ export interface DraxScrollViewProps extends ScrollViewProps, DraxAutoScrollProp
 }
 /** DraxList item being dragged */
 export interface DraxListDraggedItemData<TItem> {
+    /** The list index of the item that is being dragged */
     index: number;
+    /** The item that is being dragged (or undefined if data is not found) */
     item?: TItem;
+    /** Boolean representing an incoming external item dragged into the DraxList */
+    isExternalDrag: boolean;
 }
 /** Event data for when a list item reorder drag action begins */
 export interface DraxListOnItemDragStartEventData<TItem> extends DraxDragEventData, DraxListDraggedItemData<TItem> {
@@ -606,10 +708,16 @@ export interface DraxListOnItemDragEndEventData<TItem> extends DraxMonitorEventD
 }
 /** Event data for when an item is released in a new position within a DraxList, reordering the list */
 export interface DraxListOnItemReorderEventData<TItem> {
-    fromItem: TItem;
+    /** The item that was moved */
+    fromItem?: TItem;
+    /** The list index of the item that was moved */
     fromIndex: number;
-    toItem: TItem;
+    /** The item it was moved onto */
+    toItem?: TItem;
+    /** The list index of the item it was moved onto */
     toIndex: number;
+    /** Boolean representing an incoming external item dragged into the DraxList */
+    isExternalDrag: boolean;
 }
 /** Render function for content of a DraxList item's DraxView */
 export interface DraxListRenderItemContent<TItem> {
@@ -624,17 +732,20 @@ export interface DraxListOnItemReorder<TItem> {
     (eventData: DraxListOnItemReorderEventData<TItem>): void;
 }
 /** Props for a DraxList; extends standard FlatList props */
-export interface DraxListProps<TItem> extends Omit<FlatListProps<TItem>, 'renderItem'>, DraxAutoScrollProps {
-    /** Unique drax view id, auto-generated if omitted */
-    id?: string;
-    /** Style prop for the underlying FlatList */
-    flatListStyle?: StyleProp<ViewStyle>;
-    /** Style props to apply to all DraxView items in the list */
-    itemStyles?: DraxViewStyleProps;
-    /** Render function for content of an item's DraxView */
-    renderItemContent: DraxListRenderItemContent<TItem>;
-    /** Render function for content of an item's hovering copy, defaults to renderItemContent */
-    renderItemHoverContent?: DraxListRenderItemHoverContent<TItem>;
+export interface DraxListProps<TItem> extends Omit<RemoveSharedValues<FlatListPropsWithLayout<TItem>>, 'renderItem'>, DraxAutoScrollProps {
+    /**
+     * @deprecated
+     *
+     * @description Unique drax view id, auto-generated if omitted
+     *
+     * Please use `parentDraxViewProps.id` instead
+     */
+    id?: never;
+    /**
+     * @experimental
+     * Style props to apply to the parent DraxView when monitoring an External item drag
+     * Might be very expensive in terms of performance */
+    monitoringExternalDragStyle?: TSDraxtyles;
     /** Callback handler for when a list item reorder drag action begins */
     onItemDragStart?: (eventData: DraxListOnItemDragStartEventData<TItem>) => void;
     /** Callback handler for when a list item position (index) changes during a reorder drag */
@@ -645,12 +756,52 @@ export interface DraxListProps<TItem> extends Omit<FlatListProps<TItem>, 'render
     onItemReorder?: DraxListOnItemReorder<TItem>;
     /** Can the list be reordered by dragging items? Defaults to true if onItemReorder is set. */
     reorderable?: boolean;
-    /** Can the items be dragged? Defaults to true. */
-    itemsDraggable?: boolean;
     /** If true, lock item drags to the list's main axis */
     lockItemDragsToMainAxis?: boolean;
     /** Time in milliseconds view needs to be pressed before drag starts */
     longPressDelay?: number;
-    /** Function that receives an item and returns a list of DraxViewProps to apply to that item's DraxView */
-    viewPropsExtractor?: (item: TItem) => Partial<DraxViewProps>;
-}
+    renderItem: (info: ListRenderItemInfo<TItem>, itemProps: DraxListItemProps<TItem>) => ReturnType<ListRenderItem<TItem>>;
+    /**
+     * @inheritDoc `originalIndex` and `index` cannot be used in the DraxList data payload, since
+     * it can break it when using external drags
+     */
+    data: FlatListProps<WithoutIndexAndOriginalIndex<TItem>>['data'];
+    /**
+     * @experimental
+     * Props to apply to the parent DraxView that's wrapping the FlatList
+     */
+    parentDraxViewProps?: DraxViewProps;
+    /**
+     * When true, items will shift based on their centers instead of edges.
+     * This is always true for grid layouts (numColumns > 1).
+     * @default false
+     */
+    centerShift?: boolean;
+}
+export interface DraxListItemProps<T extends unknown> {
+    index: number;
+    item: T;
+    originalIndex: number;
+    horizontal: boolean;
+    lockItemDragsToMainAxis: boolean;
+    draggedItem: SharedValue<number | undefined>;
+    shiftsRef: SharedValue<Position[]>;
+    itemMeasurementsRef: MutableRefObject<((DraxViewMeasurements & {
+        key?: string;
+    }) | undefined)[]>;
+    prevItemMeasurementsRef: MutableRefObject<((DraxViewMeasurements & {
+        key?: string;
+    }) | undefined)[]>;
+    resetDraggedItem: () => void;
+    keyExtractor?: (item: T, index: number) => string;
+    previousShiftsRef: SharedValue<Position[]>;
+    registrationsRef: MutableRefObject<(DraxViewRegistration | undefined)[]>;
+    data: DraxListProps<T>['data'];
+}
+type UnwrapSharedValue<T> = T extends SharedValue<infer U> ? U : T;
+type RemoveSharedValues<T> = {
+    [K in keyof T]: UnwrapSharedValue<T[K]>;
+};
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type WithoutIndexAndOriginalIndex<T> = IsAny<T> extends true ? T : T extends object ? 'index' extends keyof T ? never : 'originalIndex' extends keyof T ? never : T : T;
+export {};

package/build/types.js

@@ -2,17 +2,20 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoScrollDirection = exports.DraxViewReceiveStatus = exports.DraxViewDragStatus = exports.DraxSnapbackTargetPreset = exports.isWithCancelledFlag = exports.isPosition = void 0;
 /** Predicate for checking if something is a Position */
-const isPosition = (something) => (typeof something === 'object' && something !== null && typeof something.x === 'number' && typeof something.y === 'number');
+const isPosition = (something) => typeof something === 'object' &&
+    something !== null &&
+    typeof something.x === 'number' &&
+    typeof something.y === 'number';
 exports.isPosition = isPosition;
 /** Predicate for checking if something has a cancelled flag */
-const isWithCancelledFlag = (something) => (typeof something === 'object' && something !== null && typeof something.cancelled === 'boolean');
+const isWithCancelledFlag = (something) => typeof something === 'object' && something !== null && typeof something.cancelled === 'boolean';
 exports.isWithCancelledFlag = isWithCancelledFlag;
-/** Preset values for specifying snapback targets without a Position */
+/** Preset values for specifying snap targets without a Position */
 var DraxSnapbackTargetPreset;
 (function (DraxSnapbackTargetPreset) {
     DraxSnapbackTargetPreset[DraxSnapbackTargetPreset["Default"] = 0] = "Default";
     DraxSnapbackTargetPreset[DraxSnapbackTargetPreset["None"] = 1] = "None";
-})(DraxSnapbackTargetPreset = exports.DraxSnapbackTargetPreset || (exports.DraxSnapbackTargetPreset = {}));
+})(DraxSnapbackTargetPreset || (exports.DraxSnapbackTargetPreset = DraxSnapbackTargetPreset = {}));
 /** The states a dragged view can be in */
 var DraxViewDragStatus;
 (function (DraxViewDragStatus) {
@@ -22,7 +25,7 @@ var DraxViewDragStatus;
     DraxViewDragStatus[DraxViewDragStatus["Dragging"] = 1] = "Dragging";
     /** View has been released but has not yet snapped back to inactive */
     DraxViewDragStatus[DraxViewDragStatus["Released"] = 2] = "Released";
-})(DraxViewDragStatus = exports.DraxViewDragStatus || (exports.DraxViewDragStatus = {}));
+})(DraxViewDragStatus || (exports.DraxViewDragStatus = DraxViewDragStatus = {}));
 /** The states a receiver view can be in */
 var DraxViewReceiveStatus;
 (function (DraxViewReceiveStatus) {
@@ -30,7 +33,7 @@ var DraxViewReceiveStatus;
     DraxViewReceiveStatus[DraxViewReceiveStatus["Inactive"] = 0] = "Inactive";
     /** View is receiving a drag; an active drag touch point is currently over this view */
     DraxViewReceiveStatus[DraxViewReceiveStatus["Receiving"] = 1] = "Receiving";
-})(DraxViewReceiveStatus = exports.DraxViewReceiveStatus || (exports.DraxViewReceiveStatus = {}));
+})(DraxViewReceiveStatus || (exports.DraxViewReceiveStatus = DraxViewReceiveStatus = {}));
 /** Auto-scroll direction used internally by DraxScrollView and DraxList */
 var AutoScrollDirection;
 (function (AutoScrollDirection) {
@@ -40,4 +43,4 @@ var AutoScrollDirection;
     AutoScrollDirection[AutoScrollDirection["None"] = 0] = "None";
     /** Auto-scrolling forward toward the end of the list */
     AutoScrollDirection[AutoScrollDirection["Forward"] = 1] = "Forward";
-})(AutoScrollDirection = exports.AutoScrollDirection || (exports.AutoScrollDirection = {}));
+})(AutoScrollDirection || (exports.AutoScrollDirection = AutoScrollDirection = {}));