Fix: Fix GitHub Issue #1975: ItemSeparatorComponent is rendered on second to last item when numColumns={2...

src/__tests__/RecyclerView.test.tsx

@@ -1,5 +1,5 @@
 import React, { createRef } from "react";
-import { Text } from "react-native";
+import { Text, View } from "react-native";
 import "@quilted/react-testing/matchers";
 import { render } from "@quilted/react-testing";
 
@@ -34,19 +34,23 @@ jest.mock("../recyclerview/utils/measureLayout", () => {
   };
 });
 
+const Separator = () => <View testID="separator" />;
+
 const renderRecyclerView = (args: {
   numColumns?: number;
   masonry?: boolean;
   horizontal?: boolean;
   ref?: React.Ref<FlashListRef<number>>;
   data?: number[];
+  ItemSeparatorComponent?: React.ComponentType<any>;
 }) => {
   const {
     numColumns = 1,
     masonry = false,
     horizontal = false,
     ref,
     data,
+    ItemSeparatorComponent,
   } = args;
   return render(
     <FlashList
@@ -62,6 +66,7 @@ const renderRecyclerView = (args: {
       numColumns={numColumns}
       horizontal={horizontal}
       renderItem={({ item }) => <Text>{item}</Text>}
+      ItemSeparatorComponent={ItemSeparatorComponent}
     />
   );
 };
@@ -141,4 +146,79 @@ describe("RecyclerView", () => {
       expect(ref.current?.props.data).toEqual([0, 1, 2, 3]);
     });
   });
+
+  describe("ItemSeparatorComponent with numColumns", () => {
+    it("should not render separator on second-to-last item with numColumns=2 and 5 items", () => {
+      // With numColumns=2 and 5 items:
+      // Row 0: items 0, 1
+      // Row 1: items 2, 3
+      // Row 2: item 4
+      // Separators should only appear after items 1 and 3 (end of rows), not after item 3 (second-to-last)
+      const result = renderRecyclerView({
+        numColumns: 2,
+        data: [0, 1, 2, 3, 4],
+        ItemSeparatorComponent: Separator,
+      });
+
+      // Get all separator components
+      const separators = result.findAll("View", { testID: "separator" });
+
+      // With 5 items and 2 columns, we have 3 rows (0-1, 2-3, 4)
+      // Separators should appear after row 0 (after item 1) and row 1 (after item 3)
+      // That's 2 separators total
+      expect(separators).toHaveLength(2);
+    });
+
+    it("should render correct number of separators with numColumns=2 and 6 items", () => {
+      // With numColumns=2 and 6 items:
+      // Row 0: items 0, 1
+      // Row 1: items 2, 3
+      // Row 2: items 4, 5
+      // Separators should appear after items 1 and 3 (2 separators)
+      const result = renderRecyclerView({
+        numColumns: 2,
+        data: [0, 1, 2, 3, 4, 5],
+        ItemSeparatorComponent: Separator,
+      });
+
+      const separators = result.findAll("View", { testID: "separator" });
+
+      // With 6 items and 2 columns, we have 3 complete rows
+      // Separators should appear after row 0 and row 1 (2 separators)
+      expect(separators).toHaveLength(2);
+    });
+
+    it("should render separators correctly with numColumns=1", () => {
+      // With numColumns=1, every item except the last should have a separator
+      const result = renderRecyclerView({
+        numColumns: 1,
+        data: [0, 1, 2, 3, 4],
+        ItemSeparatorComponent: Separator,
+      });
+
+      const separators = result.findAll("View", { testID: "separator" });
+
+      // With 5 items and 1 column, we should have 4 separators (between each item)
+      expect(separators).toHaveLength(4);
+    });
+
+    it("should render separators correctly with numColumns=3", () => {
+      // With numColumns=3 and 7 items:
+      // Row 0: items 0, 1, 2
+      // Row 1: items 3, 4, 5
+      // Row 2: item 6
+      // Separators should appear after items 2 and 5 (2 separators)
+      const result = renderRecyclerView({
+        numColumns: 3,
+        data: [0, 1, 2, 3, 4, 5, 6],
+        ItemSeparatorComponent: Separator,
+      });
+
+      const separators = result.findAll("View", { testID: "separator" });
+
+      // With 7 items and 3 columns, we have 3 rows
+      // Separators should appear after row 0 and row 1 (2 separators)
+      expect(separators).toHaveLength(2);
+    });
+  });
 });

src/recyclerview/RecyclerView.tsx

@@ -619,6 +619,7 @@ const RecyclerViewComponent = <T,>(
             }
             currentStickyIndex={currentStickyIndex}
             hideStickyHeaderRelatedCell={stickyHeaderHideRelatedCell}
+            numColumns={recyclerViewManager.numColumns}
           />
           {renderEmpty}
           {renderFooter}

src/recyclerview/ViewHolderCollection.tsx

@@ -54,6 +54,8 @@ export interface ViewHolderCollectionProps<TItem> {
   currentStickyIndex: number;
   /** Whether the cell associated with an active sticky header is hidden */
   hideStickyHeaderRelatedCell: boolean;
+  /** Number of columns for grid layout */
+  numColumns: number;
 }
 
 /**
@@ -90,6 +92,7 @@ export const ViewHolderCollection = <TItem,>(
     getAdjustmentMargin,
     currentStickyIndex,
     hideStickyHeaderRelatedCell,
+    numColumns,
   } = props;
 
   const [renderId, setRenderId] = React.useState(0);
@@ -171,7 +174,13 @@ export const ViewHolderCollection = <TItem,>(
         hasData &&
         Array.from(renderStack.entries(), ([reactKey, { index }]) => {
           const item = data[index];
-          const trailingItem = ItemSeparatorComponent
+          // For grid layouts (numColumns > 1), only show separator if next item is in a different row
+          // Calculate current and next item's row indices
+          const currentRow = Math.floor(index / numColumns);
+          const nextRow = Math.floor((index + 1) / numColumns);
+          const isNextItemInDifferentRow = currentRow !== nextRow;
+
+          const trailingItem = ItemSeparatorComponent && data[index + 1] !== undefined && isNextItemInDifferentRow
             ? data[index + 1]
             : undefined;