Skip to content

stickyHeaderConfig.offset also pushes list content down, not just the sticky pin position #2419

Description

@sbycrosz

Description

  1. stickyHeaderConfig.offset moves the sticky pin position down, which is what the docs describe.
  2. But it also pushes the whole list content down by the same amount.
  3. The cause: FlashList renders an internal spacer view between ListHeaderComponent and the cells and gives it marginTop: offset (viewToMeasureBoundedSize in RecyclerView.tsx, around line 508).
Image

Current behavior

With stickyHeaderConfig={{ offset: 100 }}:

  • sticky headers pin 100px from the top (correct)
  • every row also shifts down 100px
  • a 100px empty gap appears between ListHeaderComponent and the first row 😵

The gap also happens without ListHeaderComponent, at the top of the content. A header just makes it more visible because the gap sits in the middle of the layout.

Expected behavior

  • the offset only changes where sticky headers pin
  • content layout stays the same

My real case: the list sits under a translucent navbar and my ListHeaderComponent already contains a spacer for it. With offset set to the navbar height, the space is counted twice. There is no way to opt out of the content shift.

Reproduction

https://snack.expo.dev/@sbycrosz/flashlist---sticky-header

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

React Native info output:
pnx expo --version
57.0.10

FlashList version: 2.3.2

Additional context

PR #1953 lists "Applies marginTop spacer to content for offset alignment", so the shift looks intentional. But the docs for offset only mention the pin position, and there is no flag to keep the content in place. Either the spacer should be optional, or it should render before ListHeaderComponent so the header clears the top bar too.

Only workaround I found is patching the package to remove the marginTop.

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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions