@shopify/flash-list 2.0.0-alpha.1 → 2.0.0-alpha.11

package/src/recyclerview/RecyclerView.tsx

@@ -19,11 +19,14 @@ import {
   NativeSyntheticEvent,
 } from "react-native";
 
+import { FlashListRef } from "../FlashListRef";
+
 import { RVDimension } from "./layout-managers/LayoutManager";
 import {
   areDimensionsNotEqual,
-  measureLayout,
-  measureLayoutRelative,
+  measureFirstChildLayout,
+  measureItemLayout,
+  measureParentSize,
 } from "./utils/measureLayout";
 import {
   RecyclerViewContext,
@@ -46,6 +49,7 @@ import { useSecondaryProps } from "./hooks/useSecondaryProps";
 import { StickyHeaders, StickyHeaderRef } from "./components/StickyHeaders";
 import { ScrollAnchor, ScrollAnchorRef } from "./components/ScrollAnchor";
 import { useRecyclerViewController } from "./hooks/useRecyclerViewController";
+import { RenderTimeTracker } from "./helpers/RenderTimeTracker";
 
 /**
  * Main RecyclerView component that handles list rendering, scrolling, and item recycling.
@@ -53,7 +57,7 @@ import { useRecyclerViewController } from "./hooks/useRecyclerViewController";
  */
 const RecyclerViewComponent = <T,>(
   props: RecyclerViewProps<T>,
-  ref: React.Ref<any>
+  ref: React.Ref<FlashListRef<T>>
 ) => {
   // Destructure props and initialize refs
   const {
@@ -74,8 +78,6 @@ const RecyclerViewComponent = <T,>(
     ListFooterComponentStyle,
     ItemSeparatorComponent,
     renderScrollComponent,
-    onScroll,
-    disableRecycling,
     style,
     stickyHeaderIndices,
     maintainVisibleContentPosition,
@@ -83,10 +85,14 @@ const RecyclerViewComponent = <T,>(
     ...rest
   } = props;
 
+  const [renderTimeTracker] = useState(() => new RenderTimeTracker());
+
+  renderTimeTracker.startTracking();
+
   // Core refs for managing scroll view, internal view, and child container
   const scrollViewRef = useRef<CompatScroller>(null);
   const internalViewRef = useRef<CompatView>(null);
-  const childContainerViewRef = useRef<CompatView>(null);
+  const firstChildViewRef = useRef<CompatView>(null);
   const containerViewSizeRef = useRef<RVDimension | undefined>(undefined);
   const pendingChildIds = useRef<Set<string>>(new Set()).current;
 
@@ -108,14 +114,14 @@ const RecyclerViewComponent = <T,>(
   );
 
   // Initialize core RecyclerView manager and content offset management
-  const { recyclerViewManager } = useRecyclerViewManager(props);
-  const { applyContentOffset, applyInitialScrollIndex } =
+  const { recyclerViewManager, velocityTracker } =
+    useRecyclerViewManager(props);
+  const { applyContentOffset, applyInitialScrollIndex, handlerMethods } =
     useRecyclerViewController(
       recyclerViewManager,
       ref,
       scrollViewRef,
-      scrollAnchorRef,
-      props
+      scrollAnchorRef
     );
 
   // Initialize view holder collection ref
@@ -125,40 +131,44 @@ const RecyclerViewComponent = <T,>(
   useOnListLoad(recyclerViewManager, onLoad);
 
   // Hook to detect when scrolling reaches list bounds
-  const { checkBounds } = useBoundDetection(
-    recyclerViewManager,
-    props,
-    scrollViewRef
-  );
+  const { checkBounds } = useBoundDetection(recyclerViewManager, scrollViewRef);
+
+  const isHorizontalRTL = I18nManager.isRTL && horizontal;
 
   /**
    * Initialize the RecyclerView by measuring and setting up the window size
    * This effect runs when the component mounts or when layout changes
    */
   useLayoutEffect(() => {
-    if (internalViewRef.current && childContainerViewRef.current) {
+    if (internalViewRef.current && firstChildViewRef.current) {
       // Measure the outer and inner container layouts
-      const outerViewLayout = measureLayout(internalViewRef.current, undefined);
-      const childViewLayout = measureLayoutRelative(
-        childContainerViewRef.current,
-        internalViewRef.current,
-        undefined
+      const outerViewLayout = measureParentSize(internalViewRef.current);
+      const firstChildViewLayout = measureFirstChildLayout(
+        firstChildViewRef.current,
+        internalViewRef.current
       );
 
       containerViewSizeRef.current = outerViewLayout;
 
       // Calculate offset of first item
       const firstItemOffset = horizontal
-        ? childViewLayout.x - outerViewLayout.x
-        : childViewLayout.y - outerViewLayout.y;
+        ? firstChildViewLayout.x - outerViewLayout.x
+        : firstChildViewLayout.y - outerViewLayout.y;
 
       // Update the RecyclerView manager with window dimensions
       recyclerViewManager.updateLayoutParams(
         {
-          width: horizontal ? outerViewLayout.width : childViewLayout.width,
-          height: horizontal ? childViewLayout.height : outerViewLayout.height,
+          width: horizontal
+            ? outerViewLayout.width
+            : firstChildViewLayout.width,
+          height: horizontal
+            ? firstChildViewLayout.height
+            : outerViewLayout.height,
         },
-        firstItemOffset
+        isHorizontalRTL && recyclerViewManager.hasLayout()
+          ? firstItemOffset -
+              recyclerViewManager.getChildContainerDimensions().width
+          : firstItemOffset
       );
     }
   });
@@ -167,18 +177,19 @@ const RecyclerViewComponent = <T,>(
    * Effect to handle layout updates for list items
    * This ensures proper positioning and recycling of items
    */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useLayoutEffect(() => {
     if (pendingChildIds.size > 0) {
       return;
     }
     const layoutInfo = Array.from(refHolder, ([index, viewHolderRef]) => {
-      const layout = measureLayout(
+      const layout = measureItemLayout(
         viewHolderRef.current!,
         recyclerViewManager.getLayout(index)
       );
 
-      //comapre height with stored layout
-      //const storedLayout = recyclerViewManager.getLayout(index);
+      // comapre height with stored layout
+      // const storedLayout = recyclerViewManager.getLayout(index);
       // if (
       //   storedLayout.height !== layout.height &&
       //   storedLayout.isHeightMeasured
@@ -199,8 +210,6 @@ const RecyclerViewComponent = <T,>(
       // Trigger re-render if layout modifications were made
       setRenderId((prev) => prev + 1);
     } else {
-      //console.log("commitLayout");
-      // TODO: reduce perf impact of commitLayout
       viewHolderCollectionRef.current?.commitLayout();
       applyContentOffset();
     }
@@ -211,30 +220,44 @@ const RecyclerViewComponent = <T,>(
    */
   const onScrollHandler = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      let velocity = event.nativeEvent.velocity;
+      if (recyclerViewManager.ignoreScrollEvents) {
+        return;
+      }
+
       let scrollOffset = horizontal
         ? event.nativeEvent.contentOffset.x
         : event.nativeEvent.contentOffset.y;
 
       // Handle RTL (Right-to-Left) layout adjustments
-      if (I18nManager.isRTL && horizontal) {
+      if (isHorizontalRTL) {
         scrollOffset = adjustOffsetForRTL(
           scrollOffset,
           event.nativeEvent.contentSize.width,
           event.nativeEvent.layoutMeasurement.width
         );
-        if (velocity) {
-          velocity = {
-            x: -velocity.x,
-            y: velocity.y,
-          };
-        }
       }
 
-      // Update scroll position and trigger re-render if needed
-      if (recyclerViewManager.updateScrollOffset(scrollOffset, velocity)) {
-        setRenderId((prev) => prev + 1);
-      }
+      velocityTracker.computeVelocity(
+        scrollOffset,
+        recyclerViewManager.getAbsoluteLastScrollOffset(),
+        Boolean(horizontal),
+        (velocity, isMomentumEnd) => {
+          if (recyclerViewManager.ignoreScrollEvents) {
+            return;
+          }
+
+          if (isMomentumEnd) {
+            if (!recyclerViewManager.isOffsetProjectionEnabled) {
+              return;
+            }
+            recyclerViewManager.resetVelocityCompute();
+          }
+          // Update scroll position and trigger re-render if needed
+          if (recyclerViewManager.updateScrollOffset(scrollOffset, velocity)) {
+            setRenderId((prev) => prev + 1);
+          }
+        }
+      );
 
       // Update sticky headers and check bounds
       stickyHeaderRef.current?.reportScrollEvent(event.nativeEvent);
@@ -245,22 +268,31 @@ const RecyclerViewComponent = <T,>(
       recyclerViewManager.computeItemViewability();
 
       // Call user-provided onScroll handler
-      onScroll?.(event);
+      recyclerViewManager.props.onScroll?.(event);
     },
-    [horizontal, recyclerViewManager]
+    [
+      checkBounds,
+      horizontal,
+      isHorizontalRTL,
+      recyclerViewManager,
+      velocityTracker,
+    ]
   );
 
   // Create context for child components
-  const recyclerViewContext: RecyclerViewContext = useMemo(() => {
+  const recyclerViewContext: RecyclerViewContext<T> = useMemo(() => {
     return {
       layout: () => {
         setLayoutTreeId((prev) => prev + 1);
       },
       getRef: () => {
-        return ref;
+        if (recyclerViewManager.isDisposed) {
+          return null;
+        }
+        return handlerMethods;
       },
       getScrollViewRef: () => {
-        return scrollViewRef;
+        return scrollViewRef.current;
       },
       markChildLayoutAsPending: (id: string) => {
         pendingChildIds.add(id);
@@ -272,7 +304,7 @@ const RecyclerViewComponent = <T,>(
         }
       },
     };
-  }, [setLayoutTreeId]);
+  }, [handlerMethods, pendingChildIds, recyclerViewManager, setLayoutTreeId]);
 
   const parentRecyclerViewContext = useRecyclerViewContext();
   const recyclerViewId = useId();
@@ -307,7 +339,7 @@ const RecyclerViewComponent = <T,>(
         recyclerViewContext.layout();
       }
     },
-    [recyclerViewManager]
+    [recyclerViewContext, recyclerViewManager]
   );
 
   // Get secondary props and components
@@ -347,7 +379,14 @@ const RecyclerViewComponent = <T,>(
       );
     }
     return null;
-  }, [data, stickyHeaderIndices, renderItem, extraData]);
+  }, [
+    data,
+    stickyHeaderIndices,
+    renderItem,
+    scrollY,
+    recyclerViewManager,
+    extraData,
+  ]);
 
   // Set up scroll event handling with animation support for sticky headers
   const animatedEvent = useMemo(() => {
@@ -358,7 +397,7 @@ const RecyclerViewComponent = <T,>(
       );
     }
     return onScrollHandler;
-  }, [onScrollHandler, stickyHeaders]);
+  }, [onScrollHandler, scrollY, stickyHeaders]);
 
   const maintainVisibleContentPositionInternal = useMemo(() => {
     if (maintainVisibleContentPosition?.disabled || horizontal) {
@@ -369,7 +408,7 @@ const RecyclerViewComponent = <T,>(
         minIndexForVisible: 0,
       };
     }
-  }, [maintainVisibleContentPosition]);
+  }, [horizontal, maintainVisibleContentPosition]);
 
   const shouldRenderFromBottom =
     maintainVisibleContentPositionInternal?.startRenderingFromBottom ?? false;
@@ -393,18 +432,22 @@ const RecyclerViewComponent = <T,>(
           width: horizontal ? 0 : undefined,
           minHeight: shouldRenderFromBottom ? adjustmentMinHeight : undefined,
         }}
-        ref={childContainerViewRef}
+        ref={firstChildViewRef}
       />
     );
   }, [horizontal, shouldRenderFromBottom, adjustmentMinHeight]);
 
-  //console.log("render");
+  // console.log("render", recyclerViewManager.getRenderStack());
 
   // Render the main RecyclerView structure
   return (
     <RecyclerViewContextProvider value={recyclerViewContext}>
       <CompatView
-        style={{ flex: horizontal ? undefined : 1, ...style }}
+        style={{
+          flex: horizontal ? undefined : 1,
+          overflow: "hidden",
+          ...style,
+        }}
         ref={internalViewRef}
         collapsable={false}
         onLayout={(event) => {
@@ -433,7 +476,6 @@ const RecyclerViewComponent = <T,>(
           horizontal={horizontal}
           ref={scrollViewRef}
           onScroll={animatedEvent}
-          // TODO: evaluate perf
           maintainVisibleContentPosition={
             maintainVisibleContentPositionInternal
           }
@@ -444,8 +486,9 @@ const RecyclerViewComponent = <T,>(
           {maintainVisibleContentPositionInternal && (
             <ScrollAnchor scrollAnchorRef={scrollAnchorRef} />
           )}
+          {isHorizontalRTL && viewToMeasureBoundedSize}
           {renderHeader}
-          {viewToMeasureBoundedSize}
+          {!isHorizontalRTL && viewToMeasureBoundedSize}
           {/* Main list content */}
           <ViewHolderCollection
             viewHolderCollectionRef={viewHolderCollectionRef}
@@ -465,10 +508,14 @@ const RecyclerViewComponent = <T,>(
               onCommitLayoutEffect?.();
             }}
             onCommitEffect={() => {
+              renderTimeTracker.markRenderComplete();
+              recyclerViewManager.updateAverageRenderTime(
+                renderTimeTracker.getAverageRenderTime()
+              );
               applyInitialScrollIndex();
               checkBounds();
               recyclerViewManager.computeItemViewability();
-              recyclerViewManager.disableRecycling = Boolean(disableRecycling);
+              recyclerViewManager.disableRecycling(false);
             }}
             CellRendererComponent={CellRendererComponent}
             ItemSeparatorComponent={ItemSeparatorComponent}
@@ -487,9 +534,12 @@ const RecyclerViewComponent = <T,>(
   );
 };
 
+// Set displayName for the inner component
+RecyclerViewComponent.displayName = "FlashList";
+
 // Type definition for the RecyclerView component
 type RecyclerViewType = <T>(
-  props: RecyclerViewProps<T> & { ref?: React.Ref<any> }
+  props: RecyclerViewProps<T> & { ref?: React.Ref<FlashListRef<T>> }
 ) => React.JSX.Element;
 
 // Create and export the memoized, forwarded ref component

package/src/recyclerview/RecyclerViewContextProvider.ts

@@ -1,19 +1,26 @@
 import { createContext, useContext } from "react";
+
+import { FlashListRef } from "../FlashListRef";
+
 import { CompatScroller } from "./components/CompatScroller";
 
-export interface RecyclerViewContext {
+export interface RecyclerViewContext<T> {
   layout: () => void;
-  getRef: () => React.Ref<any>;
-  getScrollViewRef: () => React.RefObject<CompatScroller | null>;
+  getRef: () => FlashListRef<T> | null;
+  getScrollViewRef: () => CompatScroller | null;
   markChildLayoutAsPending: (id: string) => void;
   unmarkChildLayoutAsPending: (id: string) => void;
 }
 
 const RecyclerViewContextInstance = createContext<
-  RecyclerViewContext | undefined
+  RecyclerViewContext<unknown> | undefined
 >(undefined);
 
 export const RecyclerViewContextProvider = RecyclerViewContextInstance.Provider;
-export function useRecyclerViewContext() {
-  return useContext(RecyclerViewContextInstance);
+export function useRecyclerViewContext<T>():
+  | RecyclerViewContext<T>
+  | undefined {
+  return useContext(RecyclerViewContextInstance) as
+    | RecyclerViewContext<T>
+    | undefined;
 }