Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flatlist doesn't invoke renderItems when data passed is array of nulls #34034

Closed
imanshul opened this issue Jun 21, 2022 · 1 comment
Closed

Comments

@imanshul
Copy link

Description

When numColumns field is added to display Flatlist as gridView, the flatlist's renderItem method doesn't invoke when we pass array of nulls as data.

Version

0.67.2

Output of npx react-native info

System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1
Memory: 122.77 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.13.0 - /usr/local/bin/node
Yarn: 1.22.17 - /usr/local/bin/yarn
npm: 8.1.0 - /usr/local/bin/npm
Watchman: 2021.10.18.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK:
API Levels: 17, 23, 28, 30, 31
Build Tools: 29.0.2, 30.0.0, 30.0.1, 30.0.2, 31.0.0
System Images: android-29 | Google Play ARM 64 v8a, android-30 | Google APIs ARM 64 v8a, android-31 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: Not Found
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_311 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.2 => 0.67.2
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

Use a flatlist and pass data to flatlist as [null, null] you'll see that it render the list but when you change the same flatlist to gridView by passing numColumns the same code stops working, the renderItem method is never invoked.

Snack, code example, screenshot, or link to a repository

Flatlist code with array of nulls that invoke renderItem method and displays item.

 <FlatList
                            data={[null, null]}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={({item, index}) => this.renderItem(item, index)}                
/>

Adding the numColumns field doesn't call renderItem method. Below code doesn't work

<FlatList
                            data={[null, null]}
                            keyExtractor={(item, index) => index.toString()}
                            renderItem={({item, index}) => this.renderItem(item, index)}            
                            numColumns={2}    
/>
@AntoineDoubovetzky
Copy link

I opened a PR to fix this issue

roryabraham pushed a commit to Expensify/react-native that referenced this issue Aug 17, 2022
…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
roryabraham pushed a commit to Expensify/react-native that referenced this issue Aug 17, 2022
…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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants