Skip to content

Scroll not maintained when prepending large elements #2136

@robingullo

Description

@robingullo

Description

Scroll is not maintained when prepending big enough elements at the beginning of a Flashlist of one element. This can be quite common in AI chat interfaces with long messages.

The minimum sizes of the prepended items depend on the list's draw distance and height

const drawDistance = 250; // Default value
const viewHeight = 501; // Minimum value for the bug (~= 2*drawDistance + 1)
const lastHeight = viewHeight; // At least list height to allow initial scroll at the top of the item
const beforeLastHeight = 351 + (7 * viewHeight + lastHeight) / 5; // Minimum value for the bug
const sumOfFirstTwoHeights = 501 + viewHeight; // Minimum value for the bug

const items = [
  // Prepended items
  { index: 0, height: sumOfFirstTwoHeights - 0 },
  { index: 1, height: 0 },
  { index: 2, height: beforeLastHeight },
  // Initial item
  { index: 3, height: lastHeight }, 
];

Current behavior

Render a list with one element (here in green), then prepend items with sizes matching above criteria (here in red)
=> The list shows one of the (red) prepended elements

Enregistrement.de.l.ecran.2026-03-05.a.13.28.43.mov

Expected behavior

The list still shows the initial (green) element

Reproduction

Expo Snack or minimal reproduction link:
https://snack.expo.dev/@robingullomistral/flash-list-maintain-scroll-bug
The snack uses Expo 54, but I can reproduce as well on my Expo 55 app.

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

React Native info output: System: OS: macOS 26.2 CPU: (10) arm64 Apple M4 Memory: 183.27 MB / 24.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 22.17.1 path: ~/.local/state/fnm_multishells/98422_1772707148989/bin/node Yarn: Not Found npm: version: 10.9.2 path: ~/.local/state/fnm_multishells/98422_1772707148989/bin/npm Watchman: version: 2025.07.14.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.16.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 25.2 - iOS 26.2 - macOS 26.2 - tvOS 26.2 - visionOS 26.2 - watchOS 26.2 Android SDK: API Levels: - "35" - "36" Build Tools: - 35.0.0 - 36.0.0 - 36.1.0 System Images: - android-35 | Google Play Tablet ARM 64 v8a - android-36 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2025.2 AI-252.28238.7.2523.14688667 Xcode: version: 26.3/17C529 path: /usr/bin/xcodebuild Languages: Java: version: 17.0.16 path: /usr/bin/javac Ruby: version: 2.6.10 path: /Users/robin.gullo/.rbenv/shims/ruby npmPackages: "@react-native-community/cli": installed: 20.1.2 wanted: ^20.1.2 react: installed: 19.2.0 wanted: 19.2.0 react-native: installed: 0.83.2 react-native-macos: Not Found npmGlobalPackages: "*react-native*": Not Found Android: hermesEnabled: true newArchEnabled: true iOS: hermesEnabled: true newArchEnabled: true

FlashList version: 2.3.0

Checklist

  • I've searched existing issues and couldn't find a duplicate
  • I've provided a minimal reproduction (Expo Snack preferred)
  • I'm using the latest version of @shopify/flash-list
  • I've included all required information above

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions