Description
We are using a two column layout to display events with sticky day headers. Because of this unique arrangement, the stickyheader is blocking interaction from any elements beneath it.
When using stickyHeaderIndices with numColumns > 1, the sticky header's CompatAnimatedView container (position: absolute, left: 0, right: 0, zIndex: 2 in StickyHeaders.tsx) spans the full width of the list and intercepts all touch events on the content directly below it.
In our case this means the first item rendered next to a sticky header cannot be pressed.
Theoretically the fix is a one-line change: adding pointerEvents="box-none" to the CompatAnimatedView in StickyHeaders.tsx, which makes the container itself transparent to touches while keeping its children (the header content) interactive.
Current behavior
I've produced a working example:
https://snack.expo.dev/@pridgeyt/flashlist-stickyheader?platform=web
Expected behavior
When pressing on a header, the input event is not blocked and is passed through.
Reproduction
Expo Snack or minimal reproduction link:
Expo Snack Reproduction
Platform
Environment
React Native info output:
System:
OS: macOS 26.3.1
CPU: (14) arm64 Apple M4 Max
Memory: 353.56 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.15.1
path: /Users/pridgey/.nvm/versions/node/v22.15.1/bin/node
Yarn:
version: 3.6.4
path: /opt/homebrew/bin/yarn
npm:
version: 10.9.2
path: /Users/pridgey/.nvm/versions/node/v22.15.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.16.2
path: /Users/pridgey/.rbenv/shims/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.1 AI-251.26094.121.2513.14007798
Xcode:
version: 26.0.1/17A400
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.8
path: /opt/homebrew/opt/openjdk@21/bin/javac
Ruby:
version: 3.4.7
path: /Users/pridgey/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.2.0
wanted: 19.2.0
react-native:
installed: 0.83.4
wanted: 0.83.4
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
FlashList version: 2.2.2
Additional context
There appears to be a closed issue from 2020:
facebook/react-native#28963
Checklist
Description
We are using a two column layout to display events with sticky day headers. Because of this unique arrangement, the stickyheader is blocking interaction from any elements beneath it.
When using stickyHeaderIndices with numColumns > 1, the sticky header's CompatAnimatedView container (position: absolute, left: 0, right: 0, zIndex: 2 in StickyHeaders.tsx) spans the full width of the list and intercepts all touch events on the content directly below it.
In our case this means the first item rendered next to a sticky header cannot be pressed.
Theoretically the fix is a one-line change: adding pointerEvents="box-none" to the CompatAnimatedView in StickyHeaders.tsx, which makes the container itself transparent to touches while keeping its children (the header content) interactive.
Current behavior
I've produced a working example:
https://snack.expo.dev/@pridgeyt/flashlist-stickyheader?platform=web
Expected behavior
When pressing on a header, the input event is not blocked and is passed through.
Reproduction
Expo Snack or minimal reproduction link:
Expo Snack Reproduction
Platform
Environment
React Native info output:
FlashList version: 2.2.2
Additional context
There appears to be a closed issue from 2020:
facebook/react-native#28963
Checklist