MVCP rendering issues in Flatlist on Android
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- C++
- Star
- 127k
- Fork
- 25.3k
- Merge trung bình
- 1 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
Description
When adding items in a flatlist with dynamic heights and having animations with MaintainVisibleContentPosition, there's jittering on the flatlist.
After slowing down the video, i found the flatlist renders the new item in one frame, then removes it and then animates it in properly.
I believe the root cause to be the new fabric engine as this was working on a previous version without new architecture.
I did find 2 potential fixes:
- Setting a static height on the items, pointing the issue to only variable height items
- Setting enableFabricCommitBranching to true, but this caused an issue with react navigation/screens going back, where the screen would unrender before the new one finished animating in.
Steps to reproduce
- Install the reproductiion app on android
- npm install
- npm run android
- Press "Add" multiple times at least 5, notice the jank in the animation
React Native Version
0.85.3
Affected Platforms
Runtime - Android
Areas
Fabric - The New Renderer
Output of npx @react-native-community/cli info
System:
OS: macOS 26.4.1
CPU: (16) arm64 Apple M3 Max
Memory: 3.33 GB / 64.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 25.9.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /Users/humaid/.nvm/versions/node/v24.14.1/bin/yarn
npm:
version: 11.12.1
path: /opt/homebrew/bin/npm
Watchman:
version: 2026.01.12.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 25.5
- iOS 26.5
- macOS 26.5
- tvOS 26.5
- visionOS 26.5
- watchOS 26.5
Android SDK:
API Levels:
- "30"
- "34"
- "35"
- "36"
- "37"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
- 36.0.0
System Images:
- android-34 | Google APIs ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2025.3 AI-253.30387.90.2532.14935130
Xcode:
version: 26.5/17F42
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.11
path: /Users/humaid/Library/Java/JavaVirtualMachines/azul-21.0.11/Contents/Home/bin/javac
Ruby:
version: 3.3.5
path: /Users/humaid/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.1.0
wanted: 20.1.0
react:
installed: 19.2.3
wanted: 19.2.3
react-native:
installed: 0.85.3
wanted: 0.85.3
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
No Stack trace
MANDATORY Reproducer
https://github.com/humaidk2/MVCPrepro
Screenshots and Videos
Normal video
https://github.com/user-attachments/assets/e107378d-c108-4423-9a77-18815d6addf9
Slowed down to 10%
https://github.com/user-attachments/assets/8e3a6889-5166-4ca4-a295-874c5b7f9819
Slowed down to 5%
https://github.com/user-attachments/assets/80e6a927-d32d-4bc8-a985-200177413752
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với trình tái hiện bắt buộc tại https://github.com/humaidk2/MVCPrepro: chạy npm install và npm run android, sau đó tái hiện hiện tượng giật trên Android bằng cách nhấn “Add” liên tục. Điều tra hành vi của Flatlist liên quan đến chiều cao động, MaintainVisibleContentPosition và Fabric; hoàn thành khi mục mới được thêm không còn hiển thị trong chốc lát, biến mất rồi lại xuất hiện bằng animation.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- android, react-native
- Lĩnh vực
- mobile, performance
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Ít trao đổi
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 42/100