Sticky headers in FlatList/ScrollView become non-touchable after upgrading to 0.79.2
まだ誰も着手していません。
- 主要言語
- C++
- スター
- 127k
- フォーク
- 25.3k
- 平均マージ
- 1日 23時間
- マージ済み PR(30日)
- 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 にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
index.js にある必須の reproducer から始め、React Native 0.79.2 を使用して Android で実行し、0.79.1 と動作を比較します。FlatList と ScrollView stickyHeaderIndices のインタラクション経路を追跡します。Android で sticky header 内のタッチ可能な要素が再び反応するようになれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- javascript, react-native
- 領域
- mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 48/100