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

package/src/recyclerview/RecyclerViewManager.ts

@@ -1,89 +1,100 @@
+import ViewabilityManager from "../viewability/ViewabilityManager";
+
 import { ConsecutiveNumbers } from "./helpers/ConsecutiveNumbers";
 import { RVGridLayoutManagerImpl } from "./layout-managers/GridLayoutManager";
 import {
+  LayoutParams,
   RVDimension,
   RVLayoutInfo,
   RVLayoutManager,
+  SpanSizeInfo,
 } from "./layout-managers/LayoutManager";
 import { RVLinearLayoutManagerImpl } from "./layout-managers/LinearLayoutManager";
 import { RVMasonryLayoutManagerImpl } from "./layout-managers/MasonryLayoutManager";
-import { RecycleKeyManagerImpl, RecycleKeyManager } from "./RecycleKeyManager";
 import { RecyclerViewProps } from "./RecyclerViewProps";
 import {
   RVEngagedIndicesTracker,
   RVEngagedIndicesTrackerImpl,
   Velocity,
 } from "./helpers/EngagedIndicesTracker";
-import ViewabilityManager from "../viewability/ViewabilityManager";
-
-// Abstracts layout manager, key manager and viewability manager and generates render stack (progressively on load)
+import { RenderStackManager } from "./RenderStackManager";
+// Abstracts layout manager, render stack manager and viewability manager and generates render stack (progressively on load)
 export class RecyclerViewManager<T> {
-  private initialDrawBatchSize = 1;
+  private initialDrawBatchSize = 2;
   private engagedIndicesTracker: RVEngagedIndicesTracker;
-  private recycleKeyManager: RecycleKeyManager;
+  private renderStackManager: RenderStackManager;
   private layoutManager?: RVLayoutManager;
   // Map of index to key
-  private renderStack: Map<number, string> = new Map();
   private isFirstLayoutComplete = false;
   private hasRenderedProgressively = false;
-  private props: RecyclerViewProps<T>;
+  private progressiveRenderCount = 0;
+  private propsRef: RecyclerViewProps<T>;
   private itemViewabilityManager: ViewabilityManager<T>;
+  private _isDisposed = false;
+  private _isLayoutManagerDirty = false;
+  private _animationOptimizationsEnabled = false;
 
-  public disableRecycling = false;
   public firstItemOffset = 0;
+  public ignoreScrollEvents = false;
+
+  public get animationOptimizationsEnabled() {
+    return this._animationOptimizationsEnabled;
+  }
+
+  public set animationOptimizationsEnabled(value: boolean) {
+    this._animationOptimizationsEnabled = value;
+    this.renderStackManager.disableRecycling = value;
+  }
+
+  public get isOffsetProjectionEnabled() {
+    return this.engagedIndicesTracker.enableOffsetProjection;
+  }
+
+  public get isDisposed() {
+    return this._isDisposed;
+  }
+
+  public get numColumns() {
+    return this.propsRef.numColumns ?? 1;
+  }
 
   constructor(props: RecyclerViewProps<T>) {
-    this.props = props;
+    this.getDataKey = this.getDataKey.bind(this);
+    this.getItemType = this.getItemType.bind(this);
+    this.overrideItemLayout = this.overrideItemLayout.bind(this);
+    this.propsRef = props;
     this.engagedIndicesTracker = new RVEngagedIndicesTrackerImpl();
-    this.recycleKeyManager = new RecycleKeyManagerImpl();
+    this.renderStackManager = new RenderStackManager(
+      props.maxItemsInRecyclePool
+    );
     this.itemViewabilityManager = new ViewabilityManager<T>(this as any);
   }
 
   // updates render stack based on the engaged indices which are sorted. Recycles unused keys.
-  // TODO: Call getKey anyway if stableIds are present
   private updateRenderStack = (engagedIndices: ConsecutiveNumbers): void => {
-    //console.log("updateRenderStack", engagedIndices);
-    const newRenderStack = new Map<number, string>();
-    for (const [index, key] of this.renderStack) {
-      if (!engagedIndices.includes(index)) {
-        this.recycleKeyManager.recycleKey(key);
-      }
-    }
-    if (this.disableRecycling) {
-      this.recycleKeyManager.clearPool();
-    }
-    for (const index of engagedIndices) {
-      const newKey = this.recycleKeyManager.getKey(
-        this.getItemType(index),
-        this.getStableId(index),
-        this.renderStack.get(index)
-      );
-      newRenderStack.set(index, newKey);
-    }
+    this.renderStackManager.sync(
+      this.getDataKey,
+      this.getItemType,
+      engagedIndices,
+      this.getDataLength()
+    );
+  };
 
-    //  DANGER
-    for (const [index, key] of this.renderStack) {
-      if (
-        this.recycleKeyManager.hasKeyInPool(key) &&
-        !newRenderStack.has(index) &&
-        index < (this.props.data?.length ?? 0)
-      ) {
-        newRenderStack.set(index, key);
-      }
-    }
+  get props() {
+    return this.propsRef;
+  }
 
-    this.renderStack = newRenderStack;
-  };
+  setOffsetProjectionEnabled(value: boolean) {
+    this.engagedIndicesTracker.enableOffsetProjection = value;
+  }
 
   updateProps(props: RecyclerViewProps<T>) {
-    this.props = props;
+    this.propsRef = props;
     this.engagedIndicesTracker.drawDistance =
       props.drawDistance ?? this.engagedIndicesTracker.drawDistance;
-    if (this.props.drawDistance === 0) {
-      this.initialDrawBatchSize = 1;
-    } else {
-      this.initialDrawBatchSize = (props.numColumns ?? 1) * 2;
-    }
+    this.initialDrawBatchSize =
+      this.propsRef.overrideProps?.initialDrawBatchSize ??
+      this.initialDrawBatchSize;
   }
 
   /**
@@ -95,7 +106,7 @@ export class RecyclerViewManager<T> {
     offset: number,
     velocity?: Velocity
   ): ConsecutiveNumbers | undefined {
-    if (this.layoutManager) {
+    if (this.layoutManager && !this._isDisposed) {
       const engagedIndices = this.engagedIndicesTracker.updateScrollOffset(
         offset - this.firstItemOffset,
         velocity,
@@ -110,6 +121,10 @@ export class RecyclerViewManager<T> {
     return undefined;
   }
 
+  updateAverageRenderTime(time: number) {
+    this.engagedIndicesTracker.averageRenderTime = time;
+  }
+
   getIsFirstLayoutComplete() {
     return this.isFirstLayoutComplete;
   }
@@ -123,6 +138,17 @@ export class RecyclerViewManager<T> {
     return this.layoutManager.getLayout(index);
   }
 
+  tryGetLayout(index: number) {
+    if (
+      this.layoutManager &&
+      index >= 0 &&
+      index < this.layoutManager.getLayoutCount()
+    ) {
+      return this.layoutManager.getLayout(index);
+    }
+    return undefined;
+  }
+
   // Doesn't include header / foot etc
   getChildContainerDimensions() {
     if (!this.layoutManager) {
@@ -134,7 +160,7 @@ export class RecyclerViewManager<T> {
   }
 
   getRenderStack() {
-    return this.renderStack;
+    return this.renderStackManager.getRenderStack();
   }
 
   getWindowSize() {
@@ -151,51 +177,65 @@ export class RecyclerViewManager<T> {
     return this.engagedIndicesTracker.scrollOffset;
   }
 
+  getMaxScrollOffset() {
+    return Math.max(
+      0,
+      (this.propsRef.horizontal
+        ? this.getChildContainerDimensions().width
+        : this.getChildContainerDimensions().height) -
+        (this.propsRef.horizontal
+          ? this.getWindowSize().width
+          : this.getWindowSize().height) +
+        this.firstItemOffset
+    );
+  }
+
   // Doesn't include first item offset correction
   getAbsoluteLastScrollOffset() {
     return this.engagedIndicesTracker.scrollOffset + this.firstItemOffset;
   }
 
+  setScrollDirection(scrollDirection: "forward" | "backward") {
+    this.engagedIndicesTracker.setScrollDirection(scrollDirection);
+  }
+
+  resetVelocityCompute() {
+    this.engagedIndicesTracker.resetVelocityHistory();
+  }
+
   updateLayoutParams(windowSize: RVDimension, firstItemOffset: number) {
     this.firstItemOffset = firstItemOffset;
     const LayoutManagerClass = this.getLayoutManagerClass();
     if (
       this.layoutManager &&
       Boolean(this.layoutManager?.isHorizontal()) !==
-        Boolean(this.props.horizontal)
+        Boolean(this.propsRef.horizontal)
     ) {
       throw new Error(
         "Horizontal prop cannot be toggled, you can use a key on FlashList to recreate it."
       );
     }
+    if (this._isLayoutManagerDirty) {
+      this.layoutManager = undefined;
+      this._isLayoutManagerDirty = false;
+    }
+    const layoutManagerParams: LayoutParams = {
+      windowSize,
+      maxColumns: this.numColumns,
+      horizontal: Boolean(this.propsRef.horizontal),
+      optimizeItemArrangement: this.propsRef.optimizeItemArrangement ?? true,
+      overrideItemLayout: this.overrideItemLayout,
+      getItemType: this.getItemType,
+    };
     if (!(this.layoutManager instanceof LayoutManagerClass)) {
-      //console.log("-----> new LayoutManagerClass");
+      // console.log("-----> new LayoutManagerClass");
 
       this.layoutManager = new LayoutManagerClass(
-        {
-          windowSize,
-          maxColumns: this.props.numColumns ?? 1,
-          horizontal: !!this.props.horizontal,
-          optimizeItemArrangement: this.props.optimizeItemArrangement ?? true,
-          overrideItemLayout: (index, layout) => {
-            this.props?.overrideItemLayout?.(
-              layout,
-              this.props.data![index],
-              index,
-              this.props.numColumns ?? 1,
-              this.props.extraData
-            );
-          },
-        },
+        layoutManagerParams,
         this.layoutManager
       );
     } else {
-      this.layoutManager.updateLayoutParams({
-        windowSize,
-        maxColumns: this.props.numColumns ?? 1,
-        horizontal: !!this.props.horizontal,
-        optimizeItemArrangement: this.props.optimizeItemArrangement ?? true,
-      });
+      this.layoutManager.updateLayoutParams(layoutManagerParams);
     }
   }
 
@@ -203,7 +243,7 @@ export class RecyclerViewManager<T> {
     return this.layoutManager !== undefined;
   }
 
-  getVisibleIndices() {
+  computeVisibleIndices() {
     if (!this.layoutManager) {
       throw new Error(
         "LayoutManager is not initialized, visible indices are not unavailable"
@@ -230,7 +270,7 @@ export class RecyclerViewManager<T> {
       return true;
     }
     if (this.hasRenderedProgressively) {
-      return this.recomputeEngagedIndices() !== undefined; //TODO: Move to an effect as this can block paint for more than necessary
+      return this.recomputeEngagedIndices() !== undefined;
     } else {
       this.renderProgressively();
     }
@@ -241,9 +281,9 @@ export class RecyclerViewManager<T> {
     // Using higher buffer for masonry to avoid missing items
     this.itemViewabilityManager.shouldListenToVisibleIndices &&
       this.itemViewabilityManager.updateViewableItems(
-        this.props.masonry
+        this.propsRef.masonry
           ? this.engagedIndicesTracker.getEngagedIndices().toArray()
-          : this.getVisibleIndices().toArray()
+          : this.computeVisibleIndices().toArray()
       );
   }
 
@@ -257,8 +297,8 @@ export class RecyclerViewManager<T> {
 
   processDataUpdate() {
     if (this.hasLayout()) {
-      this.modifyChildrenLayout([], this.props.data?.length ?? 0);
-      if (!this.recomputeEngagedIndices()) {
+      this.modifyChildrenLayout([], this.propsRef.data?.length ?? 0);
+      if (this.hasRenderedProgressively && !this.recomputeEngagedIndices()) {
         // recomputeEngagedIndices will update the render stack if there are any changes in the engaged indices.
         // It's important to update render stack so that elements are assgined right keys incase items were deleted.
         this.updateRenderStack(this.engagedIndicesTracker.getEngagedIndices());
@@ -270,34 +310,64 @@ export class RecyclerViewManager<T> {
     return this.updateScrollOffset(this.getAbsoluteLastScrollOffset());
   }
 
+  restoreIfNeeded() {
+    if (this._isDisposed) {
+      this._isDisposed = false;
+    }
+  }
+
   dispose() {
+    this._isDisposed = true;
     this.itemViewabilityManager.dispose();
   }
 
+  markLayoutManagerDirty() {
+    this._isLayoutManagerDirty = true;
+  }
+
   getInitialScrollIndex() {
     return (
-      this.props.initialScrollIndex ??
-      (this.props.maintainVisibleContentPosition?.startRenderingFromBottom
+      this.propsRef.initialScrollIndex ??
+      (this.propsRef.maintainVisibleContentPosition?.startRenderingFromBottom
         ? this.getDataLength() - 1
         : undefined)
     );
   }
 
+  shouldMaintainVisibleContentPosition() {
+    // Return true if maintainVisibleContentPosition is enabled and not horizontal
+    return (
+      !this.propsRef.maintainVisibleContentPosition?.disabled &&
+      !this.propsRef.horizontal
+    );
+  }
+
   getDataLength() {
-    return this.props.data?.length ?? 0;
+    return this.propsRef.data?.length ?? 0;
+  }
+
+  hasStableDataKeys() {
+    return Boolean(this.propsRef.keyExtractor);
+  }
+
+  getDataKey(index: number): string {
+    return (
+      this.propsRef.keyExtractor?.(this.propsRef.data![index], index) ??
+      index.toString()
+    );
   }
 
   private getLayoutManagerClass() {
     // throw errors for incompatible props
-    if (this.props.masonry && this.props.horizontal) {
+    if (this.propsRef.masonry && this.propsRef.horizontal) {
       throw new Error("Masonry and horizontal props are incompatible");
     }
-    if ((this.props.numColumns ?? 1) > 1 && this.props.horizontal) {
+    if (this.numColumns > 1 && this.propsRef.horizontal) {
       throw new Error("numColumns and horizontal props are incompatible");
     }
-    return this.props.masonry
+    return this.propsRef.masonry
       ? RVMasonryLayoutManagerImpl
-      : (this.props.numColumns ?? 1) > 1 && !this.props.horizontal
+      : this.numColumns > 1 && !this.propsRef.horizontal
       ? RVGridLayoutManagerImpl
       : RVLinearLayoutManagerImpl;
   }
@@ -311,7 +381,7 @@ export class RecyclerViewManager<T> {
     const initialItemLayout = this.layoutManager?.getLayout(
       initialScrollIndex ?? 0
     );
-    const initialItemOffset = this.props.horizontal
+    const initialItemOffset = this.propsRef.horizontal
       ? initialItemLayout?.x
       : initialItemLayout?.y;
 
@@ -326,18 +396,19 @@ export class RecyclerViewManager<T> {
       this.engagedIndicesTracker.scrollOffset =
         initialItemOffset ?? 0 + this.firstItemOffset;
     } else {
-      //console.log("initialItemOffset", initialItemOffset, this.firstItemOffset);
+      // console.log("initialItemOffset", initialItemOffset, this.firstItemOffset);
       this.engagedIndicesTracker.scrollOffset =
         (initialItemOffset ?? 0) - this.firstItemOffset;
     }
   }
 
   private renderProgressively() {
+    this.progressiveRenderCount++;
     const layoutManager = this.layoutManager;
     if (layoutManager) {
       this.applyInitialScrollAdjustment();
-      const visibleIndices = this.getVisibleIndices();
-      //console.log("---------> visibleIndices", visibleIndices);
+      const visibleIndices = this.computeVisibleIndices();
+      // console.log("---------> visibleIndices", visibleIndices);
       this.hasRenderedProgressively = visibleIndices.every(
         (index) =>
           layoutManager.getLayout(index).isHeightMeasured &&
@@ -348,16 +419,20 @@ export class RecyclerViewManager<T> {
         this.isFirstLayoutComplete = true;
       }
 
+      const batchSize =
+        this.numColumns *
+        this.initialDrawBatchSize ** Math.ceil(this.progressiveRenderCount / 5);
+
       // If everything is measured then render stack will be in sync. The buffer items will get rendered in the next update
       // triggered by the useOnLoad hook.
       !this.hasRenderedProgressively &&
         this.updateRenderStack(
-          // pick first n indices from visible ones and n is size of renderStack
+          // pick first n indices from visible ones based on batch size
           visibleIndices.slice(
             0,
             Math.min(
               visibleIndices.length,
-              this.renderStack.size + this.initialDrawBatchSize
+              this.getRenderStack().size + batchSize
             )
           )
         );
@@ -366,14 +441,18 @@ export class RecyclerViewManager<T> {
 
   private getItemType(index: number): string {
     return (
-      this.props.getItemType?.(this.props.data![index], index) ?? "default"
+      this.propsRef.getItemType?.(this.propsRef.data![index], index) ??
+      "default"
     ).toString();
   }
 
-  private getStableId(index: number): string {
-    return (
-      this.props.keyExtractor?.(this.props.data![index], index) ??
-      index.toString()
+  private overrideItemLayout(index: number, layout: SpanSizeInfo) {
+    this.propsRef?.overrideItemLayout?.(
+      layout,
+      this.propsRef.data![index],
+      index,
+      this.numColumns,
+      this.propsRef.extraData
     );
   }
 }

package/src/recyclerview/RecyclerViewProps.ts

@@ -1,6 +1,7 @@
-import { FlashListProps } from "../FlashListProps";
 import { ScrollViewProps } from "react-native";
 
+import { FlashListProps } from "../FlashListProps";
+
 export interface RecyclerViewProps<TItem>
   extends Omit<FlashListProps<TItem>, "contentContainerStyle"> {
   /**