@shopify/flash-list 2.2.3 → 2.3.1

package/src/recyclerview/ViewHolderCollection.tsx

@@ -56,6 +56,8 @@ export interface ViewHolderCollectionProps<TItem> {
   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"];
 }
 
 /**
@@ -93,6 +95,7 @@ export const ViewHolderCollection = <TItem,>(
     currentStickyIndex,
     hideStickyHeaderRelatedCell,
     isInLastRow,
+    inverted,
   } = props;
 
   const [renderId, setRenderId] = React.useState(0);
@@ -202,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

@@ -84,6 +84,14 @@ export function useBoundDetection<T>(
         (isHorizontal ? contentSize.width : contentSize.height) +
         recyclerViewManager.firstItemOffset;
 
+      // Skip bound detection if the window has no measurable size.
+      // This can happen when the list is mounted off-screen (e.g., in a
+      // background tab) and all measurements come back as 0, which would
+      // incorrectly trigger onEndReached/onStartReached.
+      if (visibleLength <= 0) {
+        return;
+      }
+
       // Check if we're near the end of the list
       if (onEndReached) {
         const onEndReachedThreshold = onEndReachedThresholdProp ?? 0.5;

package/src/recyclerview/hooks/useRecyclerViewController.tsx

@@ -136,6 +136,16 @@ export function useRecyclerViewController<T>(
       const hasDataChanged = currentDataLength !== lastDataLengthRef.current;
       // If we have a tracked first visible item, maintain its position
       if (firstVisibleItemKey.current) {
+        // Try engaged indices first (fast O(n) over rendered items), then
+        // fall back to a full data search. The fallback is needed when:
+        // 1. Data just changed (hasDataChanged) — prepended items shift
+        //    the anchor to a new index not yet in the engaged window.
+        // 2. A previous correction is still settling (ignoreScrollEvents
+        //    is true) — after the first correction pass, unmeasured item
+        //    heights may converge and push the anchor item outside the
+        //    engaged window. ignoreScrollEvents stays true for 100ms
+        //    after each correction, giving subsequent layout passes a
+        //    chance to refine the scroll position.
         const currentIndexOfFirstVisibleItem =
           recyclerViewManager
             .getEngagedIndices()
@@ -144,7 +154,7 @@ export function useRecyclerViewController<T>(
                 recyclerViewManager.getDataKey(index) ===
                 firstVisibleItemKey.current
             ) ??
-          (hasDataChanged
+          (hasDataChanged || recyclerViewManager.ignoreScrollEvents
             ? data?.findIndex(
                 (item, index) =>
                   recyclerViewManager.getDataKey(index) ===

package/src/recyclerview/hooks/useSecondaryProps.tsx

@@ -5,6 +5,7 @@ import { RecyclerViewProps } from "../RecyclerViewProps";
 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,16 +126,19 @@ 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.

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;
+}