Horizontal FlashList unable to render nested ScrollViews

[abdullahibneat]

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

FlashList.v2.mov

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

FlashList.v1.mov

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

[abdullahibneat]

Did some further investigation by running a development build locally with the same code as in the snack linked above:

Expo 54 - FlashList 2.1.0

Screen.Recording.2025-09-26.at.12.16.28.mov

Every time the screen flashes, this console.log appears:

 WARN  -[UIView(ComponentViewProtocol) updateLayoutMetrics:oldLayoutMetrics:]: Received invalid layout metrics ({{1.3358741357638405e+38, 0}, {inf, 1700}}) for a view (<RCTScrollViewComponentView: 0x1124fe9b0; frame = (-8.98847e+307 -8.98847e+307; 1.79769e+308 1.79769e+308); transform3D = [nan, 0, 0, 0; nan, 1, 0, 0; nan, 0, 1, 0; nan, nan, nan, nan]; clipsToBounds = YES; tag = 1244; layer = <CALayer: 0x600000331500>>).

When I try to scroll the <ScrollView />, this log appears:

The value `scrollView.contentOffset.y` equals NaN or INF and will be replaced by `0`.

Scrolling the <FlashList /> horizontally doesn't produce additional logs, just the "updateLayoutMetrics".

Expo 54 - FlashList 1.8.3

Screen.Recording.2025-09-26.at.12.28.01.mov

The only log is this warning because I didn't set the estimatedItemSize prop:

estimatedItemSize FlashList prop is not defined - based on current configuration you can set it to 401 to optimize list performance. Refer to FlashList documentation for more details.