react-native-reorderable-list 0.16.2 → 0.17.0

package/lib/commonjs/components/ReorderableListCore.js

@@ -31,9 +31,9 @@ const ReorderableListCore = ({
   onDragEnd,
   onIndexChange,
   scrollViewContainerRef,
-  scrollViewPageY,
-  scrollViewHeightY,
-  scrollViewScrollOffsetY,
+  scrollViewPageXY,
+  scrollViewSize,
+  scrollViewScrollOffsetXY,
   scrollViewScrollEnabledProp,
   setScrollViewForceDisableScroll,
   scrollable,
@@ -58,35 +58,35 @@ const ReorderableListCore = ({
   const scrollEnabledProp = (0, _hooks.usePropAsSharedValue)(scrollEnabled);
   const currentScrollEnabled = (0, _reactNativeReanimated.useSharedValue)(scrollEnabled);
   const gestureState = (0, _reactNativeReanimated.useSharedValue)(_reactNativeGestureHandler.State.UNDETERMINED);
-  const currentY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const currentTranslationY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const currentItemDragCenterY = (0, _reactNativeReanimated.useSharedValue)(null);
-  const startItemDragCenterY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const flatListScrollOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const flatListHeightY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const flatListPageY = (0, _reactNativeReanimated.useSharedValue)(0);
-  // The scroll y translation of the list since drag start
-  const dragScrollTranslationY = (0, _reactNativeReanimated.useSharedValue)(0);
-  // The initial scroll offset y of the list on drag start
-  const dragInitialScrollOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
-  // The scroll y translation of the ScrollViewContainer since drag start
-  const scrollViewDragScrollTranslationY = (0, _reactNativeReanimated.useSharedValue)(0);
-  // The initial scroll offset y of the ScrollViewContainer on drag start
-  const scrollViewDragInitialScrollOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
-  const draggedHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const currentXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const currentTranslationXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const currentItemDragCenterXY = (0, _reactNativeReanimated.useSharedValue)(null);
+  const startItemDragCenterXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const flatListScrollOffsetXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const flatListSize = (0, _reactNativeReanimated.useSharedValue)(0);
+  const flatListPageXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  // The scroll x or y translation of the list since drag start
+  const dragScrollTranslationXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  // The initial scroll offset x or y of the list on drag start
+  const dragInitialScrollOffsetXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  // The scroll x or y translation of the ScrollViewContainer since drag start
+  const scrollViewDragScrollTranslationXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  // The initial scroll offset x or y of the ScrollViewContainer on drag start
+  const scrollViewDragInitialScrollOffsetXY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const draggedSize = (0, _reactNativeReanimated.useSharedValue)(0);
   const itemOffset = (0, _reactNativeReanimated.useSharedValue)([]);
-  const itemHeight = (0, _reactNativeReanimated.useSharedValue)([]);
-  // We need to track data length since itemOffset and itemHeight might contain more data than we need.
+  const itemSize = (0, _reactNativeReanimated.useSharedValue)([]);
+  // We need to track data length since itemOffset and itemSize might contain more data than we need.
   // e.g. items are removed from the list, in which case layout data for those items is set to 0.
   const itemCount = (0, _reactNativeReanimated.useSharedValue)(data.length);
   const autoscrollTrigger = (0, _reactNativeReanimated.useSharedValue)(-1);
   const lastAutoscrollTrigger = (0, _reactNativeReanimated.useSharedValue)(-1);
-  const dragY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const dragXY = (0, _reactNativeReanimated.useSharedValue)(0);
   const currentIndex = (0, _reactNativeReanimated.useSharedValue)(-1);
   const draggedIndex = (0, _reactNativeReanimated.useSharedValue)(-1);
   const state = (0, _reactNativeReanimated.useSharedValue)(_types.ReorderableListState.IDLE);
   const dragEndHandlers = (0, _reactNativeReanimated.useSharedValue)([]);
-  const startY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const startXY = (0, _reactNativeReanimated.useSharedValue)(0);
   const scaleDefault = (0, _reactNativeReanimated.useSharedValue)(1);
   const opacityDefault = (0, _reactNativeReanimated.useSharedValue)(1);
   const dragDirection = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -98,9 +98,10 @@ const ReorderableListCore = ({
   const animationDurationProp = (0, _hooks.usePropAsSharedValue)(animationDuration);
   const autoscrollActivationDeltaProp = (0, _hooks.usePropAsSharedValue)(autoscrollActivationDelta);
   const dragEnabledProp = (0, _hooks.usePropAsSharedValue)(dragEnabled ?? true);
+  const horizontalProp = (0, _hooks.usePropAsSharedValue)(!!rest.horizontal);
 
   // Position of the list relative to the scroll container
-  const nestedFlatListPositionY = (0, _reactNativeReanimated.useDerivedValue)(() => flatListPageY.value - ((scrollViewPageY === null || scrollViewPageY === void 0 ? void 0 : scrollViewPageY.value) || 0));
+  const nestedFlatListPositionXY = (0, _reactNativeReanimated.useDerivedValue)(() => flatListPageXY.value - ((scrollViewPageXY === null || scrollViewPageXY === void 0 ? void 0 : scrollViewPageXY.value) || 0));
   (0, _react.useEffect)(() => {
     itemCount.value = data.length;
 
@@ -110,13 +111,13 @@ const ReorderableListCore = ({
     if (data.length < prevItemCount.current) {
       for (let i = data.length; i < prevItemCount.current; i++) {
         (0, _reactNativeReanimated.runOnUI)(() => {
-          itemHeight.value[i] = 0;
+          itemSize.value[i] = 0;
           itemOffset.value[i] = 0;
         })();
       }
     }
     prevItemCount.current = data.length;
-  }, [data.length, itemHeight, itemOffset, itemCount]);
+  }, [data.length, itemSize, itemOffset, itemCount]);
   (0, _react.useEffect)(() => {
     if (!markedCellsRef.current ||
     // Clean keys once they surpass by 10% the size of the list itself.
@@ -149,12 +150,13 @@ const ReorderableListCore = ({
     return `${cellKey}#${mark}`;
   }, []);
   const listContextValue = (0, _react.useMemo)(() => ({
-    draggedHeight,
+    draggedSize,
     currentIndex,
     draggedIndex,
     dragEndHandlers,
     activeIndex,
     itemLayoutAnimation: itemLayoutAnimationPropRef,
+    horizontal: horizontalProp,
     cellAnimations: {
       ...cellAnimations,
       transform: cellAnimations && 'transform' in cellAnimations ? cellAnimations.transform : [{
@@ -162,7 +164,7 @@ const ReorderableListCore = ({
       }],
       opacity: cellAnimations && 'opacity' in cellAnimations ? cellAnimations.opacity : opacityDefault
     }
-  }), [draggedHeight, currentIndex, draggedIndex, dragEndHandlers, activeIndex, cellAnimations, itemLayoutAnimationPropRef, scaleDefault, opacityDefault]);
+  }), [draggedSize, currentIndex, draggedIndex, dragEndHandlers, activeIndex, cellAnimations, itemLayoutAnimationPropRef, scaleDefault, opacityDefault, horizontalProp]);
 
   /**
    * Decides the intended drag direction of the user.
@@ -174,41 +176,46 @@ const ReorderableListCore = ({
   const setDragDirection = (0, _react.useCallback)(e => {
     'worklet';
 
-    const direction = e.velocityY > 0 ? 1 : -1;
+    const absoluteXY = horizontalProp.value ? e.absoluteX : e.absoluteY;
+    const velocityXY = horizontalProp.value ? e.velocityX : e.velocityY;
+    const direction = velocityXY > 0 ? 1 : -1;
     if (direction !== dragDirection.value) {
       if (lastDragDirectionPivot.value === null) {
-        lastDragDirectionPivot.value = e.absoluteY;
-      } else if (Math.abs(e.absoluteY - lastDragDirectionPivot.value) >= autoscrollActivationDeltaProp.value) {
+        lastDragDirectionPivot.value = absoluteXY;
+      } else if (Math.abs(absoluteXY - lastDragDirectionPivot.value) >= autoscrollActivationDeltaProp.value) {
         dragDirection.value = direction;
-        lastDragDirectionPivot.value = e.absoluteY;
+        lastDragDirectionPivot.value = absoluteXY;
       }
     }
-  }, [dragDirection, lastDragDirectionPivot, autoscrollActivationDeltaProp]);
-  const setCurrentItemDragCenterY = (0, _react.useCallback)(e => {
+  }, [dragDirection, lastDragDirectionPivot, autoscrollActivationDeltaProp, horizontalProp]);
+  const setCurrentItemDragCenterXY = (0, _react.useCallback)(e => {
     'worklet';
 
-    if (currentItemDragCenterY.value === null) {
+    const translationXY = horizontalProp.value ? e.translationX : e.translationY;
+    if (currentItemDragCenterXY.value === null) {
       if (currentIndex.value >= 0) {
-        const itemCenter = itemHeight.value[currentIndex.value] * 0.5;
-        // the y coordinate of the item relative to the list
-        const itemY = itemOffset.value[currentIndex.value] - (flatListScrollOffsetY.value + scrollViewDragScrollTranslationY.value);
-        const value = itemY + itemCenter + e.translationY;
-        startItemDragCenterY.value = value;
-        currentItemDragCenterY.value = value;
+        const itemCenter = itemSize.value[currentIndex.value] * 0.5;
+        // the x or y coordinate of the item relative to the list
+        const itemXY = itemOffset.value[currentIndex.value] - (flatListScrollOffsetXY.value + scrollViewDragScrollTranslationXY.value);
+        const value = itemXY + itemCenter + translationXY;
+        startItemDragCenterXY.value = value;
+        currentItemDragCenterXY.value = value;
       }
     } else {
-      currentItemDragCenterY.value = startItemDragCenterY.value + e.translationY;
+      currentItemDragCenterXY.value = startItemDragCenterXY.value + translationXY;
     }
-  }, [currentItemDragCenterY, currentIndex, startItemDragCenterY, itemOffset, itemHeight, flatListScrollOffsetY, scrollViewDragScrollTranslationY]);
+  }, [horizontalProp, currentItemDragCenterXY, currentIndex, startItemDragCenterXY, itemOffset, itemSize, flatListScrollOffsetXY, scrollViewDragScrollTranslationXY]);
   const panGestureHandler = (0, _react.useMemo)(() => (panGesture || _reactNativeGestureHandler.Gesture.Pan()).onBegin(e => {
     'worklet';
 
     // prevent new dragging until item is completely released
     if (state.value === _types.ReorderableListState.IDLE) {
-      startY.value = e.y;
-      currentY.value = e.y;
-      currentTranslationY.value = e.translationY;
-      dragY.value = e.translationY;
+      const xy = horizontalProp.value ? e.x : e.y;
+      const translationXY = horizontalProp.value ? e.translationX : e.translationY;
+      startXY.value = xy;
+      currentXY.value = xy;
+      currentTranslationXY.value = translationXY;
+      dragXY.value = translationXY;
       gestureState.value = e.state;
     }
   }).onUpdate(e => {
@@ -218,10 +225,11 @@ const ReorderableListCore = ({
       setDragDirection(e);
     }
     if (state.value !== _types.ReorderableListState.RELEASED) {
-      setCurrentItemDragCenterY(e);
-      currentY.value = startY.value + e.translationY;
-      currentTranslationY.value = e.translationY;
-      dragY.value = e.translationY + dragScrollTranslationY.value + scrollViewDragScrollTranslationY.value;
+      setCurrentItemDragCenterXY(e);
+      const translationXY = horizontalProp.value ? e.translationX : e.translationY;
+      currentXY.value = startXY.value + translationXY;
+      currentTranslationXY.value = translationXY;
+      dragXY.value = translationXY + dragScrollTranslationXY.value + scrollViewDragScrollTranslationXY.value;
       gestureState.value = e.state;
     }
   }).onEnd(e => {
@@ -232,7 +240,7 @@ const ReorderableListCore = ({
     'worklet';
 
     gestureState.value = e.state;
-  }), [panGesture, state, startY, currentY, currentTranslationY, dragY, gestureState, dragScrollTranslationY, scrollViewDragScrollTranslationY, setDragDirection, setCurrentItemDragCenterY]);
+  }), [panGesture, state, startXY, currentXY, currentTranslationXY, dragXY, gestureState, dragScrollTranslationXY, scrollViewDragScrollTranslationXY, setDragDirection, setCurrentItemDragCenterXY, horizontalProp]);
   const panGestureHandlerWithPropOptions = (0, _react.useMemo)(() => {
     if (typeof panActivateAfterLongPress === 'number') {
       panGestureHandler.activateAfterLongPress(panActivateAfterLongPress);
@@ -276,13 +284,13 @@ const ReorderableListCore = ({
 
     state.value = _types.ReorderableListState.IDLE;
     draggedIndex.value = -1;
-    dragY.value = 0;
-    dragScrollTranslationY.value = 0;
-    scrollViewDragScrollTranslationY.value = 0;
+    dragXY.value = 0;
+    dragScrollTranslationXY.value = 0;
+    scrollViewDragScrollTranslationXY.value = 0;
     dragDirection.value = 0;
     lastDragDirectionPivot.value = null;
-    currentItemDragCenterY.value = null;
-  }, [state, draggedIndex, dragY, dragScrollTranslationY, scrollViewDragScrollTranslationY, dragDirection, lastDragDirectionPivot, currentItemDragCenterY]);
+    currentItemDragCenterXY.value = null;
+  }, [state, draggedIndex, dragXY, dragScrollTranslationXY, scrollViewDragScrollTranslationXY, dragDirection, lastDragDirectionPivot, currentItemDragCenterXY]);
   const resetSharedValuesAfterAnimations = (0, _react.useCallback)(() => {
     setTimeout((0, _reactNativeReanimated.runOnUI)(resetSharedValues), animationDurationProp.value);
   }, [resetSharedValues, animationDurationProp]);
@@ -319,14 +327,14 @@ const ReorderableListCore = ({
     const index1 = itemDirection ? from : to;
     const index2 = itemDirection ? to : from;
     const newOffset1 = itemOffset.value[index1];
-    const newHeight1 = itemHeight.value[index2];
-    const newOffset2 = itemOffset.value[index2] + itemHeight.value[index2] - itemHeight.value[index1];
-    const newHeight2 = itemHeight.value[index1];
+    const newSize1 = itemSize.value[index2];
+    const newOffset2 = itemOffset.value[index2] + itemSize.value[index2] - itemSize.value[index1];
+    const newSize2 = itemSize.value[index1];
     itemOffset.value[index1] = newOffset1;
-    itemHeight.value[index1] = newHeight1;
+    itemSize.value[index1] = newSize1;
     itemOffset.value[index2] = newOffset2;
-    itemHeight.value[index2] = newHeight2;
-  }, [itemOffset, itemHeight]);
+    itemSize.value[index2] = newSize2;
+  }, [itemOffset, itemSize]);
 
   /**
    * Computes a potential new drop container for the current dragged item and evaluates
@@ -338,29 +346,29 @@ const ReorderableListCore = ({
   const computeCurrentIndex = (0, _react.useCallback)(() => {
     'worklet';
 
-    if (currentItemDragCenterY.value === null) {
+    if (currentItemDragCenterXY.value === null) {
       return currentIndex.value;
     }
 
-    // apply scroll offset and scroll container translation
-    const relativeDragCenterY = flatListScrollOffsetY.value + scrollViewDragScrollTranslationY.value + currentItemDragCenterY.value;
+    // Apply scroll offset and scroll container translation.
+    const relativeDragCenterXY = flatListScrollOffsetXY.value + scrollViewDragScrollTranslationXY.value + currentItemDragCenterXY.value;
     const currentOffset = itemOffset.value[currentIndex.value];
-    const currentHeight = itemHeight.value[currentIndex.value];
-    const currentCenter = currentOffset + currentHeight * 0.5;
+    const currentSize = itemSize.value[currentIndex.value];
+    const currentCenter = currentOffset + currentSize * 0.5;
     const max = itemCount.value;
-    const possibleIndex = relativeDragCenterY < currentCenter ? Math.max(0, currentIndex.value - 1) : Math.min(max - 1, currentIndex.value + 1);
+    const possibleIndex = relativeDragCenterXY < currentCenter ? Math.max(0, currentIndex.value - 1) : Math.min(max - 1, currentIndex.value + 1);
     if (currentIndex.value !== possibleIndex) {
       let possibleOffset = itemOffset.value[possibleIndex];
       if (possibleIndex > currentIndex.value) {
-        possibleOffset += itemHeight.value[possibleIndex] - currentHeight;
+        possibleOffset += itemSize.value[possibleIndex] - currentSize;
       }
-      const possibleCenter = possibleOffset + currentHeight * 0.5;
-      const distanceFromCurrent = Math.abs(relativeDragCenterY - currentCenter);
-      const distanceFromPossible = Math.abs(relativeDragCenterY - possibleCenter);
+      const possibleCenter = possibleOffset + currentSize * 0.5;
+      const distanceFromCurrent = Math.abs(relativeDragCenterXY - currentCenter);
+      const distanceFromPossible = Math.abs(relativeDragCenterXY - possibleCenter);
       return distanceFromCurrent <= distanceFromPossible ? currentIndex.value : possibleIndex;
     }
     return currentIndex.value;
-  }, [currentIndex, currentItemDragCenterY, itemCount, itemOffset, itemHeight, flatListScrollOffsetY, scrollViewDragScrollTranslationY]);
+  }, [currentIndex, currentItemDragCenterXY, itemCount, itemOffset, itemSize, flatListScrollOffsetXY, scrollViewDragScrollTranslationXY]);
   const setCurrentIndex = (0, _react.useCallback)(() => {
     'worklet';
 
@@ -382,7 +390,7 @@ const ReorderableListCore = ({
       scaleDefault.value = (0, _reactNativeReanimated.withTiming)(scaleConfig.toValue, scaleConfig);
     }
 
-    // if no custom opacity run the default
+    // If no custom opacity run the default.
     if (!(cellAnimations && 'opacity' in cellAnimations)) {
       const opacityConfig = _constants.OPACITY_ANIMATION_CONFIG_DEFAULT[type];
       opacityDefault.value = (0, _reactNativeReanimated.withTiming)(opacityConfig.toValue, opacityConfig);
@@ -398,7 +406,7 @@ const ReorderableListCore = ({
         (0, _reactNativeReanimated.runOnJS)(setActiveIndex)(-1);
       }
 
-      // trigger onDragEnd event
+      // Trigger onDragEnd event.
       let e = {
         from: draggedIndex.value,
         to: currentIndex.value
@@ -411,23 +419,23 @@ const ReorderableListCore = ({
 
       // they are actually swapped on drag translation
       const currentItemOffset = itemOffset.value[draggedIndex.value];
-      const currentItemHeight = itemHeight.value[draggedIndex.value];
+      const currentItemSize = itemSize.value[draggedIndex.value];
       const draggedItemOffset = itemOffset.value[currentIndex.value];
-      const draggedItemHeight = itemHeight.value[currentIndex.value];
-      const newTopPosition = currentIndex.value > draggedIndex.value ? draggedItemOffset - currentItemOffset : draggedItemOffset - currentItemOffset + (draggedItemHeight - currentItemHeight);
+      const draggedItemSize = itemSize.value[currentIndex.value];
+      const newPositionXY = currentIndex.value > draggedIndex.value ? draggedItemOffset - currentItemOffset : draggedItemOffset - currentItemOffset + (draggedItemSize - currentItemSize);
       runDefaultDragAnimations('end');
-      if (dragY.value !== newTopPosition) {
-        // animate dragged item to its new position on release
-        dragY.value = (0, _reactNativeReanimated.withTiming)(newTopPosition, {
+      if (dragXY.value !== newPositionXY) {
+        // Animate dragged item to its new position on release.
+        dragXY.value = (0, _reactNativeReanimated.withTiming)(newPositionXY, {
           duration: animationDurationProp.value,
           easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
         }, () => {
           (0, _reactNativeReanimated.runOnJS)(reorder)(draggedIndex.value, currentIndex.value);
         });
       } else {
-        // user might drag and release the item without moving it so,
+        // User might drag and release the item without moving it so,
         // since the animation end callback is not executed in that case
-        // we need to reset values as the reorder function would do
+        // we need to reset values as the reorder function would do.
         (0, _reactNativeReanimated.runOnJS)(resetSharedValuesAfterAnimations)();
       }
     }
@@ -435,58 +443,58 @@ const ReorderableListCore = ({
   const computeHiddenArea = (0, _react.useCallback)(() => {
     'worklet';
 
-    if (!scrollViewScrollOffsetY || !scrollViewHeightY) {
+    if (!scrollViewScrollOffsetXY || !scrollViewSize) {
       return {
-        top: 0,
-        bottom: 0
+        start: 0,
+        end: 0
       };
     }
 
     // hidden area cannot be negative
-    const top = Math.max(0, scrollViewScrollOffsetY.value - nestedFlatListPositionY.value);
-    const bottom = Math.max(0, nestedFlatListPositionY.value + flatListHeightY.value - (scrollViewScrollOffsetY.value + scrollViewHeightY.value));
+    const start = Math.max(0, scrollViewScrollOffsetXY.value - nestedFlatListPositionXY.value);
+    const end = Math.max(0, nestedFlatListPositionXY.value + flatListSize.value - (scrollViewScrollOffsetXY.value + scrollViewSize.value));
     return {
-      top,
-      bottom
+      start,
+      end
     };
-  }, [scrollViewScrollOffsetY, scrollViewHeightY, nestedFlatListPositionY, flatListHeightY]);
+  }, [scrollViewScrollOffsetXY, scrollViewSize, nestedFlatListPositionXY, flatListSize]);
   const computeThresholdArea = (0, _react.useCallback)(() => {
     'worklet';
 
     const hiddenArea = computeHiddenArea();
-    const offsetTop = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
-    const offsetBottom = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
+    const offsetStart = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.start) || (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
+    const offsetEnd = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.end) || (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
     const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-    const visibleHeight = flatListHeightY.value - (hiddenArea.top + hiddenArea.bottom) - (offsetTop + offsetBottom);
-    const area = visibleHeight * threshold;
-    const top = area + offsetTop;
-    const bottom = flatListHeightY.value - area - offsetBottom;
+    const visibleSize = flatListSize.value - (hiddenArea.start + hiddenArea.end) - (offsetStart + offsetEnd);
+    const area = visibleSize * threshold;
+    const start = area + offsetStart;
+    const end = flatListSize.value - area - offsetEnd;
     return {
-      top,
-      bottom
+      start,
+      end
     };
-  }, [computeHiddenArea, autoscrollThreshold, autoscrollThresholdOffset, flatListHeightY]);
+  }, [computeHiddenArea, autoscrollThreshold, autoscrollThresholdOffset, flatListSize]);
   const computeContainerThresholdArea = (0, _react.useCallback)(() => {
     'worklet';
 
-    if (!scrollViewHeightY) {
+    if (!scrollViewSize) {
       return {
-        top: -Infinity,
-        bottom: Infinity
+        start: -Infinity,
+        end: Infinity
       };
     }
-    const offsetTop = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
-    const offsetBottom = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
+    const offsetStart = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.start) || (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.top) || 0);
+    const offsetEnd = Math.max(0, (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.end) || (autoscrollThresholdOffset === null || autoscrollThresholdOffset === void 0 ? void 0 : autoscrollThresholdOffset.bottom) || 0);
     const threshold = Math.max(0, Math.min(autoscrollThreshold, 0.4));
-    const visibleHeight = scrollViewHeightY.value - (offsetTop + offsetBottom);
-    const area = visibleHeight * threshold;
-    const top = area + offsetTop;
-    const bottom = visibleHeight - area - offsetBottom;
+    const visibleSize = scrollViewSize.value - (offsetStart + offsetEnd);
+    const area = visibleSize * threshold;
+    const start = area + offsetStart;
+    const end = visibleSize - area - offsetEnd;
     return {
-      top,
-      bottom
+      start,
+      end
     };
-  }, [autoscrollThreshold, autoscrollThresholdOffset, scrollViewHeightY]);
+  }, [autoscrollThreshold, autoscrollThresholdOffset, scrollViewSize]);
   const shouldScrollContainer = (0, _react.useCallback)(y => {
     'worklet';
 
@@ -495,52 +503,53 @@ const ReorderableListCore = ({
 
     // We should scroll the container if there's a hidden part of the nested list.
     // We might have floating errors like 0.0001 which we should ignore.
-    return nestedListHiddenArea.top > 0.01 && y <= containerThresholdArea.top || nestedListHiddenArea.bottom > 0.01 && y >= containerThresholdArea.bottom;
+    return nestedListHiddenArea.start > 0.01 && y <= containerThresholdArea.start || nestedListHiddenArea.end > 0.01 && y >= containerThresholdArea.end;
   }, [computeHiddenArea, computeContainerThresholdArea]);
-  const getRelativeContainerY = (0, _react.useCallback)(() => {
+  const getRelativeContainerXY = (0, _react.useCallback)(() => {
     'worklet';
 
-    return currentY.value + nestedFlatListPositionY.value - scrollViewDragInitialScrollOffsetY.value;
-  }, [currentY, nestedFlatListPositionY, scrollViewDragInitialScrollOffsetY]);
-  const getRelativeListY = (0, _react.useCallback)(() => {
+    return currentXY.value + nestedFlatListPositionXY.value - scrollViewDragInitialScrollOffsetXY.value;
+  }, [currentXY, nestedFlatListPositionXY, scrollViewDragInitialScrollOffsetXY]);
+  const getRelativeListXY = (0, _react.useCallback)(() => {
     'worklet';
 
-    return currentY.value + scrollViewDragScrollTranslationY.value;
-  }, [currentY, scrollViewDragScrollTranslationY]);
+    return currentXY.value + scrollViewDragScrollTranslationXY.value;
+  }, [currentXY, scrollViewDragScrollTranslationXY]);
   const scrollDirection = (0, _react.useCallback)(() => {
     'worklet';
 
-    const relativeContainerY = getRelativeContainerY();
-    if (shouldScrollContainer(relativeContainerY)) {
+    const relativeContainerXY = getRelativeContainerXY();
+    if (shouldScrollContainer(relativeContainerXY)) {
       const containerThresholdArea = computeContainerThresholdArea();
-      if (relativeContainerY <= containerThresholdArea.top) {
+      if (relativeContainerXY <= containerThresholdArea.start) {
         return -1;
       }
-      if (relativeContainerY >= containerThresholdArea.bottom) {
+      if (relativeContainerXY >= containerThresholdArea.end) {
         return 1;
       }
     } else if (scrollable) {
-      const relativeListY = getRelativeListY();
+      const relativeListXY = getRelativeListXY();
       const thresholdArea = computeThresholdArea();
-      if (relativeListY <= thresholdArea.top) {
+      if (relativeListXY <= thresholdArea.start) {
         return -1;
       }
-      if (relativeListY >= thresholdArea.bottom) {
+      if (relativeListXY >= thresholdArea.end) {
         return 1;
       }
     }
     return 0;
-  }, [shouldScrollContainer, computeThresholdArea, computeContainerThresholdArea, getRelativeContainerY, getRelativeListY, scrollable]);
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => currentY.value, () => {
+  }, [shouldScrollContainer, computeThresholdArea, computeContainerThresholdArea, getRelativeContainerXY, getRelativeListXY, scrollable]);
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => currentXY.value, () => {
     if (state.value === _types.ReorderableListState.DRAGGED || state.value === _types.ReorderableListState.AUTOSCROLL) {
       setCurrentIndex();
 
       // Trigger autoscroll when:
-      // 1. Within the threshold area (top or bottom of list)
+      // 1. Within the threshold area (start or end of list)
       // 2. Have dragged in the same direction as the scroll
       // 3. Not already in autoscroll mode
       if (dragDirection.value === scrollDirection()) {
-        // When the first two conditions are met and it's already in autoscroll mode, we let it continue (no-op)
+        // When the first two conditions are met and it's already in autoscroll mode,
+        // we let it continue (no-op).
         if (state.value !== _types.ReorderableListState.AUTOSCROLL) {
           state.value = _types.ReorderableListState.AUTOSCROLL;
           lastAutoscrollTrigger.value = autoscrollTrigger.value;
@@ -555,17 +564,18 @@ const ReorderableListCore = ({
     if (autoscrollTrigger.value !== lastAutoscrollTrigger.value && state.value === _types.ReorderableListState.AUTOSCROLL) {
       const autoscrollIncrement = dragDirection.value * _constants.AUTOSCROLL_CONFIG.increment * autoscrollSpeedScale;
       if (autoscrollIncrement !== 0) {
-        let scrollOffset = flatListScrollOffsetY.value;
+        let scrollOffset = flatListScrollOffsetXY.value;
         let listRef = flatListRef;
 
         // Checking on every autoscroll whether to scroll the container,
         // this allows to smoothly pass the scroll from the container to the nested list
         // without any gesture input.
-        if (scrollViewScrollOffsetY && shouldScrollContainer(getRelativeContainerY())) {
-          scrollOffset = scrollViewScrollOffsetY.value;
+        if (scrollViewScrollOffsetXY && shouldScrollContainer(getRelativeContainerXY())) {
+          scrollOffset = scrollViewScrollOffsetXY.value;
           listRef = scrollViewContainerRef;
         }
-        (0, _reactNativeReanimated.scrollTo)(listRef, 0, scrollOffset + autoscrollIncrement, true);
+        const scrollToValue = scrollOffset + autoscrollIncrement;
+        (0, _reactNativeReanimated.scrollTo)(listRef, horizontalProp.value ? scrollToValue : 0, horizontalProp.value ? 0 : scrollToValue, true);
       }
 
       // when autoscrolling user may not be moving his finger so we need
@@ -576,16 +586,16 @@ const ReorderableListCore = ({
 
   // flatlist scroll handler
   const handleScroll = (0, _reactNativeReanimated.useAnimatedScrollHandler)(e => {
-    flatListScrollOffsetY.value = e.contentOffset.y;
+    flatListScrollOffsetXY.value = horizontalProp.value ? e.contentOffset.x : e.contentOffset.y;
 
     // Checking if the list is not scrollable instead of the scrolling state.
     // Fixes a bug on iOS where the item is shifted after autoscrolling and then
     // moving away from the area.
     if (!currentScrollEnabled.value) {
-      dragScrollTranslationY.value = flatListScrollOffsetY.value - dragInitialScrollOffsetY.value;
+      dragScrollTranslationXY.value = flatListScrollOffsetXY.value - dragInitialScrollOffsetXY.value;
     }
     if (state.value === _types.ReorderableListState.AUTOSCROLL) {
-      dragY.value = currentTranslationY.value + dragScrollTranslationY.value + scrollViewDragScrollTranslationY.value;
+      dragXY.value = currentTranslationXY.value + dragScrollTranslationXY.value + scrollViewDragScrollTranslationXY.value;
       lastAutoscrollTrigger.value = autoscrollTrigger.value;
       autoscrollTrigger.value = (0, _reactNativeReanimated.withDelay)(autoscrollDelay, (0, _reactNativeReanimated.withTiming)(autoscrollTrigger.value * -1, {
         duration: 0
@@ -594,16 +604,16 @@ const ReorderableListCore = ({
   });
 
   // container scroll handler
-  (0, _reactNativeReanimated.useAnimatedReaction)(() => scrollViewScrollOffsetY === null || scrollViewScrollOffsetY === void 0 ? void 0 : scrollViewScrollOffsetY.value, value => {
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => scrollViewScrollOffsetXY === null || scrollViewScrollOffsetXY === void 0 ? void 0 : scrollViewScrollOffsetXY.value, value => {
     if (value) {
       // Checking if the list is not scrollable instead of the scrolling state.
-      // Fixes a bug on iOS where the item is shifted after autoscrolling and then
+      // Fixes a bug on iOS where the item is shifted, after autoscrolling and then
       // moving away from the area.
       if (!currentScrollEnabled.value) {
-        scrollViewDragScrollTranslationY.value = value - scrollViewDragInitialScrollOffsetY.value;
+        scrollViewDragScrollTranslationXY.value = value - scrollViewDragInitialScrollOffsetXY.value;
       }
       if (state.value === _types.ReorderableListState.AUTOSCROLL) {
-        dragY.value = currentTranslationY.value + scrollViewDragScrollTranslationY.value;
+        dragXY.value = currentTranslationXY.value + scrollViewDragScrollTranslationXY.value;
         lastAutoscrollTrigger.value = autoscrollTrigger.value;
         autoscrollTrigger.value = (0, _reactNativeReanimated.withDelay)(autoscrollDelay, (0, _reactNativeReanimated.withTiming)(autoscrollTrigger.value * -1, {
           duration: 0
@@ -618,17 +628,17 @@ const ReorderableListCore = ({
       return;
     }
 
-    // allow new drag when item is completely released
+    // Allow new drag when item is completely released.
     if (state.value === _types.ReorderableListState.IDLE) {
-      // resetting shared values again fixes a flickeing bug in nested lists where
-      // after scrolling the parent list it would offset the new dragged item in another nested list
+      // Resetting shared values again fixes a flickeing bug in nested lists where
+      // after scrolling the parent list it would offset the new dragged item in another nested list.
       resetSharedValues();
       if (shouldUpdateActiveItem) {
         (0, _reactNativeReanimated.runOnJS)(setActiveIndex)(index);
       }
-      dragInitialScrollOffsetY.value = flatListScrollOffsetY.value;
-      scrollViewDragInitialScrollOffsetY.value = (scrollViewScrollOffsetY === null || scrollViewScrollOffsetY === void 0 ? void 0 : scrollViewScrollOffsetY.value) || 0;
-      draggedHeight.value = itemHeight.value[index];
+      dragInitialScrollOffsetXY.value = flatListScrollOffsetXY.value;
+      scrollViewDragInitialScrollOffsetXY.value = (scrollViewScrollOffsetXY === null || scrollViewScrollOffsetXY === void 0 ? void 0 : scrollViewScrollOffsetXY.value) || 0;
+      draggedSize.value = itemSize.value[index];
       draggedIndex.value = index;
       currentIndex.value = index;
       state.value = _types.ReorderableListState.DRAGGED;
@@ -640,29 +650,30 @@ const ReorderableListCore = ({
         index
       });
     }
-  }, [dragEnabledProp, resetSharedValues, shouldUpdateActiveItem, dragInitialScrollOffsetY, scrollViewScrollOffsetY, scrollViewDragInitialScrollOffsetY, setScrollEnabled, currentIndex, draggedHeight, draggedIndex, state, flatListScrollOffsetY, itemHeight, onDragStart, runDefaultDragAnimations]);
+  }, [dragEnabledProp, resetSharedValues, shouldUpdateActiveItem, dragInitialScrollOffsetXY, scrollViewScrollOffsetXY, scrollViewDragInitialScrollOffsetXY, setScrollEnabled, currentIndex, draggedSize, draggedIndex, state, flatListScrollOffsetXY, itemSize, onDragStart, runDefaultDragAnimations]);
   const handleFlatListLayout = (0, _react.useCallback)(e => {
-    flatListHeightY.value = e.nativeEvent.layout.height;
+    flatListSize.value = horizontalProp.value ? e.nativeEvent.layout.width : e.nativeEvent.layout.height;
 
     // If nested in a scroll container.
-    if (scrollViewScrollOffsetY) {
-      // Timeout fixes a bug where measure returns height 0.
+    if (scrollViewScrollOffsetXY) {
+      // Timeout fixes a bug where measure returns width or height 0.
       setTimeout(() => {
         (0, _reactNativeReanimated.runOnUI)(() => {
           const measurement = (0, _reactNativeReanimated.measure)(flatListRef);
           if (!measurement) {
             return;
           }
+          const pageXY = horizontalProp.value ? measurement.pageX : measurement.pageY;
 
           // We need to use pageY because the list might be nested into other views,
           // It's important that we take the measurement of the list without any scroll offset
           // from the scroll container.
-          flatListPageY.value = measurement.pageY + ((scrollViewScrollOffsetY === null || scrollViewScrollOffsetY === void 0 ? void 0 : scrollViewScrollOffsetY.value) || 0);
+          flatListPageXY.value = pageXY + ((scrollViewScrollOffsetXY === null || scrollViewScrollOffsetXY === void 0 ? void 0 : scrollViewScrollOffsetXY.value) || 0);
         })();
       }, 100);
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
-  }, [flatListRef, flatListPageY, flatListHeightY, scrollViewScrollOffsetY, onLayout]);
+  }, [flatListRef, flatListPageXY, flatListSize, horizontalProp, scrollViewScrollOffsetXY, onLayout]);
   const handleRef = (0, _react.useCallback)(value => {
     flatListRef(value);
     if (typeof ref === 'function') {
@@ -672,7 +683,7 @@ const ReorderableListCore = ({
     }
   }, [flatListRef, ref]);
   const combinedGesture = (0, _react.useMemo)(() => {
-    // android is able to handle nested scroll view, but not the full height ones like iOS
+    // Android is able to handle nested scroll view, but not the full size ones like iOS.
     if (outerScrollGesture && !(_reactNative.Platform.OS === 'android' && scrollable)) {
       return _reactNativeGestureHandler.Gesture.Simultaneous(outerScrollGesture, gestureHandler);
     }
@@ -686,8 +697,8 @@ const ReorderableListCore = ({
     // forces remount with key change on reorder
     key: createCellKey(cellKey),
     itemOffset: itemOffset,
-    itemHeight: itemHeight,
-    dragY: dragY,
+    itemSize: itemSize,
+    dragXY: dragXY,
     draggedIndex: draggedIndex,
     animationDuration: animationDurationProp,
     startDrag: startDrag
@@ -704,7 +715,6 @@ const ReorderableListCore = ({
     onLayout: handleFlatListLayout,
     onScroll: composedScrollHandler,
     scrollEventThrottle: 1,
-    horizontal: false,
     removeClippedSubviews: false,
     numColumns: 1
     // We force disable scroll or let the component prop control it.