@btfash/react-native-reanimated-dnd 1.1.0

package/lib/hooks/index.js

@@ -0,0 +1 @@
+export{useSortable}from"./useSortable";export{useSortableList}from"./useSortableList";export{useHorizontalSortable}from"./useHorizontalSortable";export{useHorizontalSortableList}from"./useHorizontalSortableList";export{useDraggable}from"./useDraggable";export{useDroppable}from"./useDroppable";

package/lib/hooks/useDraggable.d.ts

@@ -0,0 +1,2 @@
+import { UseDraggableOptions, UseDraggableReturn } from "../types/draggable";
+export declare const useDraggable: <TData = unknown>(options: UseDraggableOptions<TData>) => UseDraggableReturn;

package/lib/hooks/useDraggable.js

@@ -0,0 +1 @@
+import React,{useRef,useCallback,useContext,useEffect,useState}from"react";import{useSharedValue,useAnimatedStyle,withSpring,runOnJS,runOnUI,useAnimatedReaction,useAnimatedRef,measure}from"react-native-reanimated";import{Gesture}from"react-native-gesture-handler";import{SlotsContext}from"../types/context";import{DraggableState}from"../types/draggable";export const useDraggable=options=>{const{data,draggableId,dragDisabled=false,preDragDelay=0,onDragStart,onDragEnd,onDragging,onStateChange,animationFunction,dragBoundsRef,dragAxis="both",collisionAlgorithm="intersect",children,handleComponent}=options;const animatedViewRef=useAnimatedRef();const[state,setState]=useState(DraggableState.IDLE);const[hasHandle,setHasHandle]=useState(false);useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}const props=child.props;if(child.props&&props.children){if(React.Children.toArray(props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useEffect((()=>{onStateChange===null||onStateChange===void 0?void 0:onStateChange(state)}),[state,onStateChange]);const tx=useSharedValue(0);const ty=useSharedValue(0);const offsetX=useSharedValue(0);const offsetY=useSharedValue(0);const dragDisabledShared=useSharedValue(dragDisabled);const dragAxisShared=useSharedValue(dragAxis);const preDragDelayShared=useSharedValue(preDragDelay);const originX=useSharedValue(0);const originY=useSharedValue(0);const itemW=useSharedValue(0);const itemH=useSharedValue(0);const isOriginSet=useRef(false);const internalDraggableId=useRef(draggableId||`draggable-${Math.random().toString(36).substr(2,9)}`).current;const boundsX=useSharedValue(0);const boundsY=useSharedValue(0);const boundsWidth=useSharedValue(0);const boundsHeight=useSharedValue(0);const boundsAreSet=useSharedValue(false);const{getSlots,setActiveHoverSlot,activeHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener,registerDroppedItem,unregisterDroppedItem,hasAvailableCapacity,onDragging:contextOnDragging,onDragStart:contextOnDragStart,onDragEnd:contextOnDragEnd}=useContext(SlotsContext);useEffect((()=>{preDragDelayShared.value=preDragDelay}),[preDragDelay,preDragDelayShared]);useEffect((()=>{dragDisabledShared.value=dragDisabled}),[dragDisabled,dragDisabledShared]);useEffect((()=>{dragAxisShared.value=dragAxis}),[dragAxis,dragAxisShared]);const updateDraggablePosition=useCallback((()=>{runOnUI((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}const currentTx=tx.value;const currentTy=ty.value;if(currentTx===0&&currentTy===0){const newOriginX=measurement.pageX-currentTx;const newOriginY=measurement.pageY-currentTy;originX.value=newOriginX;originY.value=newOriginY}itemW.value=measurement.width;itemH.value=measurement.height;if(!isOriginSet.current){isOriginSet.current=true}}))()}),[animatedViewRef,originX,originY,itemW,itemH,tx,ty]);const updateDraggablePositionWorklet=useCallback((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}const currentTx=tx.value;const currentTy=ty.value;if(currentTx===0&&currentTy===0){const newOriginX=measurement.pageX-currentTx;const newOriginY=measurement.pageY-currentTy;originX.value=newOriginX;originY.value=newOriginY}itemW.value=measurement.width;itemH.value=measurement.height;if(!isOriginSet.current){isOriginSet.current=true}}),[animatedViewRef,originX,originY,itemW,itemH,tx,ty]);const updateBounds=useCallback((()=>{const currentBoundsView=dragBoundsRef===null||dragBoundsRef===void 0?void 0:dragBoundsRef.current;if(currentBoundsView){currentBoundsView.measure(((_x,_y,width,height,pageX,pageY)=>{if(typeof pageX==="number"&&typeof pageY==="number"&&width>0&&height>0){runOnUI((()=>{"worklet";boundsX.value=pageX;boundsY.value=pageY;boundsWidth.value=width;boundsHeight.value=height;if(!boundsAreSet.value){boundsAreSet.value=true}}))()}else{console.warn("useDraggable: dragBoundsRef measurement failed or returned invalid dimensions. Bounds may be stale or item unbounded.")}}))}else{runOnUI((()=>{"worklet";if(boundsAreSet.value){boundsAreSet.value=false}}))()}}),[dragBoundsRef,boundsX,boundsY,boundsWidth,boundsHeight,boundsAreSet]);useEffect((()=>{const handlePositionUpdate=()=>{updateDraggablePosition();updateBounds()};registerPositionUpdateListener(internalDraggableId,handlePositionUpdate);return()=>{unregisterPositionUpdateListener(internalDraggableId)}}),[internalDraggableId,registerPositionUpdateListener,unregisterPositionUpdateListener,updateDraggablePosition,updateBounds]);useEffect((()=>{updateBounds()}),[updateBounds]);const handleLayoutHandler=useCallback((event=>{updateDraggablePosition()}),[updateDraggablePosition]);const animateDragEndPosition=useCallback(((targetXValue,targetYValue)=>{"worklet";if(animationFunction){tx.value=animationFunction(targetXValue);ty.value=animationFunction(targetYValue)}else{tx.value=withSpring(targetXValue);ty.value=withSpring(targetYValue)}}),[animationFunction,tx,ty]);const performCollisionCheck=useCallback(((draggableX,draggableY,draggableW,draggableH,slot,algo)=>{if(algo==="intersect"){return draggableX<slot.x+slot.width&&draggableX+draggableW>slot.x&&draggableY<slot.y+slot.height&&draggableY+draggableH>slot.y}else if(algo==="contain"){return draggableX>=slot.x&&draggableX+draggableW<=slot.x+slot.width&&draggableY>=slot.y&&draggableY+draggableH<=slot.y+slot.height}else{const draggableCenterX=draggableX+draggableW/2;const draggableCenterY=draggableY+draggableH/2;return draggableCenterX>=slot.x&&draggableCenterX<=slot.x+slot.width&&draggableCenterY>=slot.y&&draggableCenterY<=slot.y+slot.height}}),[]);const processDropAndAnimate=useCallback(((currentTxVal,currentTyVal,draggableData,currentOriginX,currentOriginY,currentItemW,currentItemH)=>{const slots=getSlots();const currentDraggableX=currentOriginX+currentTxVal;const currentDraggableY=currentOriginY+currentTyVal;let hitSlotData=null;let hitSlotId=null;for(const key in slots){const slotId=parseInt(key,10);const s=slots[slotId];const isCollision=performCollisionCheck(currentDraggableX,currentDraggableY,currentItemW,currentItemH,s,collisionAlgorithm);if(isCollision){const hasCapacity=hasAvailableCapacity(s.id);if(hasCapacity){hitSlotData=s;hitSlotId=slotId;break}}}let finalTxValue;let finalTyValue;if(hitSlotData&&hitSlotId!==null){if(hitSlotData.onDrop){hitSlotData.onDrop(draggableData)}runOnJS(registerDroppedItem)(internalDraggableId,hitSlotData.id,draggableData);runOnJS(setState)(DraggableState.DROPPED);const alignment=hitSlotData.dropAlignment||"center";const offset=hitSlotData.dropOffset||{x:0,y:0};let targetX=0;let targetY=0;switch(alignment){case"top-left":targetX=hitSlotData.x;targetY=hitSlotData.y;break;case"top-center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y;break;case"top-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y;break;case"center-left":targetX=hitSlotData.x;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"center-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2;break;case"bottom-left":targetX=hitSlotData.x;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;case"bottom-center":targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;case"bottom-right":targetX=hitSlotData.x+hitSlotData.width-currentItemW;targetY=hitSlotData.y+hitSlotData.height-currentItemH;break;default:targetX=hitSlotData.x+hitSlotData.width/2-currentItemW/2;targetY=hitSlotData.y+hitSlotData.height/2-currentItemH/2}const draggableTargetX=targetX+offset.x;const draggableTargetY=targetY+offset.y;finalTxValue=draggableTargetX-currentOriginX;finalTyValue=draggableTargetY-currentOriginY}else{finalTxValue=0;finalTyValue=0;runOnJS(setState)(DraggableState.IDLE);runOnJS(unregisterDroppedItem)(internalDraggableId)}runOnUI(animateDragEndPosition)(finalTxValue,finalTyValue)}),[getSlots,animateDragEndPosition,collisionAlgorithm,performCollisionCheck,setState,internalDraggableId,registerDroppedItem,unregisterDroppedItem,hasAvailableCapacity]);const updateHoverState=useCallback(((currentTxVal,currentTyVal,currentOriginX,currentOriginY,currentItemW,currentItemH)=>{const slots=getSlots();const currentDraggableX=currentOriginX+currentTxVal;const currentDraggableY=currentOriginY+currentTyVal;let newHoveredSlotId=null;for(const key in slots){const slotId=parseInt(key,10);const s=slots[slotId];const isCollision=performCollisionCheck(currentDraggableX,currentDraggableY,currentItemW,currentItemH,s,collisionAlgorithm);if(isCollision){newHoveredSlotId=slotId;break}}if(activeHoverSlotId!==newHoveredSlotId){setActiveHoverSlot(newHoveredSlotId)}}),[getSlots,setActiveHoverSlot,activeHoverSlotId,collisionAlgorithm,performCollisionCheck]);const gesture=React.useMemo((()=>Gesture.Pan().activateAfterLongPress(preDragDelay).onStart((()=>{"worklet";updateDraggablePositionWorklet();if(dragDisabledShared.value){return}offsetX.value=tx.value;offsetY.value=ty.value;runOnJS(setState)(DraggableState.DRAGGING);if(onDragStart){runOnJS(onDragStart)(data)}if(contextOnDragStart){runOnJS(contextOnDragStart)(data)}})).onUpdate((event=>{"worklet";if(dragDisabledShared.value){return}let newTx=offsetX.value+event.translationX;let newTy=offsetY.value+event.translationY;if(boundsAreSet.value){const currentItemW=itemW.value;const currentItemH=itemH.value;const minTx=boundsX.value-originX.value;const maxTx=boundsX.value+boundsWidth.value-originX.value-currentItemW;const minTy=boundsY.value-originY.value;const maxTy=boundsY.value+boundsHeight.value-originY.value-currentItemH;newTx=Math.max(minTx,Math.min(newTx,maxTx));newTy=Math.max(minTy,Math.min(newTy,maxTy))}if(dragAxisShared.value==="x"){tx.value=newTx}else if(dragAxisShared.value==="y"){ty.value=newTy}else{tx.value=newTx;ty.value=newTy}if(onDragging){runOnJS(onDragging)({x:originX.value,y:originY.value,tx:tx.value,ty:ty.value,itemData:data})}if(contextOnDragging){runOnJS(contextOnDragging)({x:originX.value,y:originY.value,tx:tx.value,ty:ty.value,itemData:data})}runOnJS(updateHoverState)(tx.value,ty.value,originX.value,originY.value,itemW.value,itemH.value)})).onEnd((()=>{"worklet";if(dragDisabledShared.value){return}if(onDragEnd){runOnJS(onDragEnd)(data)}if(contextOnDragEnd){runOnJS(contextOnDragEnd)(data)}runOnJS(processDropAndAnimate)(tx.value,ty.value,data,originX.value,originY.value,itemW.value,itemH.value);runOnJS(setActiveHoverSlot)(null)}))),[dragDisabledShared,offsetX,offsetY,tx,ty,originX,originY,itemW,itemH,onDragStart,onDragEnd,data,processDropAndAnimate,updateHoverState,setActiveHoverSlot,animationFunction,onDragging,boundsAreSet,boundsX,boundsY,boundsWidth,boundsHeight,dragAxisShared,setState,updateDraggablePositionWorklet,contextOnDragging,contextOnDragStart,contextOnDragEnd,preDragDelay]);const animatedStyleProp=useAnimatedStyle((()=>{"worklet";return{transform:[{translateX:tx.value},{translateY:ty.value}]}}),[tx,ty]);useAnimatedReaction((()=>({txValue:tx.value,tyValue:ty.value,isZero:tx.value===0&&ty.value===0})),((result,previous)=>{if(result.isZero&&previous&&!previous.isZero){runOnJS(setState)(DraggableState.IDLE);runOnJS(unregisterDroppedItem)(internalDraggableId)}}),[setState,unregisterDroppedItem,internalDraggableId]);useEffect((()=>()=>{unregisterDroppedItem(internalDraggableId)}),[internalDraggableId,unregisterDroppedItem]);return{animatedViewProps:{style:animatedStyleProp,onLayout:handleLayoutHandler},gesture,state,animatedViewRef,hasHandle}};

package/lib/hooks/useDroppable.d.ts

@@ -0,0 +1,2 @@
+import { UseDroppableOptions, UseDroppableReturn } from "../types/droppable";
+export declare const useDroppable: <TData = unknown>(options: UseDroppableOptions<TData>) => UseDroppableReturn;

package/lib/hooks/useDroppable.js

@@ -0,0 +1 @@
+import{useRef,useEffect,useContext,useCallback,useMemo}from"react";import{StyleSheet}from"react-native";import{useAnimatedRef,measure,runOnUI,runOnJS}from"react-native-reanimated";import{SlotsContext}from"../types/context";let _nextDroppableId=1;const _getUniqueDroppableId=()=>_nextDroppableId++;export const useDroppable=options=>{const{onDrop,dropDisabled,onActiveChange,dropAlignment,dropOffset,activeStyle,droppableId,capacity}=options;const animatedViewRef=useAnimatedRef();const id=useRef(_getUniqueDroppableId()).current;const stringId=useRef(droppableId||`droppable-${id}`).current;const instanceId=useRef(`droppable-${id}-${Math.random().toString(36).substr(2,9)}`).current;const{register,unregister,isRegistered,activeHoverSlotId:contextActiveHoverSlotId,registerPositionUpdateListener,unregisterPositionUpdateListener}=useContext(SlotsContext);const isActive=contextActiveHoverSlotId===id;const{processedActiveStyle,activeTransforms}=useMemo((()=>{if(!isActive||!activeStyle){return{processedActiveStyle:null,activeTransforms:[]}}const flattenedStyle=StyleSheet.flatten(activeStyle);let processedStyle={...flattenedStyle};let transforms=[];if(flattenedStyle.transform){if(Array.isArray(flattenedStyle.transform)){transforms=[...flattenedStyle.transform]}delete processedStyle.transform}return{processedActiveStyle:processedStyle,activeTransforms:transforms}}),[isActive,activeStyle]);const combinedActiveStyle=useMemo((()=>{if(!isActive||!activeStyle){return undefined}if(activeTransforms.length===0){return processedActiveStyle}return{...processedActiveStyle,transform:activeTransforms}}),[isActive,activeStyle,processedActiveStyle,activeTransforms]);useEffect((()=>{onActiveChange===null||onActiveChange===void 0?void 0:onActiveChange(isActive)}),[isActive,onActiveChange]);const registerWithMeasurement=useCallback(((pageX,pageY,width,height)=>{register(id,{id:droppableId||`droppable-${id}`,x:pageX,y:pageY,width,height,onDrop,dropAlignment:dropAlignment||"center",dropOffset:dropOffset||{x:0,y:0},capacity})}),[id,droppableId,onDrop,register,dropAlignment,dropOffset,capacity]);const updateDroppablePosition=useCallback((()=>{runOnUI((()=>{"worklet";const measurement=measure(animatedViewRef);if(measurement===null){return}if(measurement.width>0&&measurement.height>0){runOnJS(registerWithMeasurement)(measurement.pageX,measurement.pageY,measurement.width,measurement.height)}}))()}),[animatedViewRef,registerWithMeasurement]);const handleLayoutHandler=useCallback((_event=>{updateDroppablePosition()}),[updateDroppablePosition]);useEffect((()=>{registerPositionUpdateListener(instanceId,updateDroppablePosition);return()=>{unregisterPositionUpdateListener(instanceId)}}),[instanceId,registerPositionUpdateListener,unregisterPositionUpdateListener,updateDroppablePosition]);useEffect((()=>{if(dropDisabled){unregister(id)}else{updateDroppablePosition()}}),[dropDisabled,id,unregister,updateDroppablePosition]);useEffect((()=>()=>{unregister(id)}),[id,unregister]);return{viewProps:{onLayout:handleLayoutHandler,style:combinedActiveStyle},isActive,activeStyle,animatedViewRef}};

package/lib/hooks/useHorizontalSortable.d.ts

@@ -0,0 +1,2 @@
+import { UseHorizontalSortableOptions, UseHorizontalSortableReturn } from "../types/sortable";
+export declare function useHorizontalSortable<T>(options: UseHorizontalSortableOptions<T>): UseHorizontalSortableReturn;

package/lib/hooks/useHorizontalSortable.js

@@ -0,0 +1 @@
+import{useState,useRef,useEffect,useMemo}from"react";import React from"react";import{runOnJS,useAnimatedReaction,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{Gesture}from"react-native-gesture-handler";import{setHorizontalPosition,setHorizontalAutoScroll,getItemXPosition,getContentWidth}from"../components/sortableUtils";import{HorizontalScrollDirection}from"../types/sortable";export function useHorizontalSortable(options){const{id,positions,leftBound,autoScrollDirection,itemsCount,itemWidth,gap=0,paddingHorizontal=0,containerWidth=500,onMove,onDragStart,onDrop,onDragging,children,handleComponent}=options;const[isMoving,setIsMoving]=useState(false);const[hasHandle,setHasHandle]=useState(false);const movingSV=useSharedValue(false);const currentOverItemId=useSharedValue(null);const onDraggingLastCallTimestamp=useSharedValue(0);const THROTTLE_INTERVAL=50;const initialLeftVal=useMemo((()=>{const posArr=positions.get();const pos=posArr===null||posArr===void 0?void 0:posArr[id];return getItemXPosition(pos,itemWidth,gap,paddingHorizontal)}),[]);const initialLeftBoundVal=useMemo((()=>leftBound.get()),[]);const positionX=useSharedValue(initialLeftVal);const left=useSharedValue(initialLeftVal);const targetLeftBound=useSharedValue(initialLeftBoundVal);const calculatedContainerWidth=useRef(containerWidth).current;const rightBound=useDerivedValue((()=>leftBound.value+calculatedContainerWidth));useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}if(child.props&&child.props.children){if(React.Children.toArray(child.props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useAnimatedReaction((()=>positionX.value),((currentX,previousX)=>{if(currentX===null||!movingSV.value){return}if(previousX!==null&&currentX===previousX){return}const adjustedX=currentX-paddingHorizontal;const itemWithGapWidth=itemWidth+gap;const clampedPosition=Math.min(Math.max(0,Math.ceil(adjustedX/itemWithGapWidth)),itemsCount-1);let newOverItemId=null;for(const[itemIdIter,itemPosIter]of Object.entries(positions.value)){if(itemPosIter===clampedPosition&&itemIdIter!==id){newOverItemId=itemIdIter;break}}if(currentOverItemId.value!==newOverItemId){currentOverItemId.value=newOverItemId}if(onDragging){const now=Date.now();if(now-onDraggingLastCallTimestamp.value>THROTTLE_INTERVAL){runOnJS(onDragging)(id,newOverItemId,Math.round(currentX));onDraggingLastCallTimestamp.value=now}}left.value=currentX;setHorizontalPosition(currentX,itemsCount,positions,id,itemWidth,gap,paddingHorizontal);setHorizontalAutoScroll(currentX,leftBound.value,rightBound.value,itemWidth,autoScrollDirection)}),[movingSV,itemWidth,gap,paddingHorizontal,itemsCount,positions,id,onDragging,leftBound,rightBound,autoScrollDirection,currentOverItemId,left,onDraggingLastCallTimestamp]);useAnimatedReaction((()=>positions.value[id]),((currentPosition,previousPosition)=>{if(currentPosition!==null&&previousPosition!==null&&currentPosition!==previousPosition){if(!movingSV.value){const newLeft=getItemXPosition(currentPosition,itemWidth,gap,paddingHorizontal);left.value=withSpring(newLeft);if(onMove){runOnJS(onMove)(id,previousPosition,currentPosition)}}}}),[movingSV,itemWidth,gap,paddingHorizontal]);useAnimatedReaction((()=>autoScrollDirection.value),((scrollDirection,previousValue)=>{if(scrollDirection!==null&&previousValue!==null&&scrollDirection!==previousValue){switch(scrollDirection){case HorizontalScrollDirection.Left:{targetLeftBound.value=leftBound.value;targetLeftBound.value=withTiming(0,{duration:1500});break}case HorizontalScrollDirection.Right:{const contentWidth=getContentWidth(itemsCount,itemWidth,gap,paddingHorizontal);const maxScroll=Math.max(0,contentWidth-calculatedContainerWidth);targetLeftBound.value=leftBound.value;targetLeftBound.value=withTiming(maxScroll,{duration:1500});break}case HorizontalScrollDirection.None:{targetLeftBound.value=leftBound.value;break}}}}));useAnimatedReaction((()=>targetLeftBound.value),((targetLeftBoundValue,previousValue)=>{if(targetLeftBoundValue!==null&&previousValue!==null&&targetLeftBoundValue!==previousValue){if(movingSV.value){leftBound.value=targetLeftBoundValue}}}),[movingSV]);const initialItemContentX=useSharedValue(0);const initialFingerAbsoluteX=useSharedValue(0);const initialLeftBound=useSharedValue(0);const panGestureHandler=Gesture.Pan().activateAfterLongPress(200).onStart((event=>{"worklet";initialItemContentX.value=getItemXPosition(positions.value[id],itemWidth,gap,paddingHorizontal);initialFingerAbsoluteX.value=event.absoluteX;initialLeftBound.value=leftBound.value;positionX.value=initialItemContentX.value;movingSV.value=true;runOnJS(setIsMoving)(true);if(onDragStart){runOnJS(onDragStart)(id,positions.value[id])}})).onUpdate((event=>{"worklet";const fingerDxScreen=event.absoluteX-initialFingerAbsoluteX.value;const scrollDeltaSinceStart=leftBound.value-initialLeftBound.value;positionX.value=initialItemContentX.value+fingerDxScreen+scrollDeltaSinceStart})).onEnd((()=>{"worklet";const finishPosition=getItemXPosition(positions.value[id],itemWidth,gap,paddingHorizontal);left.value=withTiming(finishPosition);movingSV.value=false;runOnJS(setIsMoving)(false);if(onDrop){const positionsCopy={...positions.value};runOnJS(onDrop)(id,positions.value[id],positionsCopy)}currentOverItemId.value=null}));const animatedStyle=useAnimatedStyle((()=>{"worklet";return{position:"absolute",top:0,bottom:0,left:left.value,width:itemWidth,zIndex:movingSV.value?1:0,backgroundColor:"transparent",shadowColor:"black",shadowOpacity:withSpring(movingSV.value?.2:0),shadowRadius:10}}),[movingSV,itemWidth]);return{animatedStyle,panGestureHandler,isMoving,hasHandle}}

package/lib/hooks/useHorizontalSortableList.d.ts

@@ -0,0 +1,4 @@
+import { UseHorizontalSortableListOptions, UseHorizontalSortableListReturn } from "../types/sortable";
+export declare function useHorizontalSortableList<TData extends {
+    id: string;
+}>(options: UseHorizontalSortableListOptions<TData>): UseHorizontalSortableListReturn<TData>;

package/lib/hooks/useHorizontalSortableList.js

@@ -0,0 +1 @@
+import{useRef,useCallback}from"react";import{scrollTo,useAnimatedReaction,useAnimatedRef,useAnimatedScrollHandler,useSharedValue}from"react-native-reanimated";import{listToObject,getContentWidth}from"../components/sortableUtils";import{HorizontalScrollDirection}from"../types/sortable";export function useHorizontalSortableList(options){const{data,itemWidth,gap=0,paddingHorizontal=0,itemKeyExtractor=item=>item.id}=options;if(__DEV__){data.forEach(((item,index)=>{const id=itemKeyExtractor(item,index);if(typeof id!=="string"||!id){console.error(`[react-native-reanimated-dnd] Item at index ${index} has invalid id: ${id}. `+`Each item must have a unique string id property.`)}}))}const positions=useSharedValue(listToObject(data));const scrollX=useSharedValue(0);const autoScroll=useSharedValue(HorizontalScrollDirection.None);const scrollViewRef=useAnimatedRef();const dropProviderRef=useRef(null);useAnimatedReaction((()=>scrollX.value),(scrolling=>{scrollTo(scrollViewRef,scrolling,0,false)}));const handleScroll=useAnimatedScrollHandler((event=>{scrollX.value=event.contentOffset.x}));const handleScrollEnd=useCallback((()=>{let localScrollTimeout=null;if(localScrollTimeout){clearTimeout(localScrollTimeout)}localScrollTimeout=setTimeout((()=>{var _a;(_a=dropProviderRef.current)===null||_a===void 0?void 0:_a.requestPositionUpdate()}),50)}),[]);const contentWidth=getContentWidth(data.length,itemWidth,gap,paddingHorizontal);const getItemProps=useCallback(((item,index)=>{const id=itemKeyExtractor(item,index);return{id,positions,leftBound:scrollX,autoScrollDirection:autoScroll,itemsCount:data.length,itemWidth,gap,paddingHorizontal}}),[data.length,itemWidth,gap,paddingHorizontal,itemKeyExtractor,positions,scrollX,autoScroll]);return{positions,scrollX,autoScroll,scrollViewRef,dropProviderRef,handleScroll,handleScrollEnd,contentWidth,getItemProps}}

package/lib/hooks/useSortable.d.ts

@@ -0,0 +1,50 @@
+import { StyleProp, ViewStyle } from "react-native";
+import React from "react";
+import { SharedValue } from "react-native-reanimated";
+import { GestureType } from "react-native-gesture-handler";
+export declare enum ScrollDirection {
+    None = "none",
+    Up = "up",
+    Down = "down"
+}
+export declare function clamp(value: number, lowerBound: number, upperBound: number): number;
+export declare function objectMove(object: {
+    [id: string]: number;
+}, from: number, to: number): {
+    [id: string]: number;
+};
+export declare function listToObject<T extends {
+    id: string;
+}>(list: T[]): {
+    [id: string]: number;
+};
+export declare function setPosition(positionY: number, itemsCount: number, positions: SharedValue<{
+    [id: string]: number;
+}>, id: string, itemHeight: number): void;
+export declare function setAutoScroll(positionY: number, lowerBound: number, upperBound: number, scrollThreshold: number, autoScroll: SharedValue<ScrollDirection>): void;
+export interface UseSortableOptions<T> {
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    lowerBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<ScrollDirection>;
+    itemsCount: number;
+    itemHeight: number;
+    containerHeight?: number;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: {
+        [id: string]: number;
+    }) => void;
+    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+    children?: React.ReactNode;
+    handleComponent?: React.ComponentType<any>;
+}
+export interface UseSortableReturn {
+    animatedStyle: StyleProp<ViewStyle>;
+    panGestureHandler: GestureType;
+    isMoving: boolean;
+    hasHandle: boolean;
+}
+export declare function useSortable<T>(options: UseSortableOptions<T>): UseSortableReturn;

package/lib/hooks/useSortable.js

@@ -0,0 +1 @@
+import{useState,useRef,useEffect,useMemo}from"react";import React from"react";import{runOnJS,useAnimatedReaction,useAnimatedStyle,useDerivedValue,useSharedValue,withSpring,withTiming}from"react-native-reanimated";import{Gesture}from"react-native-gesture-handler";export var ScrollDirection;(function(ScrollDirection){ScrollDirection["None"]="none";ScrollDirection["Up"]="up";ScrollDirection["Down"]="down"})(ScrollDirection||(ScrollDirection={}));export function clamp(value,lowerBound,upperBound){"worklet";return Math.max(lowerBound,Math.min(value,upperBound))}export function objectMove(object,from,to){"worklet";const newObject=Object.assign({},object);const movedUp=to<from;for(const id in object){if(object[id]===from){newObject[id]=to;continue}const currentPosition=object[id];if(movedUp&&currentPosition>=to&&currentPosition<from){newObject[id]++}else if(currentPosition<=to&&currentPosition>from){newObject[id]--}}return newObject}export function listToObject(list){const values=Object.values(list);const object={};for(let i=0;i<values.length;i++){object[values[i].id]=i}return object}export function setPosition(positionY,itemsCount,positions,id,itemHeight){"worklet";const newPosition=clamp(Math.floor(positionY/itemHeight),0,itemsCount-1);if(newPosition!==positions.value[id]){positions.value=objectMove(positions.value,positions.value[id],newPosition)}}export function setAutoScroll(positionY,lowerBound,upperBound,scrollThreshold,autoScroll){"worklet";if(positionY<=lowerBound+scrollThreshold){autoScroll.value=ScrollDirection.Up}else if(positionY>=upperBound-scrollThreshold){autoScroll.value=ScrollDirection.Down}else{autoScroll.value=ScrollDirection.None}}export function useSortable(options){const{id,positions,lowerBound,autoScrollDirection,itemsCount,itemHeight,containerHeight=500,onMove,onDragStart,onDrop,onDragging,children,handleComponent}=options;const[isMoving,setIsMoving]=useState(false);const[hasHandle,setHasHandle]=useState(false);const movingSV=useSharedValue(false);const currentOverItemId=useSharedValue(null);const onDraggingLastCallTimestamp=useSharedValue(0);const THROTTLE_INTERVAL=50;const initialTopVal=useMemo((()=>{const posArr=positions.get();const pos=posArr===null||posArr===void 0?void 0:posArr[id];return pos*itemHeight}),[]);const initialLowerBoundVal=useMemo((()=>lowerBound.get()),[]);const positionY=useSharedValue(initialTopVal);const top=useSharedValue(initialTopVal);const targetLowerBound=useSharedValue(initialLowerBoundVal);const calculatedContainerHeight=useRef(containerHeight).current;const upperBound=useDerivedValue((()=>lowerBound.value+calculatedContainerHeight));useEffect((()=>{if(!children||!handleComponent){setHasHandle(false);return}const checkForHandle=child=>{if(React.isValidElement(child)){if(child.type===handleComponent){return true}const props=child.props;if(child.props&&props.children){if(React.Children.toArray(props.children).some(checkForHandle)){return true}}}return false};setHasHandle(React.Children.toArray(children).some(checkForHandle))}),[children,handleComponent]);useAnimatedReaction((()=>positionY.value),((currentY,previousY)=>{if(currentY===null||!movingSV.value){return}if(previousY!==null&&currentY===previousY){return}const clampedPosition=Math.min(Math.max(0,Math.ceil(currentY/itemHeight)),itemsCount-1);let newOverItemId=null;for(const[itemIdIter,itemPosIter]of Object.entries(positions.value)){if(itemPosIter===clampedPosition&&itemIdIter!==id){newOverItemId=itemIdIter;break}}if(currentOverItemId.value!==newOverItemId){currentOverItemId.value=newOverItemId}if(onDragging){const now=Date.now();if(now-onDraggingLastCallTimestamp.value>THROTTLE_INTERVAL){runOnJS(onDragging)(id,newOverItemId,Math.round(currentY));onDraggingLastCallTimestamp.value=now}}top.value=currentY;setPosition(currentY,itemsCount,positions,id,itemHeight);setAutoScroll(currentY,lowerBound.value,upperBound.value,itemHeight,autoScrollDirection)}),[movingSV,itemHeight,itemsCount,positions,id,onDragging,lowerBound,upperBound,autoScrollDirection,currentOverItemId,top,onDraggingLastCallTimestamp]);useAnimatedReaction((()=>positions.value[id]),((currentPosition,previousPosition)=>{if(currentPosition!==null&&previousPosition!==null&&currentPosition!==previousPosition){if(!movingSV.value){top.value=withSpring(currentPosition*itemHeight);if(onMove){runOnJS(onMove)(id,previousPosition,currentPosition)}}}}),[movingSV]);useAnimatedReaction((()=>autoScrollDirection.value),((scrollDirection,previousValue)=>{if(scrollDirection!==null&&previousValue!==null&&scrollDirection!==previousValue){switch(scrollDirection){case ScrollDirection.Up:{targetLowerBound.value=lowerBound.value;targetLowerBound.value=withTiming(0,{duration:1500});break}case ScrollDirection.Down:{const contentHeight=itemsCount*itemHeight;const maxScroll=contentHeight-calculatedContainerHeight;targetLowerBound.value=lowerBound.value;targetLowerBound.value=withTiming(maxScroll,{duration:1500});break}case ScrollDirection.None:{targetLowerBound.value=lowerBound.value;break}}}}));useAnimatedReaction((()=>targetLowerBound.value),((targetLowerBoundValue,previousValue)=>{if(targetLowerBoundValue!==null&&previousValue!==null&&targetLowerBoundValue!==previousValue){if(movingSV.value){lowerBound.value=targetLowerBoundValue}}}),[movingSV]);const initialItemContentY=useSharedValue(0);const initialFingerAbsoluteY=useSharedValue(0);const initialLowerBound=useSharedValue(0);const panGestureHandler=Gesture.Pan().activateAfterLongPress(200).onStart((event=>{"worklet";initialItemContentY.value=positions.value[id]*itemHeight;initialFingerAbsoluteY.value=event.absoluteY;initialLowerBound.value=lowerBound.value;positionY.value=initialItemContentY.value;movingSV.value=true;runOnJS(setIsMoving)(true);if(onDragStart){runOnJS(onDragStart)(id,positions.value[id])}})).onUpdate((event=>{"worklet";const fingerDyScreen=event.absoluteY-initialFingerAbsoluteY.value;const scrollDeltaSinceStart=lowerBound.value-initialLowerBound.value;positionY.value=initialItemContentY.value+fingerDyScreen+scrollDeltaSinceStart})).onEnd((()=>{"worklet";const finishPosition=positions.value[id]*itemHeight;top.value=withTiming(finishPosition);movingSV.value=false;runOnJS(setIsMoving)(false);if(onDrop){const positionsCopy={...positions.value};runOnJS(onDrop)(id,positions.value[id],positionsCopy)}currentOverItemId.value=null}));const animatedStyle=useAnimatedStyle((()=>{"worklet";return{position:"absolute",left:0,right:0,top:top.value,zIndex:movingSV.value?1:0,backgroundColor:"#000000",shadowColor:"black",shadowOpacity:withSpring(movingSV.value?.2:0),shadowRadius:10}}),[movingSV]);return{animatedStyle,panGestureHandler,isMoving,hasHandle}}

package/lib/hooks/useSortableList.d.ts

@@ -0,0 +1,27 @@
+import { DropProviderRef } from "../types/context";
+export interface UseSortableListOptions<TData> {
+    data: TData[];
+    itemHeight: number;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface UseSortableListReturn<TData> {
+    positions: any;
+    scrollY: any;
+    autoScroll: any;
+    scrollViewRef: any;
+    dropProviderRef: React.RefObject<DropProviderRef>;
+    handleScroll: any;
+    handleScrollEnd: () => void;
+    contentHeight: number;
+    getItemProps: (item: TData, index: number) => {
+        id: string;
+        positions: any;
+        lowerBound: any;
+        autoScrollDirection: any;
+        itemsCount: number;
+        itemHeight: number;
+    };
+}
+export declare function useSortableList<TData extends {
+    id: string;
+}>(options: UseSortableListOptions<TData>): UseSortableListReturn<TData>;

package/lib/hooks/useSortableList.js

@@ -0,0 +1 @@
+import{useRef,useCallback}from"react";import{scrollTo,useAnimatedReaction,useAnimatedRef,useAnimatedScrollHandler,useSharedValue}from"react-native-reanimated";import{listToObject}from"../components/sortableUtils";import{ScrollDirection}from"../types/sortable";export function useSortableList(options){const{data,itemHeight,itemKeyExtractor=item=>item.id}=options;if(__DEV__){data.forEach(((item,index)=>{const id=itemKeyExtractor(item,index);if(typeof id!=="string"||!id){console.error(`[react-native-reanimated-dnd] Item at index ${index} has invalid id: ${id}. `+`Each item must have a unique string id property.`)}}))}const positions=useSharedValue(listToObject(data));const scrollY=useSharedValue(0);const autoScroll=useSharedValue(ScrollDirection.None);const scrollViewRef=useAnimatedRef();const dropProviderRef=useRef(null);useAnimatedReaction((()=>scrollY.value),(scrolling=>{scrollTo(scrollViewRef,0,scrolling,false)}));const handleScroll=useAnimatedScrollHandler((event=>{scrollY.value=event.contentOffset.y}));const handleScrollEnd=useCallback((()=>{let localScrollTimeout=null;if(localScrollTimeout){clearTimeout(localScrollTimeout)}localScrollTimeout=setTimeout((()=>{var _a;(_a=dropProviderRef.current)===null||_a===void 0?void 0:_a.requestPositionUpdate()}),50)}),[]);const contentHeight=data.length*itemHeight;const getItemProps=useCallback(((item,index)=>{const id=itemKeyExtractor(item,index);return{id,positions,lowerBound:scrollY,autoScrollDirection:autoScroll,itemsCount:data.length,itemHeight}}),[data.length,itemHeight,itemKeyExtractor,positions,scrollY,autoScroll]);return{positions,scrollY,autoScroll,scrollViewRef,dropProviderRef,handleScroll,handleScrollEnd,contentHeight,getItemProps}}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export { Draggable } from "./components/Draggable";
+export { Droppable } from "./components/Droppable";
+export { Sortable } from "./components/Sortable";
+export { SortableItem } from "./components/SortableItem";
+export { DropProvider } from "./context/DropContext";
+export * from "./types";
+export { listToObject, setAutoScroll, setPosition, clamp, objectMove, ScrollDirection, } from "./components/sortableUtils";
+export { useDraggable } from "./hooks/useDraggable";
+export { useDroppable } from "./hooks/useDroppable";
+export { useSortable } from "./hooks/useSortable";
+export { useSortableList } from "./hooks/useSortableList";
+export { useHorizontalSortable } from "./hooks/useHorizontalSortable";
+export { useHorizontalSortableList } from "./hooks/useHorizontalSortableList";

package/lib/index.js

@@ -0,0 +1 @@
+export{Draggable}from"./components/Draggable";export{Droppable}from"./components/Droppable";export{Sortable}from"./components/Sortable";export{SortableItem}from"./components/SortableItem";export{DropProvider}from"./context/DropContext";export*from"./types";export{listToObject,setAutoScroll,setPosition,clamp,objectMove,ScrollDirection}from"./components/sortableUtils";export{useDraggable}from"./hooks/useDraggable";export{useDroppable}from"./hooks/useDroppable";export{useSortable}from"./hooks/useSortable";export{useSortableList}from"./hooks/useSortableList";export{useHorizontalSortable}from"./hooks/useHorizontalSortable";export{useHorizontalSortableList}from"./hooks/useHorizontalSortableList";

package/lib/types/context.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+export type DropAlignment = "center" | "top-left" | "top-center" | "top-right" | "center-left" | "center-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface DropOffset {
+    x: number;
+    y: number;
+}
+export interface DroppedItemsMap<TData = unknown> {
+    [draggableId: string]: {
+        droppableId: string;
+        data: TData;
+    };
+}
+export interface DropSlot<TData = unknown> {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    onDrop: (data: TData) => void;
+    dropAlignment?: DropAlignment;
+    dropOffset?: DropOffset;
+    capacity?: number;
+}
+export type PositionUpdateListener = () => void;
+export interface SlotsContextValue<TData = unknown> {
+    register: (id: number, slot: DropSlot<TData>) => void;
+    unregister: (id: number) => void;
+    getSlots: () => Record<number, DropSlot<TData>>;
+    isRegistered: (id: number) => boolean;
+    setActiveHoverSlot: (id: number | null) => void;
+    activeHoverSlotId: number | null;
+    registerPositionUpdateListener: (id: string, listener: PositionUpdateListener) => void;
+    unregisterPositionUpdateListener: (id: string) => void;
+    requestPositionUpdate: () => void;
+    registerDroppedItem: (draggableId: string, droppableId: string, itemData: any) => void;
+    unregisterDroppedItem: (draggableId: string) => void;
+    getDroppedItems: () => DroppedItemsMap<any>;
+    hasAvailableCapacity: (droppableId: string) => boolean;
+    onDragging?: (payload: {
+        x: number;
+        y: number;
+        tx: number;
+        ty: number;
+        itemData: any;
+    }) => void;
+    onDragStart?: (data: any) => void;
+    onDragEnd?: (data: any) => void;
+}
+export declare const SlotsContext: import("react").Context<SlotsContextValue<any>>;
+export interface DropProviderProps {
+    children: ReactNode;
+    onLayoutUpdateComplete?: () => void;
+    onDroppedItemsUpdate?: (droppedItems: DroppedItemsMap) => void;
+    onDragging?: (payload: {
+        x: number;
+        y: number;
+        tx: number;
+        ty: number;
+        itemData: any;
+    }) => void;
+    onDragStart?: (data: any) => void;
+    onDragEnd?: (data: any) => void;
+}
+export interface DropProviderRef {
+    requestPositionUpdate: () => void;
+    getDroppedItems: () => DroppedItemsMap;
+}

package/lib/types/context.js

@@ -0,0 +1 @@
+import{createContext}from"react";const defaultSlotsContextValue={register:(_id,_slot)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: register called without a Provider.")}},unregister:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregister called without a Provider.")}},getSlots:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: getSlots called without a Provider.")}return{}},isRegistered:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: isRegistered called without a Provider.")}return false},setActiveHoverSlot:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: setActiveHoverSlot called without a Provider.")}},activeHoverSlotId:null,registerPositionUpdateListener:(_id,_listener)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: registerPositionUpdateListener called without a Provider.")}},unregisterPositionUpdateListener:_id=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregisterPositionUpdateListener called without a Provider.")}},requestPositionUpdate:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: requestPositionUpdate called without a Provider (internally).")}},registerDroppedItem:(_draggableId,_droppableId,_itemData)=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: registerDroppedItem called without a Provider.")}},unregisterDroppedItem:_draggableId=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: unregisterDroppedItem called without a Provider.")}},getDroppedItems:()=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: getDroppedItems called without a Provider.")}return{}},hasAvailableCapacity:_droppableId=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: hasAvailableCapacity called without a Provider.")}return false},onDragging:payload=>{if(process.env.NODE_ENV!=="production"){console.warn("SlotsContext: onDragging called without a Provider.")}},onDragStart:undefined,onDragEnd:undefined};export const SlotsContext=createContext(defaultSlotsContextValue);

package/lib/types/draggable.d.ts

@@ -0,0 +1,54 @@
+import { ViewStyle, View, StyleProp } from "react-native";
+import Animated, { AnimatedStyle, useAnimatedRef } from "react-native-reanimated";
+import { GestureType } from "react-native-gesture-handler";
+import { LayoutChangeEvent } from "react-native";
+export declare enum DraggableState {
+    IDLE = "IDLE",
+    DRAGGING = "DRAGGING",
+    DROPPED = "DROPPED"
+}
+export type AnimationFunction = (toValue: number) => number;
+export type CollisionAlgorithm = "center" | "intersect" | "contain";
+export interface UseDraggableOptions<TData = unknown> {
+    data: TData;
+    draggableId?: string;
+    dragDisabled?: boolean;
+    preDragDelay?: number;
+    onDragStart?: (data: TData) => void;
+    onDragEnd?: (data: TData) => void;
+    onDragging?: (payload: {
+        x: number;
+        y: number;
+        tx: number;
+        ty: number;
+        itemData: TData;
+    }) => void;
+    onStateChange?: (state: DraggableState) => void;
+    animationFunction?: AnimationFunction;
+    dragBoundsRef?: React.RefObject<Animated.View | View>;
+    dragAxis?: "x" | "y" | "both";
+    collisionAlgorithm?: CollisionAlgorithm;
+}
+export interface UseDraggableReturn {
+    animatedViewProps: {
+        style: AnimatedStyle<ViewStyle>;
+        onLayout: (event: LayoutChangeEvent) => void;
+    };
+    gesture: GestureType;
+    state: DraggableState;
+    animatedViewRef: ReturnType<typeof useAnimatedRef<Animated.View>>;
+    hasHandle: boolean;
+}
+export interface DraggableContextValue {
+    gesture: any;
+    state: DraggableState;
+}
+export interface DraggableProps<TData = unknown> extends UseDraggableOptions<TData> {
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+    onStateChange?: (state: DraggableState) => void;
+}
+export interface DraggableHandleProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}

package/lib/types/draggable.js

@@ -0,0 +1 @@
+export var DraggableState;(function(DraggableState){DraggableState["IDLE"]="IDLE";DraggableState["DRAGGING"]="DRAGGING";DraggableState["DROPPED"]="DROPPED"})(DraggableState||(DraggableState={}));

package/lib/types/droppable.d.ts

@@ -0,0 +1,26 @@
+import { LayoutChangeEvent, StyleProp, ViewStyle } from "react-native";
+import Animated, { useAnimatedRef } from "react-native-reanimated";
+import { DropAlignment, DropOffset } from "./context";
+export interface UseDroppableOptions<TData = unknown> {
+    onDrop: (data: TData) => void;
+    dropDisabled?: boolean;
+    onActiveChange?: (isActive: boolean) => void;
+    dropAlignment?: DropAlignment;
+    dropOffset?: DropOffset;
+    activeStyle?: StyleProp<ViewStyle>;
+    droppableId?: string;
+    capacity?: number;
+}
+export interface UseDroppableReturn {
+    viewProps: {
+        onLayout: (event: LayoutChangeEvent) => void;
+        style?: StyleProp<ViewStyle>;
+    };
+    isActive: boolean;
+    activeStyle?: StyleProp<ViewStyle>;
+    animatedViewRef: ReturnType<typeof useAnimatedRef<Animated.View>>;
+}
+export interface DroppableProps<TData = unknown> extends UseDroppableOptions<TData> {
+    style?: StyleProp<ViewStyle>;
+    children: React.ReactNode;
+}

package/lib/types/droppable.js

@@ -0,0 +1 @@
+export{};

package/lib/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./draggable";
+export * from "./droppable";
+export * from "./sortable";
+export * from "./context";

package/lib/types/index.js

@@ -0,0 +1 @@
+export*from"./draggable";export*from"./droppable";export*from"./sortable";export*from"./context";

package/lib/types/sortable.d.ts

@@ -0,0 +1,233 @@
+import { StyleProp, ViewStyle } from "react-native";
+import { SharedValue } from "react-native-reanimated";
+import { DropProviderRef } from "../types/context";
+import { ReactNode } from "react";
+export interface SortableData {
+    id: string;
+}
+export declare enum ScrollDirection {
+    None = "none",
+    Up = "up",
+    Down = "down"
+}
+export declare enum HorizontalScrollDirection {
+    None = "none",
+    Left = "left",
+    Right = "right"
+}
+export declare enum SortableDirection {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+export interface UseSortableOptions<T> {
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    lowerBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<ScrollDirection>;
+    itemsCount: number;
+    itemHeight: number;
+    containerHeight?: number;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: {
+        [id: string]: number;
+    }) => void;
+    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+}
+export interface UseSortableReturn {
+    animatedStyle: StyleProp<ViewStyle>;
+    panGestureHandler: any;
+    isMoving: boolean;
+    hasHandle: boolean;
+}
+export interface UseSortableListOptions<TData extends SortableData> {
+    data: TData[];
+    itemHeight: number;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface UseSortableListReturn<TData extends SortableData> {
+    positions: any;
+    scrollY: any;
+    autoScroll: any;
+    scrollViewRef: any;
+    dropProviderRef: React.RefObject<DropProviderRef>;
+    handleScroll: any;
+    handleScrollEnd: () => void;
+    contentHeight: number;
+    getItemProps: (item: TData, index: number) => {
+        id: string;
+        positions: any;
+        lowerBound: any;
+        autoScrollDirection: any;
+        itemsCount: number;
+        itemHeight: number;
+    };
+}
+export interface SortableItemProps<T> {
+    id: string;
+    data: T;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    lowerBound?: SharedValue<number>;
+    leftBound?: SharedValue<number>;
+    autoScrollDirection?: SharedValue<ScrollDirection>;
+    autoScrollHorizontalDirection?: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    direction?: SortableDirection;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    containerHeight?: number;
+    containerWidth?: number;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    animatedStyle?: StyleProp<ViewStyle>;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: {
+        [id: string]: number;
+    }) => void;
+    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+    onDraggingHorizontal?: (id: string, overItemId: string | null, xPosition: number) => void;
+}
+export interface SortableProps<TData extends SortableData> {
+    data: TData[];
+    renderItem: (props: SortableRenderItemProps<TData>) => ReactNode;
+    direction?: SortableDirection;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+    useFlatList?: boolean;
+}
+export interface SortableRenderItemProps<TData extends SortableData> {
+    item: TData;
+    index: number;
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    direction?: SortableDirection;
+    lowerBound?: SharedValue<number>;
+    leftBound?: SharedValue<number>;
+    autoScrollDirection?: SharedValue<ScrollDirection>;
+    autoScrollHorizontalDirection?: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemHeight?: number;
+    itemWidth?: number;
+    gap?: number;
+    paddingHorizontal?: number;
+}
+export interface SortableContextValue {
+    panGestureHandler: any;
+}
+export interface SortableHandleProps {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+export interface UseHorizontalSortableOptions<T> {
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    containerWidth?: number;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: {
+        [id: string]: number;
+    }) => void;
+    onDragging?: (id: string, overItemId: string | null, xPosition: number) => void;
+}
+export interface UseHorizontalSortableReturn {
+    animatedStyle: StyleProp<ViewStyle>;
+    panGestureHandler: any;
+    isMoving: boolean;
+    hasHandle: boolean;
+}
+export interface UseHorizontalSortableListOptions<TData extends SortableData> {
+    data: TData[];
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface UseHorizontalSortableListReturn<TData extends SortableData> {
+    positions: any;
+    scrollX: any;
+    autoScroll: any;
+    scrollViewRef: any;
+    dropProviderRef: React.RefObject<DropProviderRef>;
+    handleScroll: any;
+    handleScrollEnd: () => void;
+    contentWidth: number;
+    getItemProps: (item: TData, index: number) => {
+        id: string;
+        positions: any;
+        leftBound: any;
+        autoScrollDirection: any;
+        itemsCount: number;
+        itemWidth: number;
+        gap: number;
+        paddingHorizontal: number;
+    };
+}
+export interface HorizontalSortableItemProps<T> {
+    id: string;
+    data: T;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    containerWidth?: number;
+    children: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    animatedStyle?: StyleProp<ViewStyle>;
+    onMove?: (id: string, from: number, to: number) => void;
+    onDragStart?: (id: string, position: number) => void;
+    onDrop?: (id: string, position: number, allPositions?: {
+        [id: string]: number;
+    }) => void;
+    onDragging?: (id: string, overItemId: string | null, xPosition: number) => void;
+}
+export interface HorizontalSortableProps<TData extends SortableData> {
+    data: TData[];
+    renderItem: (props: HorizontalSortableRenderItemProps<TData>) => ReactNode;
+    itemWidth: number;
+    gap?: number;
+    paddingHorizontal?: number;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    itemKeyExtractor?: (item: TData, index: number) => string;
+}
+export interface HorizontalSortableRenderItemProps<TData extends SortableData> {
+    item: TData;
+    index: number;
+    id: string;
+    positions: SharedValue<{
+        [id: string]: number;
+    }>;
+    leftBound: SharedValue<number>;
+    autoScrollDirection: SharedValue<HorizontalScrollDirection>;
+    itemsCount: number;
+    itemWidth: number;
+    gap: number;
+    paddingHorizontal: number;
+}

package/lib/types/sortable.js

@@ -0,0 +1 @@
+export var ScrollDirection;(function(ScrollDirection){ScrollDirection["None"]="none";ScrollDirection["Up"]="up";ScrollDirection["Down"]="down"})(ScrollDirection||(ScrollDirection={}));export var HorizontalScrollDirection;(function(HorizontalScrollDirection){HorizontalScrollDirection["None"]="none";HorizontalScrollDirection["Left"]="left";HorizontalScrollDirection["Right"]="right"})(HorizontalScrollDirection||(HorizontalScrollDirection={}));export var SortableDirection;(function(SortableDirection){SortableDirection["Vertical"]="vertical";SortableDirection["Horizontal"]="horizontal"})(SortableDirection||(SortableDirection={}));