stickyHeaderConfig.offset also pushes list content down, not just the sticky pin position
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 392
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 1
Description
Description
stickyHeaderConfig.offsetmoves the sticky pin position down, which is what the docs describe.- But it also pushes the whole list content down by the same amount.
- The cause: FlashList renders an internal spacer view between
ListHeaderComponentand the cells and gives itmarginTop: offset(viewToMeasureBoundedSizeinRecyclerView.tsx, around line 508).
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
ListHeaderComponentand 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
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
Start in RecyclerView.tsx around viewToMeasureBoundedSize near line 508, where the issue identifies the marginTop spacer, and review PR #1953 for its intended alignment behavior. Reproduce the issue with the linked Expo Snack using stickyHeaderConfig.offset and verify that the offset still affects sticky pinning without adding a content gap or shifting list rows.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100