FlatList doesnot load data after the initialNumToRender count exceeds.

[ReactRaylogic]

Description

If the initial state of list is empty and it fills in componentDidMount the flatlsit will only render first 10 items from the list of 60.
It doenot renders the item after the initialNumToRender count.

React Native Version

0.71.5

Output of npx react-native info

System:
OS: macOS 12.6
CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
Memory: 37.58 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.13.0 - /usr/local/bin/node
Yarn: Not Found
npm: 8.19.3 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.11.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 4.1 AI-201.8743.12.41.6953283
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.17 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.1 => 0.71.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

class MyRoomsScreen extends Component {
constructor(){
super()
this.state = {
data: []
}
componentDidMount(){
loadData()
}

loadData(){
let roomArray = []
for(let i =0; i<30;i++){
roomArray.push({id: i+1; name: `Room ${i+1}` })
}
this.setState({data: roomArray})
}

renderRoomList =({item, index}) => {
return(<Text>{item.name} </Text>)
}

render(){
return(
<View>
<FlatList data={this.state.data} renderItem={this.renderRoomList}   />
</View>
)}

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

...

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[dmregister]

I am having this same issue and was able to create a snack showing the behavior. Moving the slider or typing in the input field will update the state and cause the FlatList to re-render. Notice that the FlatList sometimes renders only the initialNumToRender and nothing after that.

Expo installs RN 0.70.4 but we initially noticed this when upgrading to RN 0.71.6

Snack:
https://snack.expo.dev/wsw-_9se4

Screen Recording showing the behavior:

[NickGerleman]

Would need to be debuged, but a likely culprit for why the list wouldn't render content beyond initial is that InteractionManager is in a starved state and scheduled work is never run https://reactnative.dev/docs/interactionmanager

[douzal34]

I have done an upgrade from RN 0.67.3 to RN 0.71.4 few days ago and i got the same result. Same with a downgrade to 0.69.9.
If no initialNumToRender is set, flatList is working fine but you have to render 10 items on the launch, not the best way.
When initialNumToRender is set and we exceed the number defined, it render but nothing appear on the screen so blank screen so i think it's the same issue.

[ReactRaylogic]

So what i saw is if i have the list in the constructor itself rather than an empty array Flatlist works as expected but if i have an empty list in constructor and updates the list in componentDidmount/useEffect it only renders the item till initialNumToRender count.

[izuutech]

I have done an upgrade from RN 0.67.3 to RN 0.71.4 few days ago and i got the same result. Same with a downgrade to 0.69.9. If no initialNumToRender is set, flatList is working fine but you have to render 10 items on the launch, not the best way. When initialNumToRender is set and we exceed the number defined, it render but nothing appear on the screen so blank screen so i think it's the same issue.

I have this issue too. When I set initialNumToRender={0} it renders blank. And doesn't update later

[douzal34]

I was with the same issue few weeks ago but with 0.71.6 and even 0.71.7 with the fix of Hermes in debug mode, everything's working fine.
Give a try guys, my app SoSkills on store is working on 0.71.7 with initialNumToRender to 3 and no blank screen after this value.

[anhkieet]

I am having the same issue, it doesn't load data after initialNumToRender count exceeds.

[foloinfo]

I had the same problem with SectionList. In my case, the problem was that I forgot to clear the InteractionManager after createInteractionHandle(). I am using react-native 0.71.6 with Expo 48.

@NickGerleman Thanks for your comment about the InteractionManager. I didn't realise it blocked the FlatList behaviour.

[ReactRaylogic]

What i have noticed is it does not rerender if it has empty list in the constructor.
If the list is filled in constructor itself 2 rerender happens and FlatList works perfectly.

[vietnd2307]

I encouter this issue sometimes. My flatlist render inside modal, when modal open, sometimes the list does not render item after initialNumToRender

[imamrobani]

in my case for the first time, all the data was successfully rendered, but when I tried to go back until I exited the application and opened it again, only 10 data were displayed, and there was an empty space below, no data was displayed, but when I killed the app and opened it again, all of them running back to normal

I don't know why this is, this happened when I updated to React Native 0.71.13 (I update using React Native Upgrade Helper)
so now I still stay at RN 0.70.13
Previously I was using version 69.3

Has anyone experienced something similar in RN 0.71.XX?