Skip to content

Commit cc19cdc

Browse files
Antoine Doubovetzkyfacebook-github-bot
authored andcommitted
Fix/flat list not calling render items for nullish values when numColumns > 1 (#34205)
Summary: Fixes #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: #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
1 parent a142a78 commit cc19cdc

2 files changed

Lines changed: 34 additions & 2 deletions

File tree

Libraries/Lists/FlatList.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -499,8 +499,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
499499
if (numColumns > 1) {
500500
const ret = [];
501501
for (let kk = 0; kk < numColumns; kk++) {
502-
const item = data[index * numColumns + kk];
503-
if (item != null) {
502+
const itemIndex = index * numColumns + kk;
503+
if (itemIndex < data.length) {
504+
const item = data[itemIndex];
504505
ret.push(item);
505506
}
506507
}

Libraries/Lists/__tests__/FlatList-test.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,4 +152,35 @@ describe('FlatList', () => {
152152
expect(scrollRef.measureLayout).toBeInstanceOf(jest.fn().constructor);
153153
expect(scrollRef.measureInWindow).toBeInstanceOf(jest.fn().constructor);
154154
});
155+
156+
it('calls renderItem for all data items', () => {
157+
const data = [
158+
{key: 'i1'},
159+
null,
160+
undefined,
161+
{key: 'i2'},
162+
null,
163+
undefined,
164+
{key: 'i3'},
165+
];
166+
167+
const renderItemInOneColumn = jest.fn();
168+
ReactTestRenderer.create(
169+
<FlatList data={data} renderItem={renderItemInOneColumn} />,
170+
);
171+
172+
expect(renderItemInOneColumn).toHaveBeenCalledTimes(7);
173+
174+
const renderItemInThreeColumns = jest.fn();
175+
176+
ReactTestRenderer.create(
177+
<FlatList
178+
data={data}
179+
renderItem={renderItemInThreeColumns}
180+
numColumns={3}
181+
/>,
182+
);
183+
184+
expect(renderItemInThreeColumns).toHaveBeenCalledTimes(7);
185+
});
155186
});

0 commit comments

Comments
 (0)