Duplicate Sticky Headers

[brilliantinsane]

Description

When using sticky headers, duplicates are created/visible.
On iOS when I am at the top of the screen and scroll up the second sticky header appears.
Otherwise - when scrolling up or down and reaching the next sticky header before the next one "takes over" it appears twice.

Current behavior

Duplicate Sticky Headers

Expected behavior

No duplicates

Reproduction

Expo Snack: https://snack.expo.dev/@balsabalsa/blissful-yellow-chocolate

Video:

Screen.Recording.2025-12-05.at.15.22.59.mov

Expo Snack or minimal reproduction link: https://snack.expo.dev/@balsabalsa/blissful-yellow-chocolate

Platform

• iOS
• Android
• Web (if applicable)

Environment

React Native info output:

System:
  OS: macOS 26.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 131.73 MB / 32.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.11.0
    path: /Users/opx/.nvm/versions/node/v24.11.0/bin/node
  Yarn: Not Found
  npm:
    version: 11.6.1
    path: /Users/opx/.nvm/versions/node/v24.11.0/bin/npm
  Watchman:
    version: 2025.04.14.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.2 AI-252.25557.131.2521.14344949
  Xcode:
    version: 26.0/17A324
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.15
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.2
    wanted: ^20.0.2
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.5
    wanted: 0.81.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

FlashList version: Both 2.0.2 and 2.2.0

Additional context

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

[brilliantinsane]

Update: I can get rid of duplicate sticky header by providing:

stickyHeaderConfig={{
  hideRelatedCell: true
}}

But then another weird issue pops up. Now sticky headers are "jumpy". Please check the video for reference.

Screen.Recording.2025-12-08.at.12.25.37.mov

I have updated the snack (https://snack.expo.dev/@balsabalsa/blissful-yellow-chocolate) to include stickyHeaderConfig. You can comment it out/in to check the behaviours.

Maybe I am doing something wrong and I get this kind of issues, if so, please point it out.

Thanks in advance!

[brilliantinsane]

I ended up fixing the issue in my particular case. The issue was putting basically anything ABOVE the FlashList within the same <View />.

For example this code is not going to work (it will cause the issues I point out in the video and in my snack):
Non-working example:

Screen.Recording.2025-12-09.at.16.05.39.mov

<View style={{ flex: 1 }}>
  <FlatList /> or <View /> or <ScrollView /> or anything really that has a height (fixed or auto)
  <FlashList />
</View>

But this will work fine:
Working example:

Screen.Recording.2025-12-09.at.15.55.22.mov

<View style={{ flex: 1 }}>
  <FlatList /> or <View /> or <ScrollView /> or anything really that has a height (fixed or auto)
  <View style={{ flex: 1 }}>
    <FlashList />
  </View>
</View>

I hope this will help somebody in the future who faces a similar issue.

Here is a snack with both working and non-working example (check comments inside render function): https://snack.expo.dev/@balsabalsa/intelligent-indigo-scones