Skip to content

nestedScrollEnabled not working with horizontal paginated LegendList containing vertical LegendList #312

@ludwig-pro

Description

@ludwig-pro

Description

When using a horizontal paginated LegendList that contains vertical
LegendList components (one per page), the nestedScrollEnabled prop
doesn't work as expected. The vertical lists inside each page cannot
be scrolled, making the nested content inaccessible.

Current Behavior

  • The horizontal paginated LegendList works correctly for swiping
    between pages
  • The vertical LegendList inside each page is rendered but cannot be
    scrolled (bounce effect on iOS)
  • Setting nestedScrollEnabled on both lists doesn't resolve the
    issue
  • Only the parent (horizontal) scroll gesture work correctly
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-09-09.at.13.52.43.mp4

Expected Behavior

  • Both horizontal pagination and vertical scrolling should work
    simultaneously
  • When touching and dragging vertically on a page, the vertical
    LegendList should scroll
  • When swiping horizontally, the pages should change
  • This is the standard behavior with native FlatList when using
    nestedScrollEnabled
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-09-09.at.14.06.35.mp4

Steps to Reproduce

  1. Create a horizontal LegendList with pagingEnabled={true} and
    nestedScrollEnabled={true}
  2. In each page, render a vertical LegendList with
    nestedScrollEnabled={true}
  3. Add enough items in the vertical list to require scrolling
  4. Try to scroll the vertical list - it won't respond to scroll
    gestures

Code Example

  // Parent horizontal paginated list
  <LegendList
    data={tabs}
    renderItem={({ index }) => (
      <View style={{ width: screenWidth }}>
        {/* Child vertical list */}
        <LegendList
          data={items}
          renderItem={renderCard}
          nestedScrollEnabled={true}
          estimatedItemSize={100}
        />
      </View>
    )}
    horizontal
    pagingEnabled
    nestedScrollEnabled={true}
    estimatedItemSize={screenWidth}
  />

Environment

  • @legendapp/list: 2.0.4
  • react-native: 0.79.6
  • expo: ~53.0.22
  • Platform: iOS / Android?
  • New Architecture: Enabled

Additional Context

Reproduction Repository

https://github.com/ludwig-pro/legendlist-nested-scroll-enabled

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions