@shopify/flash-list 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/recyclerview/hooks/useRecyclerViewManager.ts

@@ -2,15 +2,20 @@ import { useEffect, useMemo, useState } from "react";
 
 import { RecyclerViewProps } from "../RecyclerViewProps";
 import { RecyclerViewManager } from "../RecyclerViewManager";
+import { VelocityTracker } from "../helpers/VelocityTracker";
 
 export const useRecyclerViewManager = <T>(props: RecyclerViewProps<T>) => {
   const [recyclerViewManager] = useState<RecyclerViewManager<T>>(
     () => new RecyclerViewManager(props)
   );
+  const [velocityTracker] = useState(() => new VelocityTracker());
+
   const { data } = props;
 
   useMemo(() => {
     recyclerViewManager.updateProps(props);
+    // used to update props so rule can be disabled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props]);
 
   /**
@@ -18,13 +23,20 @@ export const useRecyclerViewManager = <T>(props: RecyclerViewProps<T>) => {
    */
   useMemo(() => {
     recyclerViewManager.processDataUpdate();
+    // used to process data update so rule can be disabled
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data]);
 
   useEffect(() => {
+    recyclerViewManager.restoreIfNeeded();
+
     return () => {
       recyclerViewManager.dispose();
+      velocityTracker.cleanUp();
     };
+    // Used to perform cleanup on unmount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return { recyclerViewManager };
+  return { recyclerViewManager, velocityTracker };
 };

package/src/recyclerview/hooks/useRecyclingState.ts

@@ -1,6 +1,10 @@
-import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 
-import { useLayoutState } from "./useLayoutState";
+import { LayoutStateSetter, useLayoutState } from "./useLayoutState";
+
+export type RecyclingStateSetter<T> = LayoutStateSetter<T>;
+
+export type RecyclingStateInitialValue<T> = T | (() => T);
 
 /**
  * A custom hook that provides state management with automatic reset functionality.
@@ -16,10 +20,10 @@ import { useLayoutState } from "./useLayoutState";
  *   - A setState function that works like useState's setState
  */
 export function useRecyclingState<T>(
-  initialState: T | (() => T),
+  initialState: RecyclingStateInitialValue<T>,
   deps: React.DependencyList,
   onReset?: () => void
-): [T, Dispatch<SetStateAction<T>>] {
+): [T, RecyclingStateSetter<T>] {
   // Store the current state value in a ref to persist between renders
   const valueStore = useRef<T>();
   // Use layoutState to trigger re-renders when state changes
@@ -42,8 +46,8 @@ export function useRecyclingState<T>(
    * Proxy setState function that updates the stored value and triggers a re-render.
    * Only triggers a re-render if the new value is different from the current value.
    */
-  const setStateProxy = useCallback(
-    (newValue: T | ((prevValue: T) => T)) => {
+  const setStateProxy: RecyclingStateSetter<T> = useCallback(
+    (newValue, skipParentLayout) => {
       // Calculate next state value from function or direct value
       const nextState =
         typeof newValue === "function"
@@ -53,7 +57,7 @@ export function useRecyclingState<T>(
       // Only update and trigger re-render if value has changed
       if (nextState !== valueStore.current) {
         valueStore.current = nextState;
-        setCounter((prev) => prev + 1);
+        setCounter((prev) => prev + 1, skipParentLayout);
       }
     },
     [setCounter]

package/src/recyclerview/hooks/useSecondaryProps.tsx

@@ -1,10 +1,10 @@
 import { Animated, RefreshControl } from "react-native";
+import React, { useMemo } from "react";
+
 import { RecyclerViewProps } from "../RecyclerViewProps";
-import { useMemo } from "react";
 import { getValidComponent } from "../utils/componentUtils";
 import { CompatView } from "../components/CompatView";
 import { CompatAnimatedScroller } from "../components/CompatScroller";
-import React from "react";
 
 /**
  * Hook that manages secondary props and components for the RecyclerView.
@@ -34,13 +34,16 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     progressViewOffset,
     onRefresh,
     data,
+    refreshControl: customRefreshControl,
   } = props;
 
   /**
    * Creates the refresh control component if onRefresh is provided.
    */
   const refreshControl = useMemo(() => {
-    if (onRefresh) {
+    if (customRefreshControl) {
+      return customRefreshControl;
+    } else if (onRefresh) {
       return (
         <RefreshControl
           refreshing={Boolean(refreshing)}
@@ -50,7 +53,7 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
       );
     }
     return undefined;
-  }, [onRefresh, refreshing, progressViewOffset]);
+  }, [onRefresh, refreshing, progressViewOffset, customRefreshControl]);
 
   /**
    * Creates the header component with optional styling.
@@ -99,9 +102,11 @@ export function useSecondaryProps<T>(props: RecyclerViewProps<T>) {
     let scrollComponent = CompatAnimatedScroller;
     if (typeof renderScrollComponent === "function") {
       // Create a forwarded ref wrapper for the custom scroll component
-      scrollComponent = React.forwardRef((props, ref) =>
-        (renderScrollComponent as any)({ ...props, ref } as any)
-      ) as any;
+      const ForwardedScrollComponent = React.forwardRef((_props, ref) =>
+        (renderScrollComponent as any)({ ..._props, ref } as any)
+      );
+      ForwardedScrollComponent.displayName = "CustomScrollView";
+      scrollComponent = ForwardedScrollComponent as any;
     } else if (renderScrollComponent) {
       scrollComponent = renderScrollComponent;
     }

package/src/recyclerview/hooks/useUnmountAwareCallbacks.ts

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Hook that provides a setTimeout which is aware of component unmount state.
+ * Any timeouts created with this hook will be automatically cleared when the component unmounts.
+ */
+export function useUnmountAwareTimeout() {
+  // Store active timeout IDs in a Set for more efficient add/remove operations
+  const [timeoutIds] = useState<Set<NodeJS.Timeout>>(() => new Set());
+
+  // Clear all timeouts on unmount
+  useEffect(() => {
+    return () => {
+      timeoutIds.forEach((id) => global.clearTimeout(id));
+      timeoutIds.clear();
+    };
+  }, [timeoutIds]);
+
+  // Create a safe setTimeout that will be cleared on unmount
+  const setTimeout = useCallback(
+    (callback: () => void, delay: number): void => {
+      const id = global.setTimeout(() => {
+        // Remove this timeout ID from the tracking set
+        timeoutIds.delete(id);
+        callback();
+      }, delay);
+
+      // Track this timeout ID
+      timeoutIds.add(id);
+    },
+    [timeoutIds]
+  );
+
+  return {
+    setTimeout,
+  };
+}
+
+/**
+ * Hook that provides a requestAnimationFrame which is aware of component unmount state.
+ * Any animation frames requested with this hook will be automatically canceled when the component unmounts.
+ */
+export function useUnmountAwareAnimationFrame() {
+  // Store active animation frame request IDs in a Set for more efficient add/remove operations
+  const [requestIds] = useState<Set<number>>(() => new Set());
+
+  // Cancel all animation frame requests on unmount
+  useEffect(() => {
+    return () => {
+      requestIds.forEach((id) => cancelAnimationFrame(id));
+      requestIds.clear();
+    };
+  }, [requestIds]);
+
+  // Create a safe requestAnimationFrame that will be canceled on unmount
+  const requestAnimationFrame = useCallback(
+    (callback: FrameRequestCallback): void => {
+      const id = global.requestAnimationFrame((timestamp) => {
+        // Remove this request ID from the tracking set
+        requestIds.delete(id);
+        callback(timestamp);
+      });
+
+      // Track this request ID
+      requestIds.add(id);
+    },
+    [requestIds]
+  );
+
+  return {
+    requestAnimationFrame,
+  };
+}

package/src/recyclerview/hooks/useUnmountFlag.ts

@@ -16,6 +16,7 @@ export const useUnmountFlag = () => {
   // Use layoutEffect to set up cleanup on unmount
   // This ensures the flag is set before any other cleanup effects run
   useLayoutEffect(() => {
+    isUnmounted.current = false;
     // Cleanup function that runs when the component unmounts
     return () => {
       isUnmounted.current = true;

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

@@ -14,6 +14,9 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
   /** The width of the bounded area for the grid */
   private boundedSize: number;
 
+  /** If there's a span change for grid layout, we need to recompute all the widths */
+  private fullRelayoutRequired = false;
+
   constructor(params: LayoutParams, previousLayoutManager?: RVLayoutManager) {
     super(params, previousLayoutManager);
     this.boundedSize = params.windowSize.width;
@@ -32,11 +35,8 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
     ) {
       this.boundedSize = params.windowSize.width;
       if (this.layouts.length > 0) {
-        //update all widths
-        for (let i = 0; i < this.layouts.length; i++) {
-          this.layouts[i].width = this.getWidth(i);
-        }
-        //console.log("-----> recomputeLayouts");
+        // update all widths
+        this.updateAllWidths();
 
         this.recomputeLayouts(0, this.layouts.length - 1);
         this.requiresRepaint = true;
@@ -57,6 +57,13 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
       layout.isHeightMeasured = true;
       layout.isWidthMeasured = true;
     }
+
+    // TODO: Can be optimized
+    if (this.fullRelayoutRequired) {
+      this.updateAllWidths();
+      this.fullRelayoutRequired = false;
+      return 0;
+    }
   }
 
   /**
@@ -72,18 +79,24 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
     layout.enforcedWidth = true;
   }
 
+  /**
+   * Handles span change for an item.
+   * @param index Index of the item
+   */
+  handleSpanChange(index: number) {
+    this.fullRelayoutRequired = true;
+  }
+
   /**
    * Returns the total size of the layout area.
    * @returns RVDimension containing width and height of the layout
    */
   getLayoutSize(): RVDimension {
     if (this.layouts.length === 0) return { width: 0, height: 0 };
-    const lastRowTallestItem = this.processAndReturnTallestItemInRow(
-      this.layouts.length - 1
-    );
+    const totalHeight = this.computeTotalHeightTillRow(this.layouts.length - 1);
     return {
       width: this.boundedSize,
-      height: lastRowTallestItem.y + lastRowTallestItem.height,
+      height: totalHeight,
     };
   }
 
@@ -93,7 +106,9 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
    * @param endIndex Ending index of items to recompute
    */
   recomputeLayouts(startIndex: number, endIndex: number): void {
-    const newStartIndex = this.locateFirstNeighbourIndex(startIndex);
+    const newStartIndex = this.locateFirstIndexInRow(
+      Math.max(0, startIndex - 1)
+    );
     const startVal = this.getLayout(newStartIndex);
 
     let startX = startVal.x;
@@ -102,7 +117,7 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
     for (let i = newStartIndex; i <= endIndex; i++) {
       const layout = this.getLayout(i);
       if (!this.checkBounds(startX, layout.width)) {
-        const tallestItem = this.processAndReturnTallestItemInRow(i);
+        const tallestItem = this.processAndReturnTallestItemInRow(i - 1);
         startY = tallestItem.y + tallestItem.height;
         startX = 0;
       }
@@ -111,6 +126,9 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
       layout.y = startY;
       startX += layout.width;
     }
+    if (endIndex === this.layouts.length - 1) {
+      this.processAndReturnTallestItemInRow(endIndex);
+    }
   }
 
   /**
@@ -119,26 +137,23 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
    * @returns Width of the item
    */
   private getWidth(index: number): number {
-    const span = this.getSpanSizeInfo(index).span ?? 1;
-    return (this.boundedSize / this.maxColumns) * span;
+    return (this.boundedSize / this.maxColumns) * this.getSpan(index);
   }
 
   /**
    * Processes items in a row and returns the tallest item.
    * Also handles height normalization for items in the same row.
    * Tallest item per row helps in forcing tallest items height on neighbouring items.
-   * @param index Index of the last item in the row
+   * @param endIndex Index of the last item in the row
    * @returns The tallest item in the row
    */
-  private processAndReturnTallestItemInRow(index: number): RVLayout {
-    const startIndex = this.locateFirstNeighbourIndex(index);
-    const y = this.layouts[startIndex].y;
+  private processAndReturnTallestItemInRow(endIndex: number): RVLayout {
+    const startIndex = this.locateFirstIndexInRow(endIndex);
     let tallestItem: RVLayout | undefined;
     let maxHeight = 0;
     let i = startIndex;
     let isMeasured = false;
-    // TODO: Manage precision problems
-    while (Math.ceil(this.layouts[i].y) === Math.ceil(y)) {
+    while (i <= endIndex) {
       const layout = this.layouts[i];
       isMeasured = isMeasured || Boolean(layout.isHeightMeasured);
       maxHeight = Math.max(maxHeight, layout.height);
@@ -154,7 +169,9 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
         break;
       }
     }
-
+    if (!tallestItem && maxHeight > 0) {
+      maxHeight = Number.MAX_SAFE_INTEGER;
+    }
     tallestItem = tallestItem ?? this.layouts[startIndex];
 
     if (!isMeasured) {
@@ -168,8 +185,7 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
         this.requiresRepaint = true;
       }
       i = startIndex;
-      // TODO: Manage precision problems
-      while (Math.ceil(this.layouts[i].y) === Math.ceil(y)) {
+      while (i <= endIndex) {
         this.layouts[i].minHeight = targetHeight;
         if (targetHeight > 0) {
           this.layouts[i].height = targetHeight;
@@ -184,6 +200,32 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
     return tallestItem;
   }
 
+  /**
+   * Computes the total height of the layout.
+   * @param endIndex Index of the last item in the row
+   * @returns Total height of the layout
+   */
+  private computeTotalHeightTillRow(endIndex: number): number {
+    const startIndex = this.locateFirstIndexInRow(endIndex);
+    const y = this.layouts[startIndex].y;
+    let maxHeight = 0;
+    let i = startIndex;
+    while (i <= endIndex) {
+      maxHeight = Math.max(maxHeight, this.layouts[i].height);
+      i++;
+      if (i >= this.layouts.length) {
+        break;
+      }
+    }
+    return y + maxHeight;
+  }
+
+  private updateAllWidths() {
+    for (let i = 0; i < this.layouts.length; i++) {
+      this.layouts[i].width = this.getWidth(i);
+    }
+  }
+
   /**
    * Checks if an item can fit within the bounded width.
    * @param itemX Starting X position of the item
@@ -191,20 +233,19 @@ export class RVGridLayoutManagerImpl extends RVLayoutManager {
    * @returns True if the item fits within bounds
    */
   private checkBounds(itemX: number, width: number): boolean {
-    // TODO: Manage precision problems
     return itemX + width <= this.boundedSize + 0.9;
   }
 
   /**
    * Locates the index of the first item in the current row.
-   * @param startIndex Index to start searching from
+   * @param itemIndex Index to start searching from
    * @returns Index of the first item in the row
    */
-  private locateFirstNeighbourIndex(startIndex: number): number {
-    if (startIndex === 0) {
+  private locateFirstIndexInRow(itemIndex: number): number {
+    if (itemIndex === 0) {
       return 0;
     }
-    let i = startIndex - 1;
+    let i = itemIndex;
     for (; i >= 0; i--) {
       if (this.layouts[i].x === 0) {
         break;