[Android] Disable pointer events on hidden Swipeable actions container#4192
Open
jamesacklin wants to merge 1 commit into
Open
[Android] Disable pointer events on hidden Swipeable actions container#4192jamesacklin wants to merge 1 commit into
jamesacklin wants to merge 1 commit into
Conversation
## Description The left/right action containers in `ReanimatedSwipeable` are absolute-fill overlays that animate to `opacity: 0` when not revealed. On Android, an opacity-0 view still receives touches, so the hidden side stays on top in z-order and swallows taps that should reach the visible side's actions (or the row content itself). A common repro is a quick-action button exposed by a swipe: the button visibly responds to press feedback but the `onPress` never fires because the opposite-side container intercepts it. This adds a matching `pointerEvents` toggle to `leftActionAnimation` and `rightActionAnimation`, so each container becomes `'none'` alongside its opacity going to 0, and switches back to `'auto'` once revealed. iOS and web were not affected by the original bug, but the toggle is harmless on those platforms (an opacity-0 view there is already non-interactive). Fixes software-mansion#3223. ## Test plan - Carried as a local patch against `react-native-gesture-handler@2.28.0` in our app for the last few weeks. Before the patch, Android taps on a swipe-revealed action were dropped intermittently; after the patch, every tap fires on the first try. iOS behavior was unchanged. - Manual repro for reviewers: in `apps/common-app`, open a `Swipeable` example, swipe a row to reveal an action, and tap the action on Android — the action should fire on the first tap.
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
This PR aims to prevent hidden swipe action containers from intercepting taps on Android by toggling touch handling based on the left/right “shown” progress.
Changes:
- Added
pointerEventstoggling to the left actions animated style when actions are hidden vs. visible. - Added
pointerEventstoggling to the right actions animated style when actions are hidden vs. visible.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
393
to
401
| const leftActionAnimation = useAnimatedStyle(() => { | ||
| return { | ||
| opacity: showLeftProgress.value === 0 ? 0 : 1, | ||
| // Without this, Android keeps the absolute-fill left actions container | ||
| // as a touch target even at opacity 0, swallowing taps that should reach | ||
| // the row content or the opposite-side actions below in z-order. | ||
| pointerEvents: showLeftProgress.value === 0 ? 'none' : 'auto', | ||
| }; | ||
| }); |
Comment on lines
427
to
434
| const rightActionAnimation = useAnimatedStyle(() => { | ||
| return { | ||
| opacity: showRightProgress.value === 0 ? 0 : 1, | ||
| // See note on leftActionAnimation: needed so the hidden right actions | ||
| // container doesn't intercept taps on the visible left actions on Android. | ||
| pointerEvents: showRightProgress.value === 0 ? 'none' : 'auto', | ||
| }; | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
The left/right action containers in
ReanimatedSwipeableare absolute-filloverlays that animate to
opacity: 0when not revealed. On Android, anopacity-0 view still receives touches, so the hidden side stays on top in
z-order and swallows taps that should reach the visible side's actions
(or the row content itself). A common repro is a quick-action button
exposed by a swipe: the button visibly responds to press feedback but the
onPressnever fires because the opposite-side container intercepts it.This adds a matching
pointerEventstoggle toleftActionAnimationandrightActionAnimation, so each container becomes'none'alongside itsopacity going to 0, and switches back to
'auto'once revealed. iOS andweb were not affected by the original bug, but the toggle is harmless on
those platforms (an opacity-0 view there is already non-interactive).
Fixes #3223.
Test plan
react-native-gesture-handler@2.28.0in our app for the last few weeks. Before the patch, Android taps on a
swipe-revealed action were dropped intermittently; after the patch,
every tap fires on the first try. iOS behavior was unchanged.
apps/common-app, open aSwipeableexample, swipe a row to reveal an action, and tap the action on
Android — the action should fire on the first tap.