Skip to content

MVCP rendering issues in Flatlist on Android #56866

Open
Open
MVCP rendering issues in Flatlist on Android#56866
Labels
Component: FlatListNeeds: Triage 🔍Platform: AndroidAndroid applications.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)

Description

@humaidk2
humaidk2
opened on May 18, 2026

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

normal.mp4

Slowed down to 10%

slow10.mp4

Slowed down to 5%

slow5.mp4

Activity

  1. humaidk2
    added
    Needs: Triage 🔍
    Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)
    on May 18, 2026
  2. react-native-bot
    added
    Component: FlatList
    Platform: AndroidAndroid applications.
    on May 18, 2026

  3. popsiclelmlm commented on Jun 1, 2026

    @popsiclelmlm
    popsiclelmlm
    on Jun 1, 2026

    I took a pass at triaging this using the repro repo at humaidk2/MVCPrepro@79f1d05.

    Environment I used:

    • Android emulator: sdk_gphone64_arm64
    • Android: 16 / API 36
    • React Native: 0.85.3 from the repro project
    • New Architecture: enabled
    • Hermes: enabled
    • Node: 24.14.0

    I was able to build and launch the repro. The Add button increments the row count as expected (2000 -> 2008 in my run).

    I also added a local-only onScroll / post-Add logging patch to the repro to inspect the scroll offset around each insert. With the repro as-is:

    maintainVisibleContentPosition={{ minIndexForVisible: 0, autoscrollToTopThreshold: 10 }}

add 1 before offsetY=0
add 1 +100ms offsetY=79.619
add 1 +300ms offsetY=0

add 2 before offsetY=0
add 2 +100ms offsetY=71.238
add 2 +300ms offsetY=0

add 3 before offsetY=0
add 3 +100ms offsetY=122.286
add 3 +300ms offsetY=0

    When I removed only autoscrollToTopThreshold locally and kept minIndexForVisible: 0, the offset no longer bounced back to zero; it accumulated by roughly the inserted dynamic row height:

    maintainVisibleContentPosition={{ minIndexForVisible: 0 }}

add 1 before offsetY=0
add 1 +100ms offsetY=86.857
add 1 +300ms offsetY=86.857

add 2 before offsetY=86.857
add 2 +100ms offsetY=193.905
add 2 +300ms offsetY=193.905

add 3 before offsetY=193.905
add 3 +100ms offsetY=299.048
add 3 +300ms offsetY=299.048

    That seems consistent with the Android MVCP helper path: MaintainVisibleScrollPositionHelper first preserves the anchor by applying the measured delta, then if autoScrollToTopThreshold matches, it scrolls back to the top. With dynamic-height cells, that can make the transient offset correction visible. The relevant native path appears to be:

    • ReactScrollView.setMaintainVisibleContentPosition(...)
    • MaintainVisibleScrollPositionHelper.computeTargetView() in willMountItems / willDispatchViewUpdates
    • MaintainVisibleScrollPositionHelper.updateScrollPositionInternal() in didMountItems

    One small note: the repro README mentions RN PR #56513 as related to LazyShadowTreeRevisionConsistencyManager, but #56513 appears to be a Fantom/Jest error-propagation PR. Did you mean a different renderer consistency PR/commit? That link may be sending maintainers to the wrong context.

  4. humaidk2 commented on Jun 2, 2026

    @humaidk2
    humaidk2
    on Jun 2, 2026
    ContributorAuthor

    Thanks for reproducing the issue, it definitely seems like a rendering issue. It's clear from your scroll logs and the video that it's something with fabric rendering. Another hint to this is that enableFabricCommitBranching, fixes the issue.
    The new row renders, drops and animates in and that points to a commit/render decision path, not animation timing. I just don't have enough knowledge on how fabrics internals. If someone from the render team took a look, they could help point us in the right direction. And yeah, I'll remove that ticket ref.

    My guess is this is a generic fabric issue but it's made obvious in this specific case

  5. humaidk2 commented on Jun 18, 2026

    @humaidk2
    humaidk2
    on Jun 18, 2026
    ContributorAuthor

    Still was able to reproduce it in 0.86.0

  6. humaidk2 commented on Jul 14, 2026

    @humaidk2
    humaidk2
    on Jul 14, 2026
    ContributorAuthor

    Note Still can reproduce it on 0.87.0-rc.0

    exactly the same way, renders for one frame and disappears then animates in

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: FlatListNeeds: Triage 🔍Platform: AndroidAndroid applications.Type: New ArchitectureIssues and PRs related to new architecture (Fabric/Turbo Modules)

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions