search

software-mansion / react-native-gesture-handler

Declarative API exposing platform native touch and gesture system to React Native.
https://docs.swmansion.com/react-native-gesture-handler/
MIT License
5.85k stars 954 forks source link

[Web] Nested Pressable inside a Swipeable captures press when swiping #2863

Open milan-digiuseppe-level opened 1 month ago

milan-digiuseppe-level commented 1 month ago

Description

Nesting a Pressable component inside a Swipeable works as expected on mobile:

  1. tapping the Pressable content fires its onPress ✅
  2. swiping the Swipeable works as expected and does not fire the Pressable onPress ✅

However, on web:

  1. tapping the Pressable content fires its onPress ✅
  2. swiping the Swipeable works as expected but also fires the Pressable onPress ❌

https://github.com/software-mansion/react-native-gesture-handler/assets/144704010/4968e4d2-b226-49b2-b229-a5c19fcfacb6

https://github.com/software-mansion/react-native-gesture-handler/assets/144704010/db8cead7-b42a-431a-a79a-6466850bc94d

Steps to reproduce

  1. Clone linked repository for minimum reproducible example
  2. Run app on web
  3. Swipe the swipeable row
    • Expected: onPress isn't fired
    • Actual: onPress is fired, alert is shown

Snack or a link to a repository

https://github.com/milan-digiuseppe-level/swipeable-nested-pressable-mvp

Gesture Handler version

2.14.1

React Native version

0.73.6

Platforms

iOS, Web

JavaScript runtime

None

Workflow

Expo managed workflow

Architecture

None

Build type

Debug mode

Device

None

Device model

No response

Acknowledgements

Yes