fix(layout): use per-column binary search for masonry visibility detection

Replace O(n) linear scan with per-column binary search for
O(numColumns * log(n/numColumns)) performance. Within each masonry
column, y-positions are monotonically sorted, so binary search is valid.
Column-to-item mappings are built during recomputeLayouts (which already
iterates all items) so the visibility hot path stays fast during scrolling.

Co-authored-by: Talha Naqvi <naqvitalha@users.noreply.github.com>

Author: github-actions[bot]

src/__tests__/MasonryLayoutManager.test.ts

@@ -202,11 +202,11 @@ describe("MasonryLayoutManager", () => {
       // Col 1: items 1 (h=50),  3 (h=50),  5 (h=50)  -> y: 0, 50, 100
       const layoutInfos = [
         createMockLayoutInfo(0, 200, 300), // Col 0, y=0
-        createMockLayoutInfo(1, 200, 50),  // Col 1, y=0
+        createMockLayoutInfo(1, 200, 50), // Col 1, y=0
         createMockLayoutInfo(2, 200, 100), // Col 0, y=300
-        createMockLayoutInfo(3, 200, 50),  // Col 1, y=50
+        createMockLayoutInfo(3, 200, 50), // Col 1, y=50
         createMockLayoutInfo(4, 200, 100), // Col 0, y=400
-        createMockLayoutInfo(5, 200, 50),  // Col 1, y=100
+        createMockLayoutInfo(5, 200, 50), // Col 1, y=100
       ];
       manager.modifyLayout(layoutInfos, 6);
       const layouts = getAllLayouts(manager);
@@ -240,10 +240,10 @@ describe("MasonryLayoutManager", () => {
       // Col 0: item 0 (h=50), item 2 (h=50) -> y: 0, 50
       // Col 1: item 1 (h=300), item 3 (h=50) -> y: 0, 300
       const layoutInfos = [
-        createMockLayoutInfo(0, 200, 50),  // Col 0, y=0
+        createMockLayoutInfo(0, 200, 50), // Col 0, y=0
         createMockLayoutInfo(1, 200, 300), // Col 1, y=0
-        createMockLayoutInfo(2, 200, 50),  // Col 0, y=50
-        createMockLayoutInfo(3, 200, 50),  // Col 1, y=300
+        createMockLayoutInfo(2, 200, 50), // Col 0, y=50
+        createMockLayoutInfo(3, 200, 50), // Col 1, y=300
       ];
       manager.modifyLayout(layoutInfos, 4);
 

src/recyclerview/layout-managers/MasonryLayoutManager.ts

@@ -1,11 +1,12 @@
+import { ConsecutiveNumbers } from "../helpers/ConsecutiveNumbers";
+
 import {
   LayoutParams,
   RVDimension,
   RVLayout,
   RVLayoutInfo,
   RVLayoutManager,
 } from "./LayoutManager";
-import { ConsecutiveNumbers } from "../helpers/ConsecutiveNumbers";
 
 /**
  * MasonryLayoutManager implementation that arranges items in a masonry/pinterest-style layout.
@@ -19,6 +20,8 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
   private columnHeights: number[];
   /** Current column index for sequential placement */
   private currentColumn = 0;
+  /** Per-column sorted lists of item indices for efficient visibility detection */
+  private columnItems: number[][] = [];
 
   /** If there's a span change for masonry layout, we need to recompute all the widths */
   private fullRelayoutRequired = false;
@@ -156,6 +159,8 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
         this.placeItemSequentially(layout, span);
       }
     }
+    // Rebuild per-column item mappings for efficient visibility detection
+    this.rebuildColumnItems();
   }
 
   /**
@@ -323,31 +328,86 @@ export class RVMasonryLayoutManagerImpl extends RVLayoutManager {
   }
 
   /**
-   * Override getVisibleLayouts to avoid using binary search on the full
-   * layouts array. In masonry layout, item y-positions are NOT sorted by
-   * index (items are placed in columns), so binary search produces wrong
-   * results causing items to disappear. Instead, we scan each column
-   * independently where y-positions ARE sorted, and combine the results.
+   * Rebuilds per-column item index arrays from layout positions.
+   * Within each column, items are sorted by y-position (guaranteed by
+   * placement order since column heights only increase).
+   */
+  private rebuildColumnItems(): void {
+    const columnWidth = this.boundedSize / this.maxColumns;
+    this.columnItems = Array.from({ length: this.maxColumns }, () => []);
+    for (let i = 0; i < this.layouts.length; i++) {
+      const layout = this.layouts[i];
+      const col = Math.min(
+        Math.round(layout.x / columnWidth),
+        this.maxColumns - 1
+      );
+      this.columnItems[col].push(i);
+    }
+  }
+
+  /**
+   * Override getVisibleLayouts to use per-column binary search instead of
+   * a single binary search on the full layouts array. In masonry layout,
+   * y-positions are NOT sorted by index (items are placed in columns), but
+   * they ARE sorted within each column. Binary searching each column gives
+   * O(numColumns * log(n/numColumns)) performance.
    */
   getVisibleLayouts(
     unboundDimensionStart: number,
     unboundDimensionEnd: number
   ): ConsecutiveNumbers {
+    if (this.layouts.length === 0) {
+      return ConsecutiveNumbers.EMPTY;
+    }
+
     let firstVisibleIndex = -1;
     let lastVisibleIndex = -1;
-    const layoutCount = this.layouts.length;
-
-    for (let i = 0; i < layoutCount; i++) {
-      const layout = this.layouts[i];
-      const position = layout.y;
-      const size = layout.height;
 
-      // Item is visible if it overlaps with the viewport
-      if (position + size > unboundDimensionStart && position < unboundDimensionEnd) {
-        if (firstVisibleIndex === -1) {
-          firstVisibleIndex = i;
+    for (const items of this.columnItems) {
+      if (items.length === 0) continue;
+
+      // Binary search for first visible item in this column:
+      // find first item where y + height > unboundDimensionStart
+      let lo = 0;
+      let hi = items.length - 1;
+      let colFirst = -1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const layout = this.layouts[items[mid]];
+        if (layout.y + layout.height > unboundDimensionStart) {
+          colFirst = mid;
+          hi = mid - 1;
+        } else {
+          lo = mid + 1;
+        }
+      }
+      if (colFirst === -1) continue;
+
+      // Binary search for last visible item in this column:
+      // find last item where y < unboundDimensionEnd
+      lo = colFirst;
+      hi = items.length - 1;
+      let colLast = -1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const layout = this.layouts[items[mid]];
+        if (layout.y < unboundDimensionEnd) {
+          colLast = mid;
+          lo = mid + 1;
+        } else {
+          hi = mid - 1;
         }
-        lastVisibleIndex = i;
+      }
+      if (colLast === -1) continue;
+
+      // Update global min/max with item indices from this column
+      const colFirstIndex = items[colFirst];
+      const colLastIndex = items[colLast];
+      if (firstVisibleIndex === -1 || colFirstIndex < firstVisibleIndex) {
+        firstVisibleIndex = colFirstIndex;
+      }
+      if (lastVisibleIndex === -1 || colLastIndex > lastVisibleIndex) {
+        lastVisibleIndex = colLastIndex;
       }
     }