Shopify / Shopify/flash-list

Horizontal FlashList unable to render nested ScrollViews

Open
#1,924 12 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

agent-fix bug P2
Dominant language
TypeScript
Stars
7.2k
Forks
393
Avg merge
1d 3h
Merged PRs (30d)
1

Description

Description

When using <FlashList horizontal /> to render multiple vertical ScrollViews, the FlashList starts glitching and can only render the first item.

Tested with versions 1.8.3 and 2.1.0:

Expo FlashList v1 FlashList v2
53
54 ⚠️

⚠️ Couldn't get v1 working on Expo 54:

View config not found for component AutoLayoutView

Current behavior

Note: the screen recording is for the simulator in Expo Snack, so there's delay compared to running this on a real device

https://github.com/user-attachments/assets/7b789cad-4d55-4a58-9bde-68c1dab85231

Expected behavior

Note: the screen recording is for the simulator in Expo Snack, so there's delay compared to running this on a real device

https://github.com/user-attachments/assets/d015a567-a67e-4e3e-8763-3d231776b520

Reproduction

https://snack.expo.dev/@arabiyya/nested-scrollview

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

⚠️ Note: I'm using Expo, so not a bare React Native project

React Native info output:
info Fetching system and libraries information...
System:
  OS: macOS 15.5
  CPU: (12) x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
  Memory: 6.06 GB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.19.4
    path: ~/.nvm/versions/node/v20.19.4/bin/node
  Yarn: Not Found
  npm:
    version: 10.8.2
    path: ~/.nvm/versions/node/v20.19.4/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.5
      - iOS 18.5
      - macOS 15.5
      - tvOS 18.5
      - visionOS 2.5
      - watchOS 11.5
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
  Xcode:
    version: 16.4/16F6
    path: /usr/bin/xcodebuild
Languages:
  Java: Not Found
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

FlashList version: 2.1.0

Additional context

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Begin with the linked Expo Snack reproduction for a horizontal FlashList containing nested vertical ScrollViews, then compare the behavior on FlashList 1.8.3 and 2.1.0 across iOS and Android. Done means the horizontal list renders all nested ScrollViews reliably rather than only the first item, without the reported glitching.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.