react / react/react-native

MVCP rendering issues in Flatlist on Android

Abierto
#56,866 4 comentarios 2 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: FlatList Needs: Triage :mag: Platform: Android Type: New Architecture
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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:

  1. Setting a static height on the items, pointing the issue to only variable height items
  2. 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
  1. Install the reproductiion app on android
  2. npm install
  3. npm run android
  4. 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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza con el reproductor obligatorio en https://github.com/humaidk2/MVCPrepro: ejecuta npm install y npm run android, y luego reproduce el parpadeo en Android pulsando “Add” repetidamente. Investiga el comportamiento de Flatlist relacionado con las alturas dinámicas, MaintainVisibleContentPosition y Fabric; se considera terminado cuando el elemento recién añadido deja de renderizarse brevemente, desaparecer y volver a aparecer con una animación.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
android, react-native
Área
mobile, performance
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Tranquilo
Claridad
Necesita aclaración
Aptitud para principiantes
42/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.