callstack / callstack/react-native-paper
Buttons show false feedback when tapped during scroll deceleration
- 主要语言
- TypeScript
- 星标
- 14.5k
- 派生
- 2.2k
- 平均合并
- 5 天 23 小时
- 30 天内合并 PR
- 12
描述
### Current behaviour
`` and `` components show visual feedback (ripples) on Android when tapped while a higher-level scrollview is in the process of decelerating or bouncing. Because the press/tap is captured as a stop to the scrolling, onPress does not fire. Result: The user sees button feedback but the button's action does not fire. iOS does not show this behavior as the effect is drawn differently.
### Expected behaviour
The tap should stop the scroll and not show visual feedback indicating a press would result in an action being taken. Some of our users report having to "tap twice" to do things when in reality their first tap wasn't valid but the feedback makes them think it is.
### How to reproduce?
Nest a button or icon button in a scrollview. Accelerate the scroll, then while decelerating or bouncing, quickly tap the button. Feedback occurs but onPress does not fire.
[Snack Link](https://snack.expo.dev/@chaueisen-yates/scrollable-feedback-repro)
### Preview
iOS:
https://github.com/user-attachments/assets/859a338b-9ccc-40a8-8e45-904e69bb3410
Android:
https://github.com/user-attachments/assets/d794a127-cf0f-4afa-a9ff-cc517e29e6ce
### What have you tried so far?
- unstable_pressDelay={100}: Does remediate the issue but will introduce lower responsiveness and cannot be passed into ``, only ``.
- Disabling ripple in PaperProvider: Disables the native ripple effect on Android but also disables press effects on iOS.
- Replacing effect with a wrapped button & icon button:
- Causes layout issues beyond belief and requires that we revise accessibility on these components and use `touchEvents={"none"}` on buttons.
- Using wrapper components from React Native Gesture Handler solves the issue but introduces a delay in touch feedback across the board, making the app feel significantly less responsive
### Your Environment
| software | version
| --------------------- | -------
| ios | 26.4.1
| android | 16
| react-native | 0.83.2
| react-native-paper | 5.15.0
| node | 24.14.1
| npm or yarn | 11.11.0
| expo sdk | 55.0.0
贡献指南
调研方向
首先,使用嵌套在 ScrollView 中的 Button 和 IconButton,复现链接 Snack 中的问题,重点关注 Android 上滚动的减速和回弹。跟踪组件的按压反馈和 onPress 行为,以确定滚动何时会消耗 tap。完成标准是:停止滚动的 tap 不显示误导性的反馈,而普通按压仍保留其反馈和操作。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- android, react-native, typescript
- 领域
- mobile
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 52/100