callstack / callstack/react-native-paper

Buttons show false feedback when tapped during scroll deceleration

Đang mở
#4,911 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### 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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện vấn đề từ Snack được liên kết với Button và IconButton được lồng trong một ScrollView, tập trung vào hiện tượng giảm tốc và bật nảy khi cuộn trên Android. Theo dõi press-feedback và hành vi onPress của các component để xác định khi nào thao tác cuộn tiêu thụ tap. Hoàn thành khi một tap dừng thao tác cuộn không hiển thị feedback gây hiểu lầm, trong khi các lần nhấn thông thường vẫn giữ lại feedback và các action của chúng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
android, react-native, typescript
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Ít trao đổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
52/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.