@legendapp/list 3.0.0-beta.54 → 3.0.0-beta.56

package/index.native.mjs

@@ -1,13 +1,118 @@
 import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
+import { useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
 import * as ReactNative from 'react-native';
-import { Animated, View as View$1, Text as Text$1, Platform as Platform$1, StyleSheet as StyleSheet$1, RefreshControl, Dimensions } from 'react-native';
+import { Animated, Platform as Platform$1, View as View$1, Text as Text$1, StyleSheet as StyleSheet$1, RefreshControl, Dimensions, I18nManager } from 'react-native';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 // src/components/LegendList.tsx
 Animated.View;
 var View = View$1;
 var Text = Text$1;
+var Platform = Platform$1;
+var PlatformAdjustBreaksScroll = Platform.OS === "android";
+
+// src/utils/rtl.ts
+function clampHorizontalOffset(offset, maxOffset) {
+  if (maxOffset === void 0) {
+    return offset;
+  }
+  return Math.max(0, Math.min(maxOffset, offset));
+}
+function getHorizontalMaxOffset(state, contentWidth) {
+  if (contentWidth === void 0 || !Number.isFinite(contentWidth) || !Number.isFinite(state.scrollLength) || contentWidth <= state.scrollLength) {
+    return contentWidth !== void 0 && Number.isFinite(contentWidth) && Number.isFinite(state.scrollLength) ? 0 : void 0;
+  }
+  return Math.max(0, contentWidth - state.scrollLength);
+}
+function getDefaultHorizontalRTLScrollType() {
+  return Platform.OS === "web" ? "normal" : "inverted";
+}
+function getNativeHorizontalRTLScrollType(state) {
+  var _a3;
+  return (_a3 = state == null ? void 0 : state.horizontalRTLScrollType) != null ? _a3 : getDefaultHorizontalRTLScrollType();
+}
+function isRTLProps(props) {
+  var _a3;
+  return (_a3 = props == null ? void 0 : props.rtl) != null ? _a3 : !!I18nManager.isRTL;
+}
+function isHorizontalRTL(state) {
+  return isHorizontalRTLProps(state == null ? void 0 : state.props);
+}
+function isHorizontalRTLProps(props) {
+  return !!(props == null ? void 0 : props.horizontal) && isRTLProps(props);
+}
+function getLogicalHorizontalMaxOffset(state, contentWidth) {
+  var _a3;
+  return (_a3 = getHorizontalMaxOffset(state, contentWidth)) != null ? _a3 : 0;
+}
+function getHorizontalInsetEnd(state, inset) {
+  if (!inset) {
+    return 0;
+  }
+  return (isHorizontalRTL(state) ? inset.left : inset.right) || 0;
+}
+function toPhysicalHorizontalItemPosition(state, logicalPosition, itemSize, listSize) {
+  if (!isHorizontalRTL(state) || listSize === void 0 || !Number.isFinite(listSize)) {
+    return logicalPosition;
+  }
+  return Math.max(0, listSize - logicalPosition - itemSize);
+}
+function toNativeHorizontalOffset(state, logicalOffset, contentWidth) {
+  if (!state || !isHorizontalRTL(state)) {
+    return logicalOffset;
+  }
+  const maxOffset = getHorizontalMaxOffset(state, contentWidth);
+  const clampedLogicalOffset = clampHorizontalOffset(logicalOffset, maxOffset);
+  const mode = getNativeHorizontalRTLScrollType(state);
+  if (mode === "negative") {
+    return clampedLogicalOffset === 0 ? 0 : -clampedLogicalOffset;
+  }
+  if (mode === "inverted") {
+    if (maxOffset === void 0) {
+      return clampedLogicalOffset;
+    }
+    return clampHorizontalOffset(maxOffset - clampedLogicalOffset, maxOffset);
+  }
+  return clampedLogicalOffset;
+}
+function toLogicalHorizontalOffset(state, rawOffset, contentWidth) {
+  if (!isHorizontalRTL(state)) {
+    state.horizontalRTLScrollType = void 0;
+    return rawOffset;
+  }
+  const maxOffset = getHorizontalMaxOffset(state, contentWidth);
+  if (rawOffset < 0) {
+    state.horizontalRTLScrollType = "negative";
+    return clampHorizontalOffset(-rawOffset, maxOffset);
+  }
+  if (maxOffset === void 0) {
+    return rawOffset;
+  }
+  const normalOffset = rawOffset;
+  const invertedOffset = maxOffset - rawOffset;
+  if (!Number.isFinite(invertedOffset)) {
+    state.horizontalRTLScrollType = "normal";
+    return normalOffset;
+  }
+  const previousMode = state.horizontalRTLScrollType;
+  if (previousMode === "inverted") {
+    return clampHorizontalOffset(invertedOffset, maxOffset);
+  }
+  if (previousMode === "normal") {
+    return clampHorizontalOffset(normalOffset, maxOffset);
+  }
+  if (!state.hasScrolled) {
+    const defaultMode = getDefaultHorizontalRTLScrollType();
+    state.horizontalRTLScrollType = defaultMode;
+    return clampHorizontalOffset(defaultMode === "inverted" ? invertedOffset : normalOffset, maxOffset);
+  }
+  const referenceScroll = state.scroll;
+  const distanceNormal = Math.abs(normalOffset - referenceScroll);
+  const distanceInverted = Math.abs(invertedOffset - referenceScroll);
+  const useInverted = distanceInverted + 0.5 < distanceNormal;
+  state.horizontalRTLScrollType = useInverted ? "inverted" : "normal";
+  return clampHorizontalOffset(useInverted ? invertedOffset : normalOffset, maxOffset);
+}
 var createAnimatedValue = (value) => new Animated.Value(value);
 
 // src/state/state.tsx
@@ -149,7 +254,7 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
   const horizontal = props.horizontal;
   const contentInset = props.contentInset;
   const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
-  const baseEndInset = (horizontal ? baseInset == null ? void 0 : baseInset.right : baseInset == null ? void 0 : baseInset.bottom) || 0;
+  const baseEndInset = (horizontal ? getHorizontalInsetEnd(state, baseInset) : baseInset == null ? void 0 : baseInset.bottom) || 0;
   const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd(
     contentInsetEndAdjustmentOverride != null ? contentInsetEndAdjustmentOverride : props.contentInsetEndAdjustment
   );
@@ -158,9 +263,9 @@ function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
   const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
   const adjustedBaseEndInset = baseEndInset + contentInsetEndAdjustment;
   if (overrideInset) {
-    const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
+    const mergedInset = { bottom: 0, left: 0, right: 0, ...baseInset, ...overrideInset };
     return Math.max(
-      ((horizontal ? mergedInset.right : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
+      ((horizontal ? getHorizontalInsetEnd(state, mergedInset) : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
       anchoredEndInset
     );
   }
@@ -440,7 +545,8 @@ function comparatorDefault(a, b) {
 }
 function getPadding(s, type) {
   var _a3, _b, _c;
-  return (_c = (_b = (_a3 = s[`padding${type}`]) != null ? _a3 : s.paddingVertical) != null ? _b : s.padding) != null ? _c : 0;
+  const axisPadding = type === "Left" || type === "Right" ? s.paddingHorizontal : s.paddingVertical;
+  return (_c = (_b = (_a3 = s[`padding${type}`]) != null ? _a3 : axisPadding) != null ? _b : s.padding) != null ? _c : 0;
 }
 function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
@@ -647,8 +753,6 @@ function useOnLayoutSync({
   }
   return { onLayout };
 }
-var Platform = Platform$1;
-var PlatformAdjustBreaksScroll = Platform.OS === "android";
 
 // src/utils/isInMVCPActiveMode.native.ts
 function isInMVCPActiveMode(state) {
@@ -660,6 +764,7 @@ function getContainerPositionStyle({
   columnWrapperStyle,
   horizontal,
   hasItemSeparator,
+  isHorizontalRTLList,
   numColumns,
   otherAxisPos,
   otherAxisSize
@@ -683,6 +788,7 @@ function getContainerPositionStyle({
   }
   return horizontal ? {
     boxSizing: paddingStyles ? "border-box" : void 0,
+    direction: isHorizontalRTLList && Platform.OS === "web" ? "ltr" : void 0,
     flexDirection: hasItemSeparator ? "row" : void 0,
     height: otherAxisSize,
     left: 0,
@@ -711,6 +817,7 @@ var Container = typedMemo(function Container2({
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
+  const isHorizontalRTLList = isHorizontalRTL(ctx.state);
   const positionComponentInternal = ctx.state.props.positionComponentInternal;
   const stickyPositionComponentInternal = ctx.state.props.stickyPositionComponentInternal;
   const [column = 0, span = 1, data, numColumns = 1, extraData, isSticky] = useArr$([
@@ -742,11 +849,20 @@ var Container = typedMemo(function Container2({
       columnWrapperStyle,
       hasItemSeparator: !!ItemSeparatorComponent,
       horizontal,
+      isHorizontalRTLList,
       numColumns,
       otherAxisPos,
       otherAxisSize
     }),
-    [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
+    [
+      horizontal,
+      isHorizontalRTLList,
+      otherAxisPos,
+      otherAxisSize,
+      columnWrapperStyle,
+      numColumns,
+      ItemSeparatorComponent
+    ]
   );
   const renderedItemInfo = useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
@@ -899,9 +1015,13 @@ var ContainersLayer = typedMemo(function ContainersLayer2({ children, horizontal
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
   const animSize = useValue$("totalSize");
-  const otherAxisSize = useValue$("otherAxisSize");
-  const [readyToRender, numColumns] = useArr$(["readyToRender", "numColumns"]);
-  const style = horizontal ? { minHeight: otherAxisSize, opacity: readyToRender ? 1 : 0, width: animSize } : { height: animSize, minWidth: otherAxisSize, opacity: readyToRender ? 1 : 0 };
+  const [readyToRender, numColumns, otherAxisSize = 0] = useArr$(["readyToRender", "numColumns", "otherAxisSize"]);
+  const style = horizontal ? {
+    height: otherAxisSize || "100%",
+    minHeight: otherAxisSize,
+    opacity: readyToRender ? 1 : 0,
+    width: animSize
+  } : { height: animSize, minWidth: otherAxisSize, opacity: readyToRender ? 1 : 0 };
   if (columnWrapperStyle) {
     const { columnGap, rowGap, gap } = columnWrapperStyle;
     const gapX = columnGap || gap || 0;
@@ -954,6 +1074,18 @@ var Containers = typedMemo(function Containers2({
   return /* @__PURE__ */ React2.createElement(ContainersLayer, { horizontal }, containers);
 });
 var ListComponentScrollView = Animated.ScrollView;
+
+// src/components/listComponentStyles.ts
+function getAutoOtherAxisStyle({
+  horizontal,
+  needsOtherAxisSize,
+  otherAxisSize
+}) {
+  if (!needsOtherAxisSize || !otherAxisSize || otherAxisSize <= 0) {
+    return void 0;
+  }
+  return horizontal ? { height: otherAxisSize } : { width: otherAxisSize };
+}
 function ScrollAdjust() {
   var _a3;
   const ctx = useStateContext();
@@ -974,10 +1106,10 @@ function ScrollAdjust() {
     }
   );
 }
-function SnapWrapper({ ScrollComponent, ...props }) {
+var SnapWrapper = React2.forwardRef(function SnapWrapperInner({ ScrollComponent, ...props }, ref) {
   const [snapToOffsets] = useArr$(["snapToOffsets"]);
-  return /* @__PURE__ */ React2.createElement(ScrollComponent, { ...props, snapToOffsets });
-}
+  return /* @__PURE__ */ React2.createElement(ScrollComponent, { ...props, ref, snapToOffsets });
+});
 function WebAnchoredEndSpace({ horizontal }) {
   const ctx = useStateContext();
   const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
@@ -988,6 +1120,26 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React2.createElement("div", { style }, null);
 }
+function useLatestRef(value) {
+  const ref = React2.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/hooks/useStableRenderComponent.tsx
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React2.useMemo(
+    () => React2.forwardRef(
+      (props, ref) => {
+        var _a3, _b;
+        return (_b = (_a3 = renderComponentRef.current) == null ? void 0 : _a3.call(renderComponentRef, mapPropsRef.current(props, ref))) != null ? _b : null;
+      }
+    ),
+    [mapPropsRef, renderComponentRef]
+  );
+}
 var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
   const localRef = useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1026,14 +1178,17 @@ var ListComponent = typedMemo(function ListComponent2({
 }) {
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
-  const ScrollComponent = useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React2.forwardRef(
-      (props, ref) => renderScrollComponent({ ...props, ref })
-    );
-  }, [renderScrollComponent]);
+  const [otherAxisSize = 0] = useArr$(["otherAxisSize"]);
+  const autoOtherAxisStyle = getAutoOtherAxisStyle({
+    horizontal,
+    needsOtherAxisSize: ctx.state.needsOtherAxisSize,
+    otherAxisSize
+  });
+  const CustomScrollComponent = useStableRenderComponent(
+    renderScrollComponent,
+    (props, ref) => ({ ...props, ref })
+  );
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -1064,10 +1219,10 @@ var ListComponent = typedMemo(function ListComponent2({
       ...rest,
       ...ScrollComponent === ListComponentScrollView ? { useWindowScroll } : {},
       contentContainerStyle: [
-        contentContainerStyle,
         horizontal ? {
           height: "100%"
-        } : {}
+        } : {},
+        contentContainerStyle
       ],
       contentOffset: initialContentOffset !== void 0 ? horizontal ? { x: initialContentOffset, y: 0 } : { x: 0, y: initialContentOffset } : void 0,
       horizontal,
@@ -1076,7 +1231,7 @@ var ListComponent = typedMemo(function ListComponent2({
       onScroll: onScroll2,
       ref: refScrollView,
       ScrollComponent: snapToIndices ? ScrollComponent : void 0,
-      style
+      style: autoOtherAxisStyle ? [autoOtherAxisStyle, style] : style
     },
     /* @__PURE__ */ React2.createElement(ScrollAdjust, null),
     ListHeaderComponent && /* @__PURE__ */ React2.createElement(LayoutView, { onLayoutChange: onLayoutHeader, style: ListHeaderComponentStyle }, getComponent(ListHeaderComponent)),
@@ -1936,10 +2091,13 @@ function doScrollTo(ctx, params) {
   if (!scroller) {
     return;
   }
+  const isHorizontal = !!horizontal;
+  const contentSize = isHorizontal ? getContentSize(ctx) : void 0;
+  const nativeOffset = toNativeHorizontalOffset(state, offset, contentSize);
   scroller.scrollTo({
     animated: isAnimated,
-    x: horizontal ? offset : 0,
-    y: horizontal ? 0 : offset
+    x: isHorizontal ? nativeOffset : 0,
+    y: isHorizontal ? 0 : offset
   });
   if (isInitialScroll) {
     initialScrollCompletion.markInitialScrollNativeDispatch(state);
@@ -2511,11 +2669,51 @@ function getObservedBootstrapInitialScrollOffset(state) {
   const observedOffset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getCurrentScrollOffset) == null ? void 0 : _b.call(_a3);
   return typeof observedOffset === "number" && Number.isFinite(observedOffset) ? observedOffset : (_d = (_c = state.scrollPending) != null ? _c : state.scroll) != null ? _d : 0;
 }
+function getPreservedEndAnchorOffsetDiff(ctx) {
+  var _a3;
+  const state = ctx.state;
+  const initialScroll = state.initialScroll;
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || !initialScroll || initialScroll.viewPosition !== 1 || state.props.data.length === 0 || isOffsetInitialScrollSession(state)) {
+    return;
+  }
+  const currentOffset = typeof state.lastNativeScroll === "number" && Number.isFinite(state.lastNativeScroll) ? state.lastNativeScroll : getObservedBootstrapInitialScrollOffset(state);
+  return resolveInitialScrollOffset(ctx, initialScroll) - currentOffset;
+}
+function schedulePreservedEndAnchorCorrection(ctx) {
+  if (getPreservedEndAnchorOffsetDiff(ctx) === void 0) {
+    return false;
+  }
+  const correction = {};
+  schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  return true;
+}
+function schedulePreservedEndAnchorCorrectionFrame(ctx, correction) {
+  const state = ctx.state;
+  state.preservedEndAnchorCorrection = correction;
+  requestAnimationFrame(() => {
+    var _a3;
+    const activeCorrection = state.preservedEndAnchorCorrection;
+    if (activeCorrection !== correction) {
+      return;
+    }
+    const offsetDiff = getPreservedEndAnchorOffsetDiff(ctx);
+    if (offsetDiff === void 0 || Math.abs(offsetDiff) <= DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+      state.preservedEndAnchorCorrection = void 0;
+      return;
+    }
+    const hasObservedNativeScrollAfterRequest = !activeCorrection.lastRequestTime || ((_a3 = state.lastNativeScrollTime) != null ? _a3 : 0) > activeCorrection.lastRequestTime;
+    if (hasObservedNativeScrollAfterRequest) {
+      activeCorrection.lastRequestTime = Date.now();
+      requestAdjust(ctx, offsetDiff);
+    }
+    schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  });
+}
 function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
   var _a3, _b;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1) {
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1 || state.preservedEndAnchorCorrection) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
@@ -2672,7 +2870,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
@@ -2683,7 +2881,9 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
       const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
       const offsetDiff = resolvedOffset - currentOffset;
       if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
-        if (scrollingTo) {
+        if (state.didFinishInitialScroll) {
+          schedulePreservedEndAnchorCorrection(ctx);
+        } else if (scrollingTo) {
           const existingWatchdog = initialScrollWatchdog.get(state);
           scrollingTo.offset = resolvedOffset;
           scrollingTo.targetOffset = resolvedOffset;
@@ -2696,14 +2896,8 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
             startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
             targetOffset: resolvedOffset
           });
+          requestAdjust(ctx, offsetDiff);
         }
-        requestAdjust(ctx, offsetDiff);
-        if (state.didFinishInitialScroll) {
-          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
-        }
-      }
-      if (state.didFinishInitialScroll) {
-        clearFinishedViewportRetargetableInitialScroll(state);
       }
     } else {
       rearmBootstrapInitialScroll(ctx, {
@@ -2820,7 +3014,10 @@ function retargetActiveInitialScrollAtEnd(ctx) {
   var _a3;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
+  if (state.didFinishInitialScroll) {
+    return schedulePreservedEndAnchorCorrection(ctx);
+  }
+  if (!initialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
     return false;
   }
   return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
@@ -2839,7 +3036,14 @@ function handleInitialScrollLayoutReady(ctx) {
 }
 function initializeInitialScrollOnMount(ctx, options) {
   var _a3, _b;
-  const { dataLength, hasFooterComponent, initialContentOffset, initialScrollAtEnd, useBootstrapInitialScroll } = options;
+  const {
+    alwaysDispatchInitialScroll,
+    dataLength,
+    hasFooterComponent,
+    initialContentOffset,
+    initialScrollAtEnd,
+    useBootstrapInitialScroll
+  } = options;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const resolvedInitialContentOffset = initialContentOffset != null ? initialContentOffset : 0;
@@ -2859,7 +3063,7 @@ function initializeInitialScrollOnMount(ctx, options) {
     return;
   }
   const hasPendingDataDependentInitialScroll = !!initialScroll && dataLength === 0 && !(resolvedInitialContentOffset === 0 && !initialScrollAtEnd);
-  if (!resolvedInitialContentOffset && !hasPendingDataDependentInitialScroll) {
+  if (!alwaysDispatchInitialScroll && !resolvedInitialContentOffset && !hasPendingDataDependentInitialScroll) {
     if (initialScroll && !initialScrollAtEnd) {
       finishInitialScroll(ctx, {
         resolvedOffset: resolvedInitialContentOffset
@@ -3190,9 +3394,18 @@ function prepareMVCP(ctx, dataChanged) {
   }
 }
 
+// src/core/resetLayoutCachesForDataChange.ts
+function resetLayoutCachesForDataChange(state) {
+  state.indexByKey.clear();
+  state.idCache.length = 0;
+  state.positions.length = 0;
+  state.columns.length = 0;
+  state.columnSpans.length = 0;
+}
+
 // src/core/syncMountedContainer.ts
 function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
-  var _a3, _b, _c, _d, _e, _f, _g, _h;
+  var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
   const state = ctx.state;
   const {
     columns,
@@ -3204,7 +3417,8 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
   if (item === void 0) {
     return { didChangePosition: false, didRefreshData: false };
   }
-  const updateLayout = (_a3 = options == null ? void 0 : options.updateLayout) != null ? _a3 : true;
+  const itemKey = (_a3 = state.idCache[itemIndex]) != null ? _a3 : getId(state, itemIndex);
+  const updateLayout = (_b = options == null ? void 0 : options.updateLayout) != null ? _b : true;
   let didChangePosition = false;
   let didRefreshData = false;
   if (updateLayout) {
@@ -3213,7 +3427,9 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerPosition${containerIndex}`, POSITION_OUT_OF_VIEW);
       return { didChangePosition: false, didRefreshData: false };
     }
-    const position = (positionValue || 0) - ((_b = options == null ? void 0 : options.scrollAdjustPending) != null ? _b : 0);
+    const logicalPosition = (positionValue || 0) - ((_c = options == null ? void 0 : options.scrollAdjustPending) != null ? _c : 0);
+    const itemSize = (_d = state.sizes.get(itemKey)) != null ? _d : getItemSize(ctx, itemKey, itemIndex, item);
+    const position = toPhysicalHorizontalItemPosition(state, logicalPosition, itemSize, peek$(ctx, "totalSize"));
     const column = columns[itemIndex] || 1;
     const span = columnSpans[itemIndex] || 1;
     const prevPos = peek$(ctx, `containerPosition${containerIndex}`);
@@ -3232,15 +3448,15 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
   }
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
   if (prevData !== item) {
-    const pendingDataComparison = ((_c = state.pendingDataComparison) == null ? void 0 : _c.previousData) === state.previousData && ((_d = state.pendingDataComparison) == null ? void 0 : _d.nextData) === data ? state.pendingDataComparison : void 0;
-    const cachedComparison = (_e = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _e : 0;
+    const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
+    const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
       set$(ctx, `containerItemData${containerIndex}`, item);
       didRefreshData = true;
     } else if (cachedComparison !== 1) {
-      const itemKey = (_g = (_f = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _f : state.idCache[itemIndex]) != null ? _g : getId(state, itemIndex);
+      const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
-      if (prevData === void 0 || !keyExtractor || prevKey !== itemKey) {
+      if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
         set$(ctx, `containerItemData${containerIndex}`, item);
         didRefreshData = true;
       } else if (!itemsAreEqual) {
@@ -3257,7 +3473,7 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
             };
           }
         }
-        if ((_h = state.pendingDataComparison) == null ? void 0 : _h.byIndex) {
+        if ((_i = state.pendingDataComparison) == null ? void 0 : _i.byIndex) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
@@ -3422,11 +3638,13 @@ function updateSnapToOffsets(ctx) {
   const {
     props: { snapToIndices }
   } = state;
+  const contentSize = state.props.horizontal ? getContentSize(ctx) : void 0;
   const snapToOffsets = Array(snapToIndices.length);
   for (let i = 0; i < snapToIndices.length; i++) {
     const idx = snapToIndices[i];
     getId(state, idx);
-    snapToOffsets[i] = state.positions[idx];
+    const logicalOffset = state.positions[idx];
+    snapToOffsets[i] = toNativeHorizontalOffset(state, logicalOffset, contentSize);
   }
   set$(ctx, "snapToOffsets", snapToOffsets);
 }
@@ -4035,7 +4253,6 @@ function calculateItemsInView(ctx, params = {}) {
     var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
     const {
       columns,
-      columnSpans,
       containerItemKeys,
       enableScrollForNextCalculateItemsInView,
       idCache,
@@ -4085,8 +4302,10 @@ function calculateItemsInView(ctx, params = {}) {
     let scrollTopBuffered = 0;
     let scrollBottom = 0;
     let scrollBottomBuffered = 0;
+    let nativeScrollState = scrollState;
     const updateScroll2 = (nextScrollState) => {
       var _a4;
+      nativeScrollState = nextScrollState;
       scrollAdjustPending = (_a4 = peek$(ctx, "scrollAdjustPending")) != null ? _a4 : 0;
       scrollAdjustPad = scrollAdjustPending - topPad;
       scroll = Math.round(nextScrollState + scrollExtra + scrollAdjustPad);
@@ -4098,9 +4317,17 @@ function calculateItemsInView(ctx, params = {}) {
     const previousStickyIndex = peek$(ctx, "activeStickyIndex");
     const currentStickyIdx = stickyIndicesArr.length > 0 ? findCurrentStickyIndex(stickyIndicesArr, scroll, state) : -1;
     const nextActiveStickyIndex = currentStickyIdx >= 0 ? stickyIndicesArr[currentStickyIdx] : -1;
+    const stickyIndexDidChange = previousStickyIndex !== nextActiveStickyIndex;
     if (currentStickyIdx >= 0 || previousStickyIndex >= 0) {
       set$(ctx, "activeStickyIndex", nextActiveStickyIndex);
     }
+    const shouldNotifyStickyHeaderChange = !!onStickyHeaderChange && stickyIndicesArr.length > 0 && stickyIndexDidChange;
+    const finishCalculateItemsInView = shouldNotifyStickyHeaderChange ? () => {
+      const item = data[nextActiveStickyIndex];
+      if (item !== void 0) {
+        onStickyHeaderChange == null ? void 0 : onStickyHeaderChange({ index: nextActiveStickyIndex, item });
+      }
+    } : void 0;
     let scrollBufferTop = drawDistance;
     let scrollBufferBottom = drawDistance;
     if (speed > 0 || speed === 0 && scroll < Math.max(50, drawDistance)) {
@@ -4111,8 +4338,10 @@ function calculateItemsInView(ctx, params = {}) {
       scrollBufferBottom = drawDistance * 0.5;
     }
     const updateScrollRange = () => {
-      scrollTopBuffered = scroll - scrollBufferTop;
-      scrollBottom = scroll + scrollLength + (scroll < 0 ? -scroll : 0);
+      const scrollStart = Math.max(0, scroll);
+      const overscrollBeforeContent = Math.max(0, -nativeScrollState);
+      scrollTopBuffered = scrollStart - scrollBufferTop;
+      scrollBottom = Math.max(scrollStart, scroll + scrollLength + overscrollBeforeContent);
       scrollBottomBuffered = scrollBottom + scrollBufferBottom;
     };
     updateScrollRange();
@@ -4122,17 +4351,14 @@ function calculateItemsInView(ctx, params = {}) {
         state.scrollForNextCalculateItemsInView = void 0;
       } else if ((top === null || scrollTopBuffered > top) && (bottom === null || scrollBottomBuffered < bottom)) {
         if (Platform.OS !== "web" || !isInMVCPActiveMode(state)) {
+          finishCalculateItemsInView == null ? void 0 : finishCalculateItemsInView();
           return;
         }
       }
     }
     const checkMVCP = doMVCP && !suppressInitialScrollSideEffects ? prepareMVCP(ctx, dataChanged) : void 0;
     if (dataChanged) {
-      indexByKey.clear();
-      idCache.length = 0;
-      positions.length = 0;
-      columns.length = 0;
-      columnSpans.length = 0;
+      resetLayoutCachesForDataChange(state);
     }
     const startIndex = forceFullItemPositions || dataChanged ? 0 : (_c = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _c : 0;
     const optimizeForVisibleWindow = !forceFullItemPositions && !dataChanged && numColumns > 1 && minIndexSizeChanged !== void 0;
@@ -4446,12 +4672,7 @@ function calculateItemsInView(ctx, params = {}) {
         );
       }
     }
-    if (onStickyHeaderChange && stickyIndicesArr.length > 0 && nextActiveStickyIndex !== void 0 && nextActiveStickyIndex !== previousStickyIndex) {
-      const item = data[nextActiveStickyIndex];
-      if (item !== void 0) {
-        onStickyHeaderChange({ index: nextActiveStickyIndex, item });
-      }
-    }
+    finishCalculateItemsInView == null ? void 0 : finishCalculateItemsInView();
   });
 }
 
@@ -4479,11 +4700,22 @@ function doMaintainScrollAtEnd(ctx) {
     if (!state.maintainingScrollAtEnd) {
       state.maintainingScrollAtEnd = true;
       requestAnimationFrame(() => {
-        var _a3;
         if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
-          (_a3 = refScroller.current) == null ? void 0 : _a3.scrollToEnd({
-            animated: maintainScrollAtEnd.animated
-          });
+          const scroller = refScroller.current;
+          if (state.props.horizontal && isHorizontalRTL(state)) {
+            const currentContentSize = getContentSize(ctx);
+            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
+            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
+            scroller == null ? void 0 : scroller.scrollTo({
+              animated: maintainScrollAtEnd.animated,
+              x: nativeOffset,
+              y: 0
+            });
+          } else {
+            scroller == null ? void 0 : scroller.scrollToEnd({
+              animated: maintainScrollAtEnd.animated
+            });
+          }
           setTimeout(
             () => {
               state.maintainingScrollAtEnd = false;
@@ -4679,7 +4911,8 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     }
     checkThresholds(ctx);
     if (state) {
-      state.needsOtherAxisSize = otherAxisSize - (state.props.stylePaddingTop || 0) < 10;
+      const crossAxisPadding = state.props.horizontal ? (state.props.stylePaddingTop || 0) + (state.props.stylePaddingBottom || 0) : (state.props.stylePaddingLeft || 0) + (state.props.stylePaddingRight || 0);
+      state.needsOtherAxisSize = otherAxisSize - crossAxisPadding < 10;
     }
     if (IS_DEV && measuredLength === 0) {
       warnDevOnce(
@@ -4798,7 +5031,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -4817,6 +5050,16 @@ function onScroll(ctx, event) {
     }
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  if (state.props.horizontal) {
+    newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
+  }
+  const isFinishedEndInitialScroll = state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  const shouldIgnoreNegativeInsetChange = Platform.OS !== "web" && insetChanged && newScroll < 0 && isFinishedEndInitialScroll;
+  if (shouldIgnoreNegativeInsetChange) {
+    return;
+  }
+  state.lastNativeScroll = newScroll;
+  state.lastNativeScrollTime = Date.now();
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -4990,6 +5233,16 @@ function runOrScheduleMVCPRecalculate(ctx) {
     calculateItemsInView(ctx, { doMVCP: true });
   }
 }
+function updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal) {
+  const state = ctx.state;
+  if (state.needsOtherAxisSize) {
+    const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
+    const currentOtherAxisSize = peek$(ctx, "otherAxisSize");
+    if (!currentOtherAxisSize || otherAxisSize > currentOtherAxisSize) {
+      set$(ctx, "otherAxisSize", otherAxisSize);
+    }
+  }
+}
 function updateItemSize(ctx, itemKey, sizeObj) {
   var _a3;
   const state = ctx.state;
@@ -5013,13 +5266,13 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     const type = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
     const size2 = getFixedItemSize(itemData, index, type);
     if (size2 !== void 0 && size2 === sizesKnown.get(itemKey)) {
+      updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
       return;
     }
   }
   let needsRecalculate = !didContainersLayout;
   let shouldMaintainScrollAtEnd = false;
   let minIndexSizeChanged;
-  let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
   const prevSizeKnown = state.sizesKnown.get(itemKey);
   const diff = updateOneItemSize(ctx, itemKey, sizeObj);
   const size = roundSize(horizontal ? sizeObj.width : sizeObj.height);
@@ -5030,10 +5283,6 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
       needsRecalculate = true;
     }
-    if (state.needsOtherAxisSize) {
-      const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
-      maxOtherAxisSize = Math.max(maxOtherAxisSize, otherAxisSize);
-    }
     if (prevSizeKnown !== void 0 && Math.abs(prevSizeKnown - size) > 5) {
       shouldMaintainScrollAtEnd = true;
     }
@@ -5049,10 +5298,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   if (minIndexSizeChanged !== void 0) {
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged) : minIndexSizeChanged;
   }
-  const cur = peek$(ctx, "otherAxisSize");
-  if (!cur || maxOtherAxisSize > cur) {
-    set$(ctx, "otherAxisSize", maxOtherAxisSize);
-  }
+  updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
   if (didContainersLayout || checkAllSizesKnown(state, getMountedBufferedIndices(state))) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
@@ -5454,6 +5700,8 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
   indices.sort(sortAsc);
   return indices;
 }
+
+// src/utils/getRenderedItem.ts
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -5479,7 +5727,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React2__default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
@@ -5640,7 +5888,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     getFixedItemSize,
     getItemType,
     horizontal,
+    rtl,
     initialContainerPoolRatio = 3,
+    estimatedHeaderSize,
     initialScrollAtEnd = false,
     initialScrollIndex: initialScrollIndexProp,
     initialScrollOffset: initialScrollOffsetProp,
@@ -5708,13 +5958,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const style = { ...StyleSheet.flatten(styleProp) };
   const stylePaddingTopState = extractPadding(style, contentContainerStyle, "Top");
   const stylePaddingBottomState = extractPadding(style, contentContainerStyle, "Bottom");
+  const stylePaddingLeftState = extractPadding(style, contentContainerStyle, "Left");
+  const stylePaddingRightState = extractPadding(style, contentContainerStyle, "Right");
   const maintainScrollAtEndConfig = normalizeMaintainScrollAtEnd(maintainScrollAtEnd);
   const maintainVisibleContentPositionConfig = normalizeMaintainVisibleContentPosition(
     maintainVisibleContentPositionProp
   );
   const hasInitialScrollIndex = initialScrollIndexProp !== void 0 && initialScrollIndexProp !== null;
   const hasInitialScrollOffset = initialScrollOffsetProp !== void 0 && initialScrollOffsetProp !== null;
-  const initialScrollUsesOffsetOnly = !initialScrollAtEnd && !hasInitialScrollIndex && hasInitialScrollOffset;
+  const shouldInitializeHorizontalRTL = !initialScrollAtEnd && !hasInitialScrollIndex && !hasInitialScrollOffset && isHorizontalRTLProps({ horizontal, rtl });
+  const initialScrollUsesOffsetOnly = !initialScrollAtEnd && !hasInitialScrollIndex && (hasInitialScrollOffset || shouldInitializeHorizontalRTL);
   const usesBootstrapInitialScroll = initialScrollAtEnd || hasInitialScrollIndex;
   const initialScrollProp = initialScrollAtEnd ? {
     index: Math.max(0, dataProp.length - 1),
@@ -5830,6 +6083,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       internalState.reprocessCurrentScroll = () => updateScroll(ctx, internalState.scroll, true);
       set$(ctx, "maintainVisibleContentPosition", maintainVisibleContentPositionConfig);
       set$(ctx, "extraData", extraData);
+      if (estimatedHeaderSize !== void 0) {
+        set$(ctx, "headerSize", estimatedHeaderSize);
+      }
     }
     refState.current = ctx.state;
   }
@@ -5889,11 +6145,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     positionComponentInternal,
     recycleItems: !!recycleItems,
     renderItem,
+    rtl,
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
     stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
+    stylePaddingLeft: stylePaddingLeftState,
+    stylePaddingRight: stylePaddingRightState,
     stylePaddingTop: stylePaddingTopState,
     useWindowScroll: useWindowScrollResolved
   };
@@ -5921,6 +6180,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   };
   if (isFirstLocal) {
     initializeStateVars(false);
+    resetLayoutCachesForDataChange(state);
     updateItemPositions(
       ctx,
       /*dataChanged*/
@@ -5938,6 +6198,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [usesBootstrapInitialScroll]);
   useLayoutEffect(() => {
     initializeInitialScrollOnMount(ctx, {
+      alwaysDispatchInitialScroll: shouldInitializeHorizontalRTL,
       dataLength: dataProp.length,
       hasFooterComponent: !!ListFooterComponent,
       initialContentOffset,