Horizontal FlashList unable to render nested ScrollViews
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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