@shopify/flash-list 2.2.2 → 2.3.0

package/src/recyclerview/RecyclerView.tsx

@@ -48,6 +48,7 @@ import { CompatScroller } from "./components/CompatScroller";
 import { useBoundDetection } from "./hooks/useBoundDetection";
 import { adjustOffsetForRTL } from "./utils/adjustOffsetForRTL";
 import { useSecondaryProps } from "./hooks/useSecondaryProps";
+import { getInvertedTransformStyle } from "./utils/getInvertedTransformStyle";
 import { StickyHeaders, StickyHeaderRef } from "./components/StickyHeaders";
 import { ScrollAnchor, ScrollAnchorRef } from "./components/ScrollAnchor";
 import { useRecyclerViewController } from "./hooks/useRecyclerViewController";
@@ -86,6 +87,7 @@ const RecyclerViewComponent = <T,>(
     onCommitLayoutEffect,
     onChangeStickyIndex,
     stickyHeaderConfig,
+    inverted,
     ...rest
   } = props;
 
@@ -100,6 +102,11 @@ const RecyclerViewComponent = <T,>(
   const stickyHeaderHideRelatedCell =
     stickyHeaderConfig?.hideRelatedCell ?? false;
 
+  // Compute the inverted transform style based on platform and orientation
+  const invertedTransformStyle = inverted
+    ? getInvertedTransformStyle(horizontal)
+    : undefined;
+
   // Core refs for managing scroll view, internal view, and child container
   const scrollViewRef = useRef<CompatScroller>(null);
   const internalViewRef = useRef<CompatView>(null);
@@ -157,29 +164,28 @@ const RecyclerViewComponent = <T,>(
    */
   useLayoutEffect(() => {
     if (internalViewRef.current && firstChildViewRef.current) {
-      // Measure the outer and inner container layouts
-      const outerViewLayout = measureParentSize(internalViewRef.current);
+      // Measure the outer container size and inner container layout
+      const outerViewSize = measureParentSize(internalViewRef.current);
       const firstChildViewLayout = measureFirstChildLayout(
         firstChildViewRef.current,
         internalViewRef.current
       );
 
-      containerViewSizeRef.current = outerViewLayout;
+      containerViewSizeRef.current = outerViewSize;
 
-      // Calculate offset of first item
+      // firstChildViewLayout is already relative to the outer container,
+      // so its x/y directly gives the first item offset.
       const firstItemOffset = horizontal
-        ? firstChildViewLayout.x - outerViewLayout.x
-        : firstChildViewLayout.y - outerViewLayout.y;
+        ? firstChildViewLayout.x
+        : firstChildViewLayout.y;
 
       // Update the RecyclerView manager with window dimensions
       recyclerViewManager.updateLayoutParams(
         {
-          width: horizontal
-            ? outerViewLayout.width
-            : firstChildViewLayout.width,
+          width: horizontal ? outerViewSize.width : firstChildViewLayout.width,
           height: horizontal
             ? firstChildViewLayout.height
-            : outerViewLayout.height,
+            : outerViewSize.height,
         },
         isHorizontalRTL && recyclerViewManager.hasLayout()
           ? firstItemOffset -
@@ -300,7 +306,11 @@ const RecyclerViewComponent = <T,>(
       checkBounds();
 
       // Record interaction and compute item visibility
-      recyclerViewManager.recordInteraction();
+      // Skip recording interaction during programmatic initial scroll
+      // to respect waitForInteraction in viewability config
+      if (recyclerViewManager.isInitialScrollComplete) {
+        recyclerViewManager.recordInteraction();
+      }
       recyclerViewManager.computeItemViewability();
 
       // Call user-provided onScroll handler
@@ -430,6 +440,7 @@ const RecyclerViewComponent = <T,>(
           stickyHeaderRef={stickyHeaderRef}
           recyclerViewManager={recyclerViewManager}
           extraData={extraData}
+          inverted={inverted}
           onChangeStickyIndex={(newStickyHeaderIndex) => {
             if (stickyHeaderHideRelatedCell) {
               setCurrentStickyIndex(newStickyHeaderIndex);
@@ -452,6 +463,7 @@ const RecyclerViewComponent = <T,>(
     currentStickyIndex,
     onChangeStickyIndex,
     stickyHeaderHideRelatedCell,
+    inverted,
   ]);
 
   // Set up scroll event handling with animation support for sticky headers
@@ -523,6 +535,7 @@ const RecyclerViewComponent = <T,>(
             overflow: "hidden",
           },
           style,
+          invertedTransformStyle,
         ]}
         ref={internalViewRef}
         collapsable={false}
@@ -612,6 +625,7 @@ const RecyclerViewComponent = <T,>(
             }}
             CellRendererComponent={CellRendererComponent}
             ItemSeparatorComponent={ItemSeparatorComponent}
+            isInLastRow={(index) => recyclerViewManager.isInLastRow(index)}
             getChildContainerLayout={() =>
               recyclerViewManager.hasLayout()
                 ? recyclerViewManager.getChildContainerDimensions()
@@ -619,6 +633,7 @@ const RecyclerViewComponent = <T,>(
             }
             currentStickyIndex={currentStickyIndex}
             hideStickyHeaderRelatedCell={stickyHeaderHideRelatedCell}
+            inverted={inverted}
           />
           {renderEmpty}
           {renderFooter}

package/src/recyclerview/RecyclerViewManager.ts

@@ -39,6 +39,7 @@ export class RecyclerViewManager<T> {
   public firstItemOffset = 0;
   public ignoreScrollEvents = false;
   public isFirstPaintOnUiComplete = false;
+  public isInitialScrollComplete = false;
 
   public get animationOptimizationsEnabled() {
     return this._animationOptimizationsEnabled;
@@ -71,6 +72,7 @@ export class RecyclerViewManager<T> {
       props.maxItemsInRecyclePool
     );
     this.itemViewabilityManager = new ViewabilityManager<T>(this as any);
+    this.isInitialScrollComplete = this.getInitialScrollIndex() === undefined;
     this.checkPropsAndWarn();
   }
 
@@ -151,6 +153,10 @@ export class RecyclerViewManager<T> {
     return undefined;
   }
 
+  isInLastRow(index: number): boolean {
+    return this.layoutManager?.isInLastRow(index) ?? false;
+  }
+
   // Doesn't include header / foot etc
   getChildContainerDimensions() {
     if (!this.layoutManager) {
@@ -376,27 +382,26 @@ export class RecyclerViewManager<T> {
     }
 
     const initialScrollIndex = this.getInitialScrollIndex();
-    const initialItemLayout = this.layoutManager?.getLayout(
-      initialScrollIndex ?? 0
-    );
-    const initialItemOffset = this.propsRef.horizontal
-      ? initialItemLayout?.x
-      : initialItemLayout?.y;
 
     if (initialScrollIndex !== undefined) {
-      // console.log(
-      //   "initialItemOffset",
-      //   initialScrollIndex,
-      //   initialItemOffset,
-      //   this.firstItemOffset
-      // );
+      // Recompute layouts first, then read the offset. The recompute may
+      // re-estimate unmeasured items with an updated average height, changing
+      // the target item's position. Reading before recompute would capture a
+      // stale offset, causing the wrong items to be rendered.
       this.layoutManager.recomputeLayouts(0, initialScrollIndex);
-      this.engagedIndicesTracker.scrollOffset =
-        initialItemOffset ?? 0 + this.firstItemOffset;
+      const initialItemLayout =
+        this.layoutManager.getLayout(initialScrollIndex);
+      const initialItemOffset = this.propsRef.horizontal
+        ? initialItemLayout.x
+        : initialItemLayout.y;
+      this.engagedIndicesTracker.scrollOffset = initialItemOffset;
     } else {
-      // console.log("initialItemOffset", initialItemOffset, this.firstItemOffset);
+      const initialItemLayout = this.layoutManager.getLayout(0);
+      const initialItemOffset = this.propsRef.horizontal
+        ? initialItemLayout.x
+        : initialItemLayout.y;
       this.engagedIndicesTracker.scrollOffset =
-        (initialItemOffset ?? 0) - this.firstItemOffset;
+        initialItemOffset - this.firstItemOffset;
     }
   }
 

package/src/recyclerview/ViewHolder.tsx

@@ -17,6 +17,7 @@ import { FlashListProps, RenderTarget } from "../FlashListProps";
 
 import { RVDimension, RVLayout } from "./layout-managers/LayoutManager";
 import { CompatView } from "./components/CompatView";
+import { getInvertedTransformStyle } from "./utils/getInvertedTransformStyle";
 
 /**
  * Props interface for the ViewHolder component
@@ -49,6 +50,8 @@ export interface ViewHolderProps<TItem> {
   onSizeChanged?: (index: number, size: RVDimension) => void;
   /** Whether this item should be hidden (likely because it is associated with the active sticky header) */
   hidden: boolean;
+  /** Whether the list is inverted */
+  inverted?: FlashListProps<TItem>["inverted"];
 }
 
 /**
@@ -72,6 +75,7 @@ const ViewHolderInternal = <TItem,>(props: ViewHolderProps<TItem>) => {
     trailingItem,
     horizontal,
     hidden,
+    inverted,
   } = props;
 
   useLayoutEffect(() => {
@@ -105,6 +109,10 @@ const ViewHolderInternal = <TItem,>(props: ViewHolderProps<TItem>) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [item, extraData, target, renderItem]);
 
+  const invertedTransformStyle = inverted
+    ? getInvertedTransformStyle(horizontal)
+    : undefined;
+
   const style = {
     flexDirection: horizontal ? "row" : "column",
     position: target === "StickyHeader" ? "relative" : "absolute",
@@ -117,6 +125,7 @@ const ViewHolderInternal = <TItem,>(props: ViewHolderProps<TItem>) => {
     left: layout.x,
     top: layout.y,
     opacity: hidden ? 0 : 1,
+    ...invertedTransformStyle,
   } as const;
 
   // TODO: Fix this type issue
@@ -157,7 +166,8 @@ export const ViewHolder = React.memo(
       prevProps.ItemSeparatorComponent === nextProps.ItemSeparatorComponent &&
       prevProps.trailingItem === nextProps.trailingItem &&
       prevProps.horizontal === nextProps.horizontal &&
-      prevProps.hidden === nextProps.hidden
+      prevProps.hidden === nextProps.hidden &&
+      prevProps.inverted === nextProps.inverted
     );
   }
 );

package/src/recyclerview/ViewHolderCollection.tsx

@@ -54,6 +54,10 @@ export interface ViewHolderCollectionProps<TItem> {
   currentStickyIndex: number;
   /** Whether the cell associated with an active sticky header is hidden */
   hideStickyHeaderRelatedCell: boolean;
+  /** Returns whether the item at the given index is in the last row of the layout */
+  isInLastRow: (index: number) => boolean;
+  /** Whether the list is inverted */
+  inverted: FlashListProps<TItem>["inverted"];
 }
 
 /**
@@ -90,6 +94,8 @@ export const ViewHolderCollection = <TItem,>(
     getAdjustmentMargin,
     currentStickyIndex,
     hideStickyHeaderRelatedCell,
+    isInLastRow,
+    inverted,
   } = props;
 
   const [renderId, setRenderId] = React.useState(0);
@@ -171,9 +177,13 @@ export const ViewHolderCollection = <TItem,>(
         hasData &&
         Array.from(renderStack.entries(), ([reactKey, { index }]) => {
           const item = data[index];
-          const trailingItem = ItemSeparatorComponent
-            ? data[index + 1]
-            : undefined;
+          // Suppress separators for items in the last row to prevent
+          // height mismatch. The last data item has no separator (no
+          // trailingItem), so all items sharing its row must match.
+          const trailingItem =
+            ItemSeparatorComponent && !isInLastRow(index)
+              ? data[index + 1]
+              : undefined;
 
           return (
             <ViewHolder
@@ -195,6 +205,7 @@ export const ViewHolderCollection = <TItem,>(
               hidden={
                 hideStickyHeaderRelatedCell && currentStickyIndex === index
               }
+              inverted={inverted}
             />
           );
         })}

package/src/recyclerview/components/StickyHeaders.tsx

@@ -44,6 +44,8 @@ export interface StickyHeaderProps<TItem> {
   recyclerViewManager: RecyclerViewManager<TItem>;
   /** Additional data to trigger re-renders */
   extraData: FlashListProps<TItem>["extraData"];
+  /** Whether the list is inverted */
+  inverted: FlashListProps<TItem>["inverted"];
 }
 
 /**
@@ -69,6 +71,7 @@ export const StickyHeaders = <TItem,>({
   data,
   extraData,
   onChangeStickyIndex,
+  inverted,
 }: StickyHeaderProps<TItem>) => {
   const [stickyHeaderState, setStickyHeaderState] = useState<StickyHeaderState>(
     {
@@ -214,6 +217,7 @@ export const StickyHeaders = <TItem,>({
             trailingItem={null}
             target="StickyHeader"
             hidden={false}
+            inverted={inverted}
           />
         ) : null}
       </CompatAnimatedView>
@@ -227,6 +231,7 @@ export const StickyHeaders = <TItem,>({
     refHolder,
     extraData,
     stickyHeaderOffset,
+    inverted,
   ]);
 
   if (PlatformConfig.isRN083OrAbove && currentStickyIndex === -1) {

package/src/recyclerview/hooks/useBoundDetection.ts

@@ -140,7 +140,7 @@ export function useBoundDetection<T>(
           recyclerViewManager.props.maintainVisibleContentPosition
             ?.animateAutoScrollToBottom ?? true;
         scrollViewRef.current?.scrollToEnd({
-          animated: shouldAnimate,
+          animated: shouldAnimate && !recyclerViewManager.ignoreScrollEvents,
         });
       });
     }

package/src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -51,7 +51,6 @@ export function useRecyclerViewController<T>(
   const isUnmounted = useUnmountFlag();
   const [_, setRenderId] = useState(0);
   const pauseOffsetCorrection = useRef(false);
-  const initialScrollCompletedRef = useRef(false);
   const lastDataLengthRef = useRef(recyclerViewManager.getDataLength());
   const { setTimeout } = useUnmountAwareTimeout();
 
@@ -573,12 +572,12 @@ export function useRecyclerViewController<T>(
     if (
       initialScrollIndex >= 0 &&
       initialScrollIndex < dataLength &&
-      !initialScrollCompletedRef.current &&
+      !recyclerViewManager.isInitialScrollComplete &&
       recyclerViewManager.getIsFirstLayoutComplete()
     ) {
       // Use setTimeout to ensure that we keep trying to scroll on first few renders
       setTimeout(() => {
-        initialScrollCompletedRef.current = true;
+        recyclerViewManager.isInitialScrollComplete = true;
         pauseOffsetCorrection.current = false;
       }, 100);
 

package/src/recyclerview/hooks/useSecondaryProps.tsx

@@ -2,9 +2,10 @@ import { Animated, RefreshControl } from "react-native";
 import React, { useMemo } from "react";
 
 import { RecyclerViewProps } from "../RecyclerViewProps";
-import { getValidComponent } from "../utils/componentUtils";
+import { getValidComponent, isComponentClass } from "../utils/componentUtils";
 import { CompatView } from "../components/CompatView";
 import { CompatAnimatedScroller } from "../components/CompatScroller";
+import { getInvertedTransformStyle } from "../utils/getInvertedTransformStyle";
 
 /**
  * Hook that manages secondary props and components for the RecyclerView.
@@ -30,6 +31,7 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     ListFooterComponent,
     ListFooterComponentStyle,
     ListEmptyComponent,
+    ListEmptyComponentStyle,
     renderScrollComponent,
     refreshing,
     progressViewOffset,
@@ -37,8 +39,14 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     data,
     refreshControl: customRefreshControl,
     stickyHeaderConfig,
+    inverted,
+    horizontal,
   } = props;
 
+  const invertedTransformStyle = inverted
+    ? getInvertedTransformStyle(horizontal)
+    : undefined;
+
   /**
    * Creates the refresh control component if onRefresh is provided.
    */
@@ -65,11 +73,11 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       return null;
     }
     return (
-      <CompatView style={ListHeaderComponentStyle}>
+      <CompatView style={[ListHeaderComponentStyle, invertedTransformStyle]}>
         {getValidComponent(ListHeaderComponent)}
       </CompatView>
     );
-  }, [ListHeaderComponent, ListHeaderComponentStyle]);
+  }, [ListHeaderComponent, ListHeaderComponentStyle, invertedTransformStyle]);
 
   /**
    * Creates the footer component with optional styling.
@@ -79,11 +87,11 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       return null;
     }
     return (
-      <CompatView style={ListFooterComponentStyle}>
+      <CompatView style={[ListFooterComponentStyle, invertedTransformStyle]}>
         {getValidComponent(ListFooterComponent)}
       </CompatView>
     );
-  }, [ListFooterComponent, ListFooterComponentStyle]);
+  }, [ListFooterComponent, ListFooterComponentStyle, invertedTransformStyle]);
 
   /**
    * Creates the empty state component when there's no data.
@@ -93,8 +101,21 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     if (!ListEmptyComponent || (data && data.length > 0)) {
       return null;
     }
-    return getValidComponent(ListEmptyComponent);
-  }, [ListEmptyComponent, data]);
+    const emptyContent = getValidComponent(ListEmptyComponent);
+    if (!invertedTransformStyle && !ListEmptyComponentStyle) {
+      return emptyContent;
+    }
+    return (
+      <CompatView style={[ListEmptyComponentStyle, invertedTransformStyle]}>
+        {emptyContent}
+      </CompatView>
+    );
+  }, [
+    ListEmptyComponent,
+    data,
+    invertedTransformStyle,
+    ListEmptyComponentStyle,
+  ]);
 
   /**
    * Creates the sticky header backdrop component.
@@ -105,32 +126,41 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     }
     return (
       <CompatView
-        style={{
-          position: "absolute",
-          inset: 0,
-          pointerEvents: "none",
-        }}
+        style={[
+          {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+          },
+          invertedTransformStyle,
+        ]}
       >
         {getValidComponent(stickyHeaderConfig?.backdropComponent)}
       </CompatView>
     );
-  }, [stickyHeaderConfig?.backdropComponent]);
+  }, [stickyHeaderConfig?.backdropComponent, invertedTransformStyle]);
 
   /**
    * Creates an animated scroll component based on the provided renderScrollComponent.
    * If no custom component is provided, uses the default CompatAnimatedScroller.
    */
   const CompatScrollView = useMemo(() => {
-    let scrollComponent = CompatAnimatedScroller;
-    if (typeof renderScrollComponent === "function") {
+    let scrollComponent: React.ComponentType<any> = CompatAnimatedScroller;
+    if (
+      typeof renderScrollComponent === "function" &&
+      !isComponentClass(renderScrollComponent)
+    ) {
       // Create a forwarded ref wrapper for the custom scroll component
       const ForwardedScrollComponent = React.forwardRef((_props, ref) =>
-        (renderScrollComponent as any)({ ..._props, ref } as any)
+        (renderScrollComponent as (...args: unknown[]) => React.ReactNode)({
+          ..._props,
+          ref,
+        })
       );
       ForwardedScrollComponent.displayName = "CustomScrollView";
-      scrollComponent = ForwardedScrollComponent as any;
+      scrollComponent = ForwardedScrollComponent as React.ComponentType<any>;
     } else if (renderScrollComponent) {
-      scrollComponent = renderScrollComponent;
+      scrollComponent = renderScrollComponent as React.ComponentType<any>;
     }
     // Wrap the scroll component with Animated.createAnimatedComponent
     return Animated.createAnimatedComponent(scrollComponent);

package/src/recyclerview/layout-managers/GridLayoutManager.ts

@@ -253,4 +253,17 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
     }
     return Math.max(i, 0);
   }
+
+  /**
+   * Returns whether the item is in the same row as the last item.
+   * Items in the same row share the same y-coordinate, regardless of column spans.
+   */
+  isInLastRow(index: number): boolean {
+    if (this.layouts.length === 0) return false;
+    const lastIndex = this.layouts.length - 1;
+    return (
+      index === lastIndex ||
+      this.layouts[index]?.y === this.layouts[lastIndex]?.y
+    );
+  }
 }

package/src/recyclerview/layout-managers/LayoutManager.ts

@@ -264,6 +264,20 @@ export abstract class RVLayoutManager {
     return this.layouts.length;
   }
 
+  /**
+   * Returns whether the item at the given index is in the last row of the layout.
+   * Used to suppress separators for all items in the last row, preventing
+   * height mismatch when the last data item has no separator.
+   *
+   * Base implementation returns false — only layouts that normalize heights
+   * across multiple items (e.g., grid) need to override this.
+   * @param index Index of the item
+   * @returns True if the item is in the last row
+   */
+  isInLastRow(index: number): boolean {
+    return false;
+  }
+
   /**
    * Abstract method to recompute layouts for items in the given range.
    * @param startIndex Starting index of items to recompute

package/src/recyclerview/layout-managers/MasonryLayoutManager.ts

@@ -320,4 +320,8 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
       }
     }
   }
+
+  // TODO: For masonry, the "last row" is the last item in each column.
+  // Override isInLastRow if ItemSeparatorComponent support is needed
+  // for masonry layouts.
 }

package/src/recyclerview/utils/componentUtils.ts

@@ -1,11 +1,31 @@
 import React from "react";
 
+type RenderableComponent =
+  | React.ComponentType
+  | React.ExoticComponent
+  | React.ReactElement
+  | null
+  | undefined;
+
+/**
+ * Returns true if the value is a React class component.
+ * Class components set `prototype.isReactComponent` per React convention,
+ * which distinguishes them from plain functions and render props.
+ */
+export const isComponentClass = (value: unknown): boolean =>
+  typeof value === "function" &&
+  Boolean(
+    (value as { prototype?: { isReactComponent?: unknown } }).prototype
+      ?.isReactComponent
+  );
+
 /**
  * Helper function to handle both React components and React elements.
  * This utility ensures proper rendering of components whether they are passed as
- * component types or pre-rendered elements.
+ * component types or pre-rendered elements. Supports function components, class
+ * components, React.memo, React.forwardRef, and pre-rendered elements.
  *
- * @param component - Can be a React component type, React element, null, or undefined
+ * @param component - Can be a React component type, exotic component, React element, null, or undefined
  * @returns A valid React element if the input is valid, null otherwise
  *
  * @example
@@ -17,12 +37,14 @@ import React from "react";
  * getValidComponent(<MyComponent />)
  */
 export const getValidComponent = (
-  component: React.ComponentType | React.ReactElement | null | undefined
+  component: RenderableComponent
 ): React.ReactElement | null => {
   if (React.isValidElement(component)) {
     return component;
-  } else if (typeof component === "function") {
-    return React.createElement(component);
+  } else if (component != null) {
+    // Cast needed: React.createElement's type overloads don't include ExoticComponent,
+    // but it handles memo/forwardRef/lazy correctly at runtime.
+    return React.createElement(component as React.ComponentType);
   }
   return null;
 };

package/src/recyclerview/utils/getInvertedTransformStyle.ts

@@ -0,0 +1,7 @@
+import { PlatformConfig } from "../../native/config/PlatformHelper";
+
+export function getInvertedTransformStyle(horizontal?: boolean | null) {
+  return horizontal
+    ? PlatformConfig.invertedTransformStyleHorizontal
+    : PlatformConfig.invertedTransformStyle;
+}

package/src/recyclerview/utils/measureLayout.ts

@@ -7,6 +7,11 @@ interface Layout {
   height: number;
 }
 
+interface Size {
+  width: number;
+  height: number;
+}
+
 /**
  * Measures the layout of a view relative to itselft.
  * Using measure wasn't returing accurate values but this workaround does.
@@ -89,14 +94,15 @@ export function roundOffPixel(value: number): number {
 }
 
 /**
- * Specific method for easier mocking
- * Measures the layout of parent of RecyclerView
- * Returns the x, y coordinates and dimensions of the view.
+ * Measures the size of the RecyclerView's outer container.
+ * Uses a self-relative measureLayout call to get width/height synchronously.
+ *
  * @param view - The React Native View component to measure
- * @returns An object containing x, y, width, and height measurements
+ * @returns An object containing width and height
  */
-export function measureParentSize(view: View): Layout {
-  return measureLayout(view, undefined);
+export function measureParentSize(view: View): Size {
+  const layout = measureLayout(view, undefined);
+  return { width: layout.width, height: layout.height };
 }
 
 /**

package/src/recyclerview/utils/measureLayout.web.ts

@@ -5,6 +5,11 @@ interface Layout {
   height: number;
 }
 
+interface Size {
+  width: number;
+  height: number;
+}
+
 /**
  * Gets scroll offsets from up to 3 parent elements
  */
@@ -43,12 +48,10 @@ export function roundOffPixel(value: number): number {
 }
 
 /**
- * Measures the layout of parent of RecyclerView
+ * Measures the size of the RecyclerView's outer container.
  */
-export function measureParentSize(view: Element): Layout {
+export function measureParentSize(view: Element): Size {
   return {
-    x: 0,
-    y: 0,
     width: view.clientWidth,
     height: view.clientHeight,
   };