react / react/react-native

regression: VirtualizedList scrolls infinitely on new item

オープン
#38,907 コメント 0 件 リアクション 13 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: VirtualizedList Impact: Regression Issue: Author Provided Repro
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

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.

https://github.com/facebook/react-native/assets/804994/05787d61-dccf-4e36-8ee9-94a0c84236bd

(I trimmed the video to fit Github, but it was basically scrolling until it reached 1000 rows)

Snack, screenshot, or link to a repository

https://github.com/diegolmello/ReproListScroll

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンク先のReproListScrollリポジトリから始め、React Native 0.70.13と0.71および0.72を比較しながら、動画で説明されている動作を再現してください。動的な高さの項目を持つFlatListが、先頭付近に項目を追加した後に無限にスクロールしたり、動かなくなったりしなくなれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。