regression: VirtualizedList scrolls infinitely on new item #38907
Description
Description
FlatList is behaving unexpectedly on React Native 0.71 for lists with dynamic height items.
I was able to create a repro pointing to React Native versions:
- 0.69.8
- 0.70.13
- 0.71.12
- 0.72.3
The issue starts to happen on 0.71, but it still happens on 0.72.
Bug happens both on Android and iOS.
I was not able to find the commit that introduced this bug.
React Native Version
0.72.3
Output of npx react-native info
System:
OS: macOS 13.0.1
CPU: (8) arm64 Apple M1 Pro
Memory: 88.42 MB / 16.00 GB
Shell:
version: 5.8.1
path: /bin/zsh
Binaries:
Node:
version: 18.15.0
path: ~/.nvm/versions/node/v18.15.0/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 9.5.0
path: ~/.nvm/versions/node/v18.15.0/bin/npm
Watchman:
version: 2023.07.10.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /Users/diegomello/.rvm/gems/ruby-2.7.7/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.1
- iOS 16.1
- macOS 13.0
- tvOS 16.1
- watchOS 9.1
Android SDK:
API Levels:
- "23"
- "28"
- "30"
- "31"
- "33"
Build Tools:
- 23.0.1
- 23.0.2
- 25.0.0
- 25.0.1
- 25.0.2
- 25.0.3
- 26.0.1
- 26.0.2
- 26.0.3
- 27.0.1
- 27.0.3
- 28.0.3
- 29.0.0
- 29.0.1
- 29.0.2
- 29.0.3
- 30.0.2
- 30.0.3
- 31.0.0
- 33.0.0
System Images:
- android-27 | Google APIs ARM 64 v8a
- android-27 | Google Play Intel x86 Atom
- android-30 | Google Play ARM 64 v8a
- android-30 | Google Play Intel x86 Atom
- android-31 | ARM 64 v8a
- android-31 | Google APIs Intel x86 Atom_64
- android-31 | Google Play ARM 64 v8a
Android NDK: 23.0.7344513-beta4
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9862592
Xcode:
version: 14.1/14B47b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.18
path: /usr/bin/javac
Ruby:
version: 2.7.7
path: /Users/diegomello/.rvm/rubies/ruby-2.7.7/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: false
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Steps to reproduce
See the video. The repro is very straightforward and it simulates a FlatList with dynamic height items.
It's all about scrolling until the list struggles to render the elements. (It's still stuck scrolling as I type the report)
I found it easier to scroll to around 800~1000 and tap Add item top, but it can be reproduced by just scrolling.
2023-08-09.17-32-18.mp4
(I trimmed the video to fit Github, but it was basically scrolling until it reached 1000 rows)