Skip to content

Commit

Permalink
Fix/flat list not calling render items for nullish values when numCol…
Browse files Browse the repository at this point in the history
…umns > 1 (facebook#34205)

Summary:
Fixes facebook#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: facebook#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
  • Loading branch information
Antoine Doubovetzky authored and roryabraham committed Aug 17, 2022
1 parent 80a6d4c commit 333b4ab
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 2 deletions.
5 changes: 3 additions & 2 deletions Libraries/Lists/FlatList.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
Expand Down
31 changes: 31 additions & 0 deletions Libraries/Lists/__tests__/FlatList-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

0 comments on commit 333b4ab

Please sign in to comment.