@shopify/flash-list 2.2.1 → 2.2.3

package/src/recyclerview/ViewHolderCollection.tsx

@@ -54,6 +54,8 @@ 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;
 }
 
 /**
@@ -90,6 +92,7 @@ export const ViewHolderCollection = <TItem,>(
     getAdjustmentMargin,
     currentStickyIndex,
     hideStickyHeaderRelatedCell,
+    isInLastRow,
   } = props;
 
   const [renderId, setRenderId] = React.useState(0);
@@ -171,9 +174,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

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,7 +2,7 @@ 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";
 
@@ -121,16 +121,22 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
    * 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

@@ -182,6 +182,10 @@ export abstract class RVLayoutManager {
       this.layouts.length = totalItemCount;
       this.spanTracker.length = totalItemCount;
       minRecomputeIndex = totalItemCount - 1; // <0 gets skipped so it's safe to set to totalItemCount - 1
+      // layoutInfo may contain stale indices from ViewHolders that were rendered
+      // before the data shrunk. Filter out any indices that are now out of bounds.
+      // eslint-disable-next-line no-param-reassign
+      layoutInfo = layoutInfo.filter((info) => info.index < totalItemCount);
     }
     // update average windows
     minRecomputeIndex = Math.min(
@@ -260,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/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,
   };

package/src/recyclerview/viewability/ViewabilityManager.ts

@@ -89,12 +89,10 @@ export default class ViewabilityManager<T> {
     });
   };
 
-  public recomputeViewableItems = () => {
+  public clearLastReportedViewableIndices = () => {
     this.viewabilityHelpers.forEach((viewabilityHelper) =>
       viewabilityHelper.clearLastReportedViewableIndices()
     );
-
-    this.updateViewableItems();
   };
 
   /**

package/src/utils/AverageWindow.ts

@@ -33,9 +33,11 @@ export class AverageWindow {
 
     this.inputValues[target] = value;
 
-    this.currentAverage =
+    this.currentAverage = Math.max(
+      0,
       this.currentAverage * (this.currentCount / newCount) +
-      (value - (oldValue ?? 0)) / newCount;
+        (value - (oldValue ?? 0)) / newCount
+    );
 
     this.currentCount = newCount;
   }