From cc19cdcdbe927368ae1cf4c62a52edd838413252 Mon Sep 17 00:00:00 2001
From: Antoine Doubovetzky <antoined@bam.tech>
Date: Tue, 2 Aug 2022 18:11:24 -0700
Subject: [PATCH] Fix/flat list not calling render items for nullish values
 when numColumns > 1 (#34205)

Summary:
Fixes https://github.com/facebook/react-native/issues/34034.

The FlatList doesn't call renderItem on nullish values when numColumns > 1, but it does when numColumns is not set (or equals 1).
I think the behavior should be consistent, so I updated the code so renderItems is called for every items.

I believe the condition `item != null` was here to make sure renderItem isn't called for index outside of data range, so I replaced it with `itemIndex < data.length`.

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[General] [Fixed] - Fix FlatList not calling render items for nullish values when numColumns > 1

Pull Request resolved: https://github.com/facebook/react-native/pull/34205

Test Plan:
- I added a failing test corresponding to the issue, and the test now succeeds.
- I used the same code as in the test on a newly initialized app on RN 0.69 and made sure renderItem was called for every items as expected.

Reviewed By: NickGerleman

Differential Revision: D38185103

Pulled By: lunaleaps

fbshipit-source-id: 4baa55caef9574c91c43c047f9e419016ceb39db
---
 Libraries/Lists/FlatList.js                |  5 ++--
 Libraries/Lists/__tests__/FlatList-test.js | 31 ++++++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/Libraries/Lists/FlatList.js b/Libraries/Lists/FlatList.js
index 11d34d07bdc..2ebd0f673ab 100644
--- a/Libraries/Lists/FlatList.js
+++ b/Libraries/Lists/FlatList.js
@@ -499,8 +499,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     if (numColumns > 1) {
       const ret = [];
       for (let kk = 0; kk < numColumns; kk++) {
-        const item = data[index * numColumns + kk];
-        if (item != null) {
+        const itemIndex = index * numColumns + kk;
+        if (itemIndex < data.length) {
+          const item = data[itemIndex];
           ret.push(item);
         }
       }
diff --git a/Libraries/Lists/__tests__/FlatList-test.js b/Libraries/Lists/__tests__/FlatList-test.js
index d8b523fd220..5940928b1ad 100644
--- a/Libraries/Lists/__tests__/FlatList-test.js
+++ b/Libraries/Lists/__tests__/FlatList-test.js
@@ -152,4 +152,35 @@ describe('FlatList', () => {
     expect(scrollRef.measureLayout).toBeInstanceOf(jest.fn().constructor);
     expect(scrollRef.measureInWindow).toBeInstanceOf(jest.fn().constructor);
   });
+
+  it('calls renderItem for all data items', () => {
+    const data = [
+      {key: 'i1'},
+      null,
+      undefined,
+      {key: 'i2'},
+      null,
+      undefined,
+      {key: 'i3'},
+    ];
+
+    const renderItemInOneColumn = jest.fn();
+    ReactTestRenderer.create(
+      <FlatList data={data} renderItem={renderItemInOneColumn} />,
+    );
+
+    expect(renderItemInOneColumn).toHaveBeenCalledTimes(7);
+
+    const renderItemInThreeColumns = jest.fn();
+
+    ReactTestRenderer.create(
+      <FlatList
+        data={data}
+        renderItem={renderItemInThreeColumns}
+        numColumns={3}
+      />,
+    );
+
+    expect(renderItemInThreeColumns).toHaveBeenCalledTimes(7);
+  });
 });