Overlapping buttons cause buttons to stop being responsive

[oblador]

Description

Similar scenario as described in #3350 but a different cause. Basically when having to buttons on top of each other and tapping in that overlapping area, they both trigger (see video) but only the frontmost button is properly cancelled (the backmost is stuck in highlighted mode).

This cause all buttons to become unresponsive, the only way to get back into responsive state is if you tap the highlighted button again, which is not always possible if you navigate to a new screen for example.

screen-20250131-174356.2.mp4

Steps to reproduce

1. Make two buttons overlap each other (partially or fully)
2. Press the topmost button
3. Taps don't work anymore

This happens only on Android, but both in debug/release, on JSC/Hermes and on Bare/Expo.

Snack or a link to a repository

https://snack.expo.dev/@oblador/gesture-handler-overlap-reproduction

Gesture Handler version

2.20.2

React Native version

0.76

Platforms

Android

JavaScript runtime

Hermes

Workflow

None

Architecture

Paper (Old Architecture)

Build type

Release mode

Device

Android emulator

Device model

No response

Acknowledgements

Yes

[RohovDmytro]

Thanks for bringing steps to reproduce.

One thing I can put on top is that is was quite uneasy to detect and this is not that uncommon. It my case it was scrolling container with pressable items + FAB = horror stories in production :)

The workaround for me was to use different pressable component for a FAB.