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

[milan-digiuseppe-level]

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

[dannybit]

Seeing a similar issue on iOS.

[latekvo]

Hi, could you please let me know if this issue is resolved? I couldn't reproduce it with the example you provided on neither web, iOS or android.

If you were to encounter issues, please try replacing Swipeable with ReanimatedSwipeable which is currently available on the main branch and let me know if that works, as the Swipeable you're using in that example will be deprecated in the upcoming release.

[milan-digiuseppe-level]

Hi @latekvo ! I checked out my repository and bumped react-native-gesture-handler to latest (2.17.1) but I'm still able to reproduce the bug on web.

I also tried ReanimatedSwipeable by:

• cloning react-native-gesture-handler, checking out main, and pulling the latest changes
• running the example app on web via cd example && yarn install && yarn web
• updating example/src/release_tests/swipeableReanimation/index.tsx to put a Pressable inside ReanimatedSwipeable like so:

<ReanimatedSwipeable
  containerStyle={styles.swipeable}
  friction={2}
  leftThreshold={80}
  enableTrackpadTwoFingerGesture
  rightThreshold={40}
  renderLeftActions={LeftAction}
  renderRightActions={RightAction}>
  <Pressable
    onPress={() => alert('pressed!')}
    style={{
      padding: 20,
      backgroundColor: 'pink',
      alignItems: 'center',
    }}>
    <Text>Nested pressable</Text>
  </Pressable>
</ReanimatedSwipeable>

Even this reproduced the bug, video attached

https://github.com/user-attachments/assets/a57d034b-e876-48dc-b99d-9e0a43b492ca

[latekvo]

Hi @milan-digiuseppe-level, thanks for the elaboration.

I tested the issue once again on the following code, which i believe is in line with the example you provided.

In addition it tests the following cases:

• Reanimated Swipeable with Gesture Handler Pressable
• Reanimated Swipeable with React Native Pressable
• Deprecated Swipeable with Gesture Handler Pressable
• Deprecated Swipeable with React Native Pressable

I once again couldn't replicate the exact issue you reported.

Although I did manage to find other issues which might be related to the one you reported.

• Gesture Handler Pressable test cases on web weren't swipeable at all.
• Gesture Handler Pressable had trouble rendering on all platforms without explicitly setting their width and height.

I will address these issues in a separate PR, I'll try to resolve as soon as possible.

Did the issues you reported occur on other platforms than web? On the video you provided it looks like the platform you're using for testing is web which as I said has it's issues.

---

Here is a video of how the tests went, tested on an iOS simulator and an Android emulator.

https://github.com/user-attachments/assets/30e608c5-127a-45a5-b4b6-8f0e44688d47

Please note that at 0:33 it looks like the "Deprecated Swipeable with React Native Pressable" on android example displayed the behaviour you reported, but I believe it's caused by my finger slipping instead of the actual error occuring.

[latekvo]

@milan-digiuseppe-level please let me know if this PR fixes your issue.