callstack / callstack/react-native-paper

Buttons show false feedback when tapped during scroll deceleration

Ouverte
#4,911 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème du Snack lié avec Button et IconButton imbriqués dans un ScrollView, en vous concentrant sur la décélération et le rebond du défilement sous Android. Suivez le feedback de pression et le comportement de onPress des composants afin de déterminer quand le défilement consomme le tap. Le travail est terminé lorsqu’un tap qui arrête le défilement n’affiche aucun feedback trompeur, tandis que les pressions ordinaires conservent leur feedback et leurs actions.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
android, react-native, typescript
Domaine
mobile
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
52/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.