Duplicate sticky header appears when scrolling or collapsing section

[EveJulliard]

Description

After upgrading to FlashList v2.0.2 and enabling the New Architecture, we’ve started experiencing regressions related to sticky header rendering — especially when using multiple sticky headers and a collapsible section.

Current behavior

When scrolling down to a section with a sticky header, the header briefly appears twice — one in its list position and one in the sticky position — as if the sticky instance were rendered too early.
This results in a visible flicker or duplication effect.

Header appears twice	Collapsed header overlapped with itself
	https://github.com/user-attachments/assets/4d7e1b96-1d3d-4f0c-a0d1-16bc69b94bee

Additionally, we have a collapsible header separating the first section of our list. When this header is collapsed, there’s a clear overlap between two instances of the same header (one inline, one sticky).
To make this behavior more noticeable, we applied a different borderBottomColor to the collapsible header, which highlights that both headers are being rendered at the same time.

Expected behavior

Sticky headers should remain smooth and stable while scrolling.
At any given time, only one instance of a header (either inline or sticky) should be visible.
Collapsing a section should not cause the sticky and inline versions of that header to overlap or duplicate.

Reproduction

Expo Snack or minimal reproduction link:

Expo Snack Repro

Platform

• iOS
• Android
• Web (if applicable)

Environment

React Native info output:

System:
OS: macOS 15.4.1
CPU: (10) arm64 Apple M1 Pro
Memory: 182.48 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.18.0
path: /Users/evej/Library/Caches/fnm_multishells/34718_1760968506490/bin/node
Yarn:
version: 4.5.1
path: /opt/homebrew/bin/yarn
npm:
version: 10.8.2
path: /Users/evej/Library/Caches/fnm_multishells/34718_1760968506490/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.16.2
path: /Users/evej/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.4
- iOS 18.4
- macOS 15.4
- tvOS 18.4
- visionOS 2.4
- watchOS 11.4
Android SDK: Not Found
IDEs:
Android Studio: 2025.1 AI-251.26094.121.2513.14007798
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.15
path: /usr/bin/javac
Ruby:
version: 2.7.5
path: /Users/evej/.rvm/rubies/ruby-2.7.5/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 20.0.2
wanted: latest
react:
installed: 19.1.0
wanted: 19.1.0
react-native:
installed: 0.81.4
wanted: 0.81.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true

FlashList version: 2.1.0

Additional context

For now we just made the header 1 not collapsable but it is a product regression

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

[L-Weisz]

+1

[phamxdinhhien]

It works for me
You can use patch-package to apply this fix
#1952

[EveJulliard]

I’m having trouble applying the fix. Could you explain in more detail how I should proceed?

[RodolfoSilva]

Snack https://snack.expo.dev/@rodolfosilva/laughing-red-watermelon?platform=ios

Another weird behavior is that the header becomes sticky too often.

[phamxdinhhien]

I’m having trouble applying the fix. Could you explain in more detail how I should proceed?

You go to /node_modules/@shopify/flash-list/src/recyclerview/components/StickyHeaders.tsx and applying my fix into this file
Then run npx patch-package @shopify/flash-list

[RodolfoSilva]

You can try this patch @EveJulliard.

@shopify+flash-list+2.2.0.patch

Save this file in the patches folder

But this does't fix my issue.

[Luanluu96]

@RodolfoSilva @EveJulliard I found new way to fix this issue, here is my patch

@shopify+flash-list+2.2.0.patch

[RodolfoSilva]

So the solution was that @Luanluu96 replaced nextIndex with the current index (newStickyIndex), right? That seems to work.

[Luanluu96]

i have updated the offset to fix opacity
@shopify+flash-list+2.2.0.patch

[L-Weisz]

Hello @Luanluu96 I work with @EveJulliard , thanks for your patch , however we tried it and it doesnt solve the issue and have glitches

WhatsApp.Video.2025-11-26.at.16.52.58.mp4

[Luanluu96]

Hi @L-Weisz my patch have opacity when you scroll to header stick, im not sure the patch applied or not

you can go to the node_modules/@shopify/flash-list/src/recyclerview/components/StickyHeaders.tsx and check line 217 to see it have my code or not

if dont have my code you can try this patch
#1959 (comment)

demo for my patch
https://github.com/user-attachments/assets/574d84b3-4e1f-4443-a5c9-9b1e3e88d906

if you using yarn > v3 then you should replace patch-package to yarn patch

in package.json find resolutions

add this line
"@shopify/flash-list": "patch:@shopify/flash-list@npm:2.2.0#./patches/@Shopify+flash-list+2.2.0.patch",

[L-Weisz]

thanks @Luanluu96 indeed I redid it and it looks like that now

demopatch.mp4

[Luanluu96]

thanks @Luanluu96 indeed I redid it and it looks like that now

demopatch.mp4

Hi @L-Weisz I added the safe area insets.top to calculate sticky for my case
you can remove it by

stickyHeaderConfig={{
  stickyHeaderTopOffset: 0
}}

try this patch to resolve eslint
@shopify+flash-list+2.2.0.patch