@btfash/react-native-reanimated-dnd 1.1.1 → 1.1.3

package/lib/components/Sortable.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
-import { SortableProps } from "../types/sortable";
-export declare const Sortable: React.MemoExoticComponent<({ data, renderItem, ...props }: SortableProps<any>) => React.JSX.Element>;
+import { SortableProps, UniqueIdentifier } from "../types/sortable";
+declare function SortableComponent<TData extends {
+    id: TID;
+}, TID extends UniqueIdentifier = string>({ data, renderItem, direction, itemHeight, itemWidth, gap, paddingHorizontal, style, contentContainerStyle, itemKeyExtractor, useFlatList, }: SortableProps<TData, TID>): React.JSX.Element;
+export declare const Sortable: typeof SortableComponent;
+export {};

package/lib/components/SortableItem.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { SortableItemProps, SortableHandleProps } from "../types/sortable";
-export declare function SortableItem<T>({ id, data, positions, direction, lowerBound, leftBound, autoScrollDirection, autoScrollHorizontalDirection, itemsCount, itemHeight, itemWidth, gap, paddingHorizontal, containerHeight, containerWidth, children, style, animatedStyle: customAnimatedStyle, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }: SortableItemProps<T>): React.JSX.Element;
+import { SortableItemProps, SortableHandleProps, UniqueIdentifier } from "../types/sortable";
+export declare function SortableItem<T, TID extends UniqueIdentifier>({ id, data, positions, direction, lowerBound, leftBound, autoScrollDirection, autoScrollHorizontalDirection, itemsCount, itemHeight, itemWidth, gap, paddingHorizontal, containerHeight, containerWidth, children, style, animatedStyle: customAnimatedStyle, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }: SortableItemProps<T, TID>): React.JSX.Element;
 export declare namespace SortableItem {
     var Handle: ({ children, style }: SortableHandleProps) => React.JSX.Element;
 }

package/lib/components/sortableUtils.d.ts

@@ -1,4 +1,5 @@
 import { SharedValue } from "react-native-reanimated";
+import { UniqueIdentifier } from "../types";
 export declare enum ScrollDirection {
     None = "none",
     Up = "up",
@@ -10,24 +11,14 @@ export declare enum HorizontalScrollDirection {
     Right = "right"
 }
 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 objectMove<TID extends UniqueIdentifier>(object: Record<TID, number>, from: number, to: number): Record<TID, 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;
+    id: TID;
+}, TID extends UniqueIdentifier>(list: T[]): Record<TID, number>;
+export declare function setPosition<TID extends UniqueIdentifier>(positionY: number, itemsCount: number, positions: SharedValue<Record<TID, number>>, id: TID, itemHeight: number): void;
 export declare function setAutoScroll(positionY: number, lowerBound: number, upperBound: number, scrollThreshold: number, autoScroll: SharedValue<ScrollDirection>): void;
 export declare function getItemXPosition(position: number, itemWidth: number, gap?: number, paddingHorizontal?: number): number;
 export declare function getContentWidth(itemsCount: number, itemWidth: number, gap?: number, paddingHorizontal?: number): number;
-export declare function setHorizontalPosition(positionX: number, itemsCount: number, positions: SharedValue<{
-    [id: string]: number;
-}>, id: string, itemWidth: number, gap?: number, paddingHorizontal?: number): void;
+export declare function setHorizontalPosition<TID extends UniqueIdentifier>(positionX: number, itemsCount: number, positions: SharedValue<Record<TID, number>>, id: TID, itemWidth: number, gap?: number, paddingHorizontal?: number): void;
 export declare function setHorizontalAutoScroll(positionX: number, leftBound: number, rightBound: number, scrollThreshold: number, autoScrollDirection: SharedValue<HorizontalScrollDirection>): void;
 export declare const dataHash: (data: any[]) => string;

package/lib/hooks/useDroppable.d.ts

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

package/lib/hooks/useHorizontalSortable.d.ts

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

package/lib/hooks/useHorizontalSortableList.d.ts

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

package/lib/hooks/useSortable.d.ts

@@ -2,42 +2,41 @@ import { StyleProp, ViewStyle } from "react-native";
 import React from "react";
 import { SharedValue } from "react-native-reanimated";
 import { GestureType } from "react-native-gesture-handler";
+import { UniqueIdentifier } from "../types";
 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 objectMove<TID extends UniqueIdentifier>(object: {
+    [id in TID]: number;
+}, from: number, to: number): { [id in TID]: 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 setPosition<TID extends UniqueIdentifier>(positionY: number, itemsCount: number, positions: SharedValue<{
+    [id in TID]: number;
+}>, id: TID, 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;
+export interface UseSortableOptions<T, TID extends UniqueIdentifier> {
+    id: TID;
     positions: SharedValue<{
-        [id: string]: number;
+        [id in TID]: 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;
+    onMove?: (id: TID, from: number, to: number) => void;
+    onDragStart?: (id: TID, position: number) => void;
+    onDrop?: (id: TID, position: number, allPositions?: {
+        [id in TID]: number;
     }) => void;
-    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+    onDragging?: (id: TID, overItemId: TID | null, yPosition: number) => void;
     children?: React.ReactNode;
     handleComponent?: React.ComponentType<any>;
 }
@@ -47,4 +46,4 @@ export interface UseSortableReturn {
     isMoving: boolean;
     hasHandle: boolean;
 }
-export declare function useSortable<T>(options: UseSortableOptions<T>): UseSortableReturn;
+export declare function useSortable<T, TID extends UniqueIdentifier>(options: UseSortableOptions<T, TID>): UseSortableReturn;

package/lib/hooks/useSortableList.d.ts

@@ -1,10 +1,11 @@
+import { UniqueIdentifier } from "../types/sortable";
 import { DropProviderRef } from "../types/context";
-export interface UseSortableListOptions<TData> {
+export interface UseSortableListOptions<TData, TID extends UniqueIdentifier = string> {
     data: TData[];
     itemHeight: number;
-    itemKeyExtractor?: (item: TData, index: number) => string;
+    itemKeyExtractor?: (item: TData, index: number) => TID;
 }
-export interface UseSortableListReturn<TData> {
+export interface UseSortableListReturn<TData, TID extends UniqueIdentifier> {
     positions: any;
     scrollY: any;
     autoScroll: any;
@@ -14,7 +15,7 @@ export interface UseSortableListReturn<TData> {
     handleScrollEnd: () => void;
     contentHeight: number;
     getItemProps: (item: TData, index: number) => {
-        id: string;
+        id: TID;
         positions: any;
         lowerBound: any;
         autoScrollDirection: any;
@@ -23,5 +24,5 @@ export interface UseSortableListReturn<TData> {
     };
 }
 export declare function useSortableList<TData extends {
-    id: string;
-}>(options: UseSortableListOptions<TData>): UseSortableListReturn<TData>;
+    id: TID;
+}, TID extends UniqueIdentifier = string>(options: UseSortableListOptions<TData, TID>): UseSortableListReturn<TData, TID>;

package/lib/types/context.d.ts

@@ -1,17 +1,18 @@
 import { ReactNode } from "react";
+import { UniqueIdentifier } from "./sortable";
 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;
+export type DroppedItemsMap<TData = unknown, TID extends UniqueIdentifier = string> = {
+    [draggableId in TID]: {
+        droppableId: TID;
         data: TData;
     };
-}
-export interface DropSlot<TData = unknown> {
-    id: string;
+};
+export interface DropSlot<TData = unknown, TID extends UniqueIdentifier = string> {
+    id: TID;
     x: number;
     y: number;
     width: number;
@@ -22,20 +23,20 @@ export interface DropSlot<TData = unknown> {
     capacity?: number;
 }
 export type PositionUpdateListener = () => void;
-export interface SlotsContextValue<TData = unknown> {
-    register: (id: number, slot: DropSlot<TData>) => void;
+export interface SlotsContextValue<TData = unknown, TID extends UniqueIdentifier = string> {
+    register: (id: number, slot: DropSlot<TData, TID>) => void;
     unregister: (id: number) => void;
-    getSlots: () => Record<number, DropSlot<TData>>;
+    getSlots: () => Record<number, DropSlot<TData, TID>>;
     isRegistered: (id: number) => boolean;
     setActiveHoverSlot: (id: number | null) => void;
     activeHoverSlotId: number | null;
-    registerPositionUpdateListener: (id: string, listener: PositionUpdateListener) => void;
-    unregisterPositionUpdateListener: (id: string) => void;
+    registerPositionUpdateListener: (id: TID, listener: PositionUpdateListener) => void;
+    unregisterPositionUpdateListener: (id: TID) => void;
     requestPositionUpdate: () => void;
-    registerDroppedItem: (draggableId: string, droppableId: string, itemData: any) => void;
-    unregisterDroppedItem: (draggableId: string) => void;
+    registerDroppedItem: (draggableId: TID, droppableId: TID, itemData: any) => void;
+    unregisterDroppedItem: (draggableId: TID) => void;
     getDroppedItems: () => DroppedItemsMap<any>;
-    hasAvailableCapacity: (droppableId: string) => boolean;
+    hasAvailableCapacity: (droppableId: TID) => boolean;
     onDragging?: (payload: {
         x: number;
         y: number;
@@ -46,7 +47,7 @@ export interface SlotsContextValue<TData = unknown> {
     onDragStart?: (data: any) => void;
     onDragEnd?: (data: any) => void;
 }
-export declare const SlotsContext: import("react").Context<SlotsContextValue<any>>;
+export declare const SlotsContext: import("react").Context<SlotsContextValue<any, string>>;
 export interface DropProviderProps {
     children: ReactNode;
     onLayoutUpdateComplete?: () => void;

package/lib/types/draggable.d.ts

@@ -2,6 +2,7 @@ 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";
+import { UniqueIdentifier } from "./sortable";
 export declare enum DraggableState {
     IDLE = "IDLE",
     DRAGGING = "DRAGGING",
@@ -9,9 +10,9 @@ export declare enum DraggableState {
 }
 export type AnimationFunction = (toValue: number) => number;
 export type CollisionAlgorithm = "center" | "intersect" | "contain";
-export interface UseDraggableOptions<TData = unknown> {
+export interface UseDraggableOptions<TData = unknown, TID extends UniqueIdentifier = string> {
     data: TData;
-    draggableId?: string;
+    draggableId?: TID;
     dragDisabled?: boolean;
     preDragDelay?: number;
     onDragStart?: (data: TData) => void;
@@ -43,7 +44,7 @@ export interface DraggableContextValue {
     gesture: any;
     state: DraggableState;
 }
-export interface DraggableProps<TData = unknown> extends UseDraggableOptions<TData> {
+export interface DraggableProps<TData = unknown, TID extends UniqueIdentifier = string> extends UseDraggableOptions<TData, TID> {
     style?: StyleProp<ViewStyle>;
     children: React.ReactNode;
     onStateChange?: (state: DraggableState) => void;

package/lib/types/droppable.d.ts

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

package/lib/types/sortable.d.ts

@@ -2,8 +2,9 @@ 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 type UniqueIdentifier = string | number;
+export interface SortableData<TID extends UniqueIdentifier = string> {
+    id: TID;
 }
 export declare enum ScrollDirection {
     None = "none",
@@ -19,22 +20,20 @@ export declare enum SortableDirection {
     Vertical = "vertical",
     Horizontal = "horizontal"
 }
-export interface UseSortableOptions<T> {
-    id: string;
-    positions: SharedValue<{
-        [id: string]: number;
-    }>;
+export interface UseSortableOptions<T, TID extends UniqueIdentifier = string> {
+    id: TID;
+    positions: SharedValue<Record<TID, 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;
+    onMove?: (id: TID, from: number, to: number) => void;
+    onDragStart?: (id: TID, position: number) => void;
+    onDrop?: (id: TID, position: number, allPositions?: {
+        [id in TID]: number;
     }) => void;
-    onDragging?: (id: string, overItemId: string | null, yPosition: number) => void;
+    onDragging?: (id: TID, overItemId: TID | null, yPosition: number) => void;
 }
 export interface UseSortableReturn {
     animatedStyle: StyleProp<ViewStyle>;
@@ -42,12 +41,12 @@ export interface UseSortableReturn {
     isMoving: boolean;
     hasHandle: boolean;
 }
-export interface UseSortableListOptions<TData extends SortableData> {
+export interface UseSortableListOptions<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     data: TData[];
     itemHeight: number;
     itemKeyExtractor?: (item: TData, index: number) => string;
 }
-export interface UseSortableListReturn<TData extends SortableData> {
+export interface UseSortableListReturn<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     positions: any;
     scrollY: any;
     autoScroll: any;
@@ -65,12 +64,10 @@ export interface UseSortableListReturn<TData extends SortableData> {
         itemHeight: number;
     };
 }
-export interface SortableItemProps<T> {
-    id: string;
+export interface SortableItemProps<T, TID extends UniqueIdentifier> {
+    id: TID;
     data: T;
-    positions: SharedValue<{
-        [id: string]: number;
-    }>;
+    positions: SharedValue<Record<TID, number>>;
     lowerBound?: SharedValue<number>;
     leftBound?: SharedValue<number>;
     autoScrollDirection?: SharedValue<ScrollDirection>;
@@ -86,17 +83,15 @@ export interface SortableItemProps<T> {
     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;
+    onMove?: (id: TID, from: number, to: number) => void;
+    onDragStart?: (id: TID, position: number) => void;
+    onDrop?: (id: TID, position: number, allPositions?: Record<TID, number>) => void;
+    onDragging?: (id: TID, overItemId: TID | null, yPosition: number) => void;
+    onDraggingHorizontal?: (id: TID, overItemId: TID | null, xPosition: number) => void;
 }
-export interface SortableProps<TData extends SortableData> {
+export interface SortableProps<TData extends SortableData<TID>, TID extends UniqueIdentifier> {
     data: TData[];
-    renderItem: (props: SortableRenderItemProps<TData>) => ReactNode;
+    renderItem: (props: SortableRenderItemProps<TData, TID>) => ReactNode;
     direction?: SortableDirection;
     itemHeight?: number;
     itemWidth?: number;
@@ -104,16 +99,14 @@ export interface SortableProps<TData extends SortableData> {
     paddingHorizontal?: number;
     style?: StyleProp<ViewStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
-    itemKeyExtractor?: (item: TData, index: number) => string;
+    itemKeyExtractor?: (item: TData, index: number) => TID;
     useFlatList?: boolean;
 }
-export interface SortableRenderItemProps<TData extends SortableData> {
+export interface SortableRenderItemProps<TData extends SortableData<TID>, TID extends UniqueIdentifier> {
     item: TData;
     index: number;
-    id: string;
-    positions: SharedValue<{
-        [id: string]: number;
-    }>;
+    id: TID;
+    positions: SharedValue<Record<TID, number>>;
     direction?: SortableDirection;
     lowerBound?: SharedValue<number>;
     leftBound?: SharedValue<number>;
@@ -132,11 +125,9 @@ export interface SortableHandleProps {
     children: React.ReactNode;
     style?: StyleProp<ViewStyle>;
 }
-export interface UseHorizontalSortableOptions<T> {
-    id: string;
-    positions: SharedValue<{
-        [id: string]: number;
-    }>;
+export interface UseHorizontalSortableOptions<T, TID extends UniqueIdentifier = string> {
+    id: TID;
+    positions: SharedValue<Record<TID, number>>;
     leftBound: SharedValue<number>;
     autoScrollDirection: SharedValue<HorizontalScrollDirection>;
     itemsCount: number;
@@ -144,12 +135,10 @@ export interface UseHorizontalSortableOptions<T> {
     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;
+    onMove?: (id: TID, from: number, to: number) => void;
+    onDragStart?: (id: TID, position: number) => void;
+    onDrop?: (id: TID, position: number, allPositions?: Record<TID, number>) => void;
+    onDragging?: (id: TID, overItemId: TID | null, xPosition: number) => void;
 }
 export interface UseHorizontalSortableReturn {
     animatedStyle: StyleProp<ViewStyle>;
@@ -157,14 +146,14 @@ export interface UseHorizontalSortableReturn {
     isMoving: boolean;
     hasHandle: boolean;
 }
-export interface UseHorizontalSortableListOptions<TData extends SortableData> {
+export interface UseHorizontalSortableListOptions<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     data: TData[];
     itemWidth: number;
     gap?: number;
     paddingHorizontal?: number;
-    itemKeyExtractor?: (item: TData, index: number) => string;
+    itemKeyExtractor?: (item: TData, index: number) => TID;
 }
-export interface UseHorizontalSortableListReturn<TData extends SortableData> {
+export interface UseHorizontalSortableListReturn<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     positions: any;
     scrollX: any;
     autoScroll: any;
@@ -174,7 +163,7 @@ export interface UseHorizontalSortableListReturn<TData extends SortableData> {
     handleScrollEnd: () => void;
     contentWidth: number;
     getItemProps: (item: TData, index: number) => {
-        id: string;
+        id: TID;
         positions: any;
         leftBound: any;
         autoScrollDirection: any;
@@ -184,12 +173,10 @@ export interface UseHorizontalSortableListReturn<TData extends SortableData> {
         paddingHorizontal: number;
     };
 }
-export interface HorizontalSortableItemProps<T> {
-    id: string;
+export interface HorizontalSortableItemProps<T, TID extends UniqueIdentifier = string> {
+    id: TID;
     data: T;
-    positions: SharedValue<{
-        [id: string]: number;
-    }>;
+    positions: SharedValue<Record<TID, number>>;
     leftBound: SharedValue<number>;
     autoScrollDirection: SharedValue<HorizontalScrollDirection>;
     itemsCount: number;
@@ -200,24 +187,22 @@ export interface HorizontalSortableItemProps<T> {
     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;
+    onMove?: (id: TID, from: number, to: number) => void;
+    onDragStart?: (id: TID, position: number) => void;
+    onDrop?: (id: TID, position: number, allPositions?: Record<TID, number>) => void;
+    onDragging?: (id: TID, overItemId: TID | null, xPosition: number) => void;
 }
-export interface HorizontalSortableProps<TData extends SortableData> {
+export interface HorizontalSortableProps<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     data: TData[];
-    renderItem: (props: HorizontalSortableRenderItemProps<TData>) => ReactNode;
+    renderItem: (props: HorizontalSortableRenderItemProps<TData, TID>) => ReactNode;
     itemWidth: number;
     gap?: number;
     paddingHorizontal?: number;
     style?: StyleProp<ViewStyle>;
     contentContainerStyle?: StyleProp<ViewStyle>;
-    itemKeyExtractor?: (item: TData, index: number) => string;
+    itemKeyExtractor?: (item: TData, index: number) => TID;
 }
-export interface HorizontalSortableRenderItemProps<TData extends SortableData> {
+export interface HorizontalSortableRenderItemProps<TData extends SortableData<TID>, TID extends UniqueIdentifier = string> {
     item: TData;
     index: number;
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btfash/react-native-reanimated-dnd",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A powerful drag-and-drop library for React Native using Reanimated 3",
   "main": "lib/index.js",
   "module": "lib/index.js",