Skip to content

fix(button): prevent false ripples during scroll deceleration (#4911) - #5133

Open
Priyanshu0007 wants to merge 1 commit into
callstack:mainfrom
Priyanshu0007:fix/button-scroll-deceleration-ripple
Open

Priyanshu0007 wants to merge 1 commit into
callstack:mainfrom
Priyanshu0007:fix/button-scroll-deceleration-ripple

Conversation

@Priyanshu0007

Copy link
Copy Markdown

Motivation

When tapping or touching an active Button or TouchableRipple inside a decelerating scroll view (or during quick list fling/scroll cancellation touches), the native button immediately triggers an ink ripple animation. However, when the parent ScrollView detects scrolling motion, it steals the touch gesture (cancelling the press and onPress). The button is never activated, leaving the user with false visual feedback.

This PR addresses the issue by:

  1. Exposing unstable_pressDelay?: number on Button and TouchableRipple props to forward to React Native's underlying Pressable.
  2. Providing a global ripplePressDelay?: number configuration via SettingsContext (PaperProvider), allowing apps to configure a global press delay (e.g. 50-100ms) across all paper ripple surfaces without having to pass the prop to every component manually.

Related issue

Fixes #4911

Test plan

  1. Automated Tests:

    • Added unit test in Button.test.tsx verifying unstable_pressDelay triggers onPress correctly.
    • Added unit tests in TouchableRipple.test.tsx verifying both unstable_pressDelay prop and ripplePressDelay from SettingsContext.
    • Verified all existing unit tests, linter, and type checks pass cleanly (yarn test, yarn lint, yarn typecheck).
  2. Manual Verification (Android):

    • Place buttons in a scrollable list inside <ScrollView>.
    • Configure <PaperProvider settings={{ ripplePressDelay: 80 }}> or add unstable_pressDelay={80} to <Button>.
    • Fling the scroll list and tap a button mid-deceleration: scroll stops cleanly with no false ripple.
    • Tap the button while stationary: ripple and onPress trigger as expected.

@github-actions

Copy link
Copy Markdown

Found potential problems with the pull request:

  • The description is too long. Please keep it under 1000 characters.
  • Screenshot or video evidence is missing. Make sure to include one if it affects the UI.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Buttons show false feedback when tapped during scroll deceleration

1 participant