Sticky headers in FlatList/ScrollView become non-touchable after upgrading to 0.79.2
还没有人认领这个 Issue。
- 主要语言
- C++
- 星标
- 127k
- 派生
- 25.3k
- 平均合并
- 1 天 23 小时
- 30 天内合并 PR
- 4
描述
Description
After upgrading to React Native version 0.79.2, sticky header indices (stickyHeaderIndices) in both FlatList and ScrollView components become non-responsive to touch events. The content renders correctly but fails to respond to any user interaction (taps, presses, etc.).
Expected Behavior:
Sticky headers should remain touchable/interactive as in previous versions (e.g., 0.79.1 or earlier), allowing users to interact with buttons, links, or other touchable elements within them.
Observed Behavior:
Sticky headers are visually rendered but ignore all touch events. This breaks functionality for interactive elements (e.g., buttons, checkboxes) within sticky sections.
Reproduction Steps:
Create a FlatList or ScrollView with stickyHeaderIndices set.
Add touchable elements (e.g., TouchableOpacity, Button) inside the sticky header.
Upgrade to RN 0.79.2.
Observe that touch events on sticky headers no longer work.
<ScrollView
style={{ flex: 1 }}
ref={scrollViewRef}
stickyHeaderIndices={[1]}
onScroll={handleScroll}
scrollEventThrottle={16}
nestedScrollEnabled>
.....
Environment:
React Native: 0.79.2
Platform: Android (observed)
Device: All Real devices
Steps to reproduce
Create a FlatList or ScrollView with stickyHeaderIndices set.
Add touchable elements (e.g., TouchableOpacity, Button) inside the sticky header.
Upgrade to RN 0.79.2.
Observe that touch events on sticky headers no longer work.
https://github.com/user-attachments/assets/0be351da-5c6f-49c7-a2c1-26eba46a9251
React Native Version
0.79.2
Affected Platforms
Runtime - Android
Output of npx @react-native-community/cli info
System:
OS: macOS 15.3.1
CPU: (8) arm64 Apple M2
Memory: 171.11 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: ~/.nvm/versions/node/v22.14.0/bin/node
Yarn:
version: 3.6.4
path: ~/.yarn/bin/yarn
npm:
version: 10.9.2
path: ~/.nvm/versions/node/v22.14.0/bin/npm
Watchman:
version: 2025.04.28.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/mac/.gem/ruby/3.4.0/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:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 33.0.1
- 34.0.0
- 35.0.0
- 35.0.1
System Images:
- android-29 | Google APIs ARM 64 v8a
- android-35 | Google APIs ARM 64 v8a
- android-35 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.13016713
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.14
path: /usr/bin/javac
Ruby:
version: 3.4.2
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
System:
OS: macOS 15.3.1
CPU: (8) arm64 Apple M2
Memory: 171.11 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 22.14.0
path: ~/.nvm/versions/node/v22.14.0/bin/node
Yarn:
version: 3.6.4
path: ~/.yarn/bin/yarn
npm:
version: 10.9.2
path: ~/.nvm/versions/node/v22.14.0/bin/npm
Watchman:
version: 2025.04.28.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.16.2
path: /Users/mac/.gem/ruby/3.4.0/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:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 33.0.1
- 34.0.0
- 35.0.0
- 35.0.1
System Images:
- android-29 | Google APIs ARM 64 v8a
- android-35 | Google APIs ARM 64 v8a
- android-35 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2024.2 AI-242.23726.103.2422.13016713
Xcode:
version: 16.3/16E140
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.14
path: /usr/bin/javac
Ruby:
version: 3.4.2
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 18.0.0
wanted: 18.0.0
react:
installed: 19.0.0
wanted: 19.0.0
react-native:
installed: 0.79.2
wanted: 0.79.2
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
MANDATORY Reproducer
https://github.com/ajprince21/rn-bug-1/blob/main/index.js
Screenshots and Videos
No response
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 index.js 中的必需 reproducer 开始,在 Android 上使用 React Native 0.79.2 运行它,并与 0.79.1 的行为进行比较。跟踪 FlatList 和 ScrollView stickyHeaderIndices 的交互路径;当 Android 上 sticky headers 内的可触摸元素再次响应时,即视为完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- javascript, react-native
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 48/100