Description
stickyHeaderConfig.offset moves 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
ListHeaderComponent and the cells and gives it marginTop: offset (viewToMeasureBoundedSize in RecyclerView.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
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
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
Description
stickyHeaderConfig.offsetmoves the sticky pin position down, which is what the docs describe.ListHeaderComponentand the cells and gives itmarginTop: offset(viewToMeasureBoundedSizeinRecyclerView.tsx, around line 508).Current behavior
With
stickyHeaderConfig={{ offset: 100 }}: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
My real case: the list sits under a translucent navbar and my
ListHeaderComponentalready contains a spacer for it. Withoffsetset 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
Environment
React Native info output:
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
offsetonly 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 beforeListHeaderComponentso the header clears the top bar too.Only workaround I found is patching the package to remove the
marginTop.Checklist