Sticky header appears before header items reach the top of list - FlashList v2

[phamxdinhhien]

Description

After upgrading FlashList to v2, the sticky header in my list appears before the header items are fully scrolled to the top of list. It only occurs on Flastlist v2 - it worked correctly in Flastlist v1

Expected Behavior

The sticky header should appear only after the header items reach the top of the list (as in v1).

Actual Behavior

The sticky header becomes visible too early, even while header items are still on screen.

Code Example

<FlashList
ref={listRef}
data={eventData}
renderItem={renderItem}
stickyHeaderIndices={headerIndex}
getItemType={(item) => (item.type === ITEM_TYPE.header ? 'sectionHeader' : 'row')}
contentContainerStyle={contentContainerStyle}
maintainVisibleContentPosition={{ disabled: true }}
ItemSeparatorComponent={renderItemSeparator}
onContentSizeChange={() => {
if (!isListRendered) {
setIsListRendered(true);
}
}}
/>

Simulator.Screen.Recording.-.iPhone.16.Pro.Max.-.2025-10-10.at.13.43.41.mp4

[phamxdinhhien]

I opened a PR to fix the issue here https://github.com/Shopify/flash-list/pull/1952/files
You guys can copy my fix and use patch-package to apply changes to your sourcecode

[naqvitalha]

I'd appreciate an expo snack with repro. Not sure why this is happening but we don't have thing problem in our samples.

[Mento1oS]

+1 in ejected react-native project

<FlashList
  indicatorStyle="black"
  ref={notificationsListRef}
  data={data}
  refreshControl={
    <RefreshControl />
  }
  contentContainerStyle={{paddingTop: 0}}
  estimatedItemSize={75}
  stickyHeaderConfig={{backdropComponent: null}}
  stickyHeaderIndices={
    data
      .map((item, index) => {
        if (typeof item === "string") {
          return index;
        } else {
          return null;
        }
      })
      .filter((item) => item !== null) as number[]
  }
  renderItem={({ item, index }) => {
    if (typeof item === "string") {
      return <NonScalableText>{item}</NonScalableText>
    } else {
      return renderItem(item, index);
    }
  }}
  getItemType={(item) => {
    return typeof item === "string" ? "sectionHeader" : "row";
  }}
  onEndReachedThreshold={0.2}
  onRefresh={onRefresh}
  onEndReached={handleEndReached}
  refreshing={isLoading}
/>

[Mento1oS]

Removing parental SafeAreaView from safe-area-context fixed this issue for me. Try using different approach

[Gamote]

Thank you @phamxdinhhien, this fixed our issue.

I have attached a .patch file with the changes in case anyone want a quick fix.
In Yarn v4, you can just copy the @shopify-flash-list-npm-2.0.2-f50a1acc51.patch file in .yarn/patches/, replace the package.json with "@shopify/flash-list": "patch:@shopify/flash-list@npm%3A2.0.2#~/.yarn/patches/@shopify-flash-list-npm-2.0.2-f50a1acc51.patch" and run yarn.

Patch: @shopify-flash-list-npm-2.0.2-f50a1acc51.patch

As soon as the library pushes a fix we will remove this local patch.

[naqvitalha]

This was fixed in PR #2105 (commit f07b9b3), which corrected the firstItemOffset calculation in measureParentSize. The root cause was that on Fabric, measureParentSize returned a non-zero y offset when content (e.g. safe area, padding) appeared above the FlashList, causing the sticky header overlay to activate too early.

The fix is on main and will be available in the next release (expected next week).

Please feel free to comment if the issue persists.