Nested LongPressGestureHandlers, events are bubbling up in web

[eVoloshchak]

Description

When you have a LongPressGestureHandler nested inside another LongPressGestureHandler, both of their onHandlerStateChange are fired at the same time

Platforms

• [ ] iOS
• [ ] Android
• [x] Web

Screenshots

https://user-images.githubusercontent.com/9059945/165531235-a8734afa-2d83-412c-83b2-f07be86f74a2.mp4

Steps To Reproduce

1. Have LongPressGestureHandler nested inside anoher LongPressGestureHandler

Expected behavior

onHandlerStateChange of only the the inner LongPressGestureHandler is fired ('pressed 2' is outputed to the console)

Actual behavior

onHandlerStateChange of both LongPressGestureHandlers if fired ('pressed 1' and 'pressed 2' outputed to the console)

Snack or minimal code example

https://snack.expo.dev/jNm9pkOTP

export default function App() {
  const onLongPress = (e, index) => {
    if (e.nativeEvent.state !== State.ACTIVE) {
      return;
    }
    console.log('pressed ', index)
  }

  return (
    <LongPressGestureHandler onHandlerStateChange={(e) => onLongPress(e, 1)} >
      <LongPressGestureHandler onHandlerStateChange={(e) => onLongPress(e, 2)} >
        <View>
          <Text>{'Long press me'}</Text>
        </View>
      </LongPressGestureHandler>
    </LongPressGestureHandler>
  );
}

Package versions

• React: 17.0.2
• React Native Gesture Handler: 2.1.0

[m-bert]

Hi, this issue should be fixed in 2.6.1

Note that this change is available in new web implementation. To enable it, call enableExperimentalWebImplementation() in the root of your project.

[eVoloshchak]

Thank you! I've actually encountered the same issue for iOS, is there a possibility this could have been fixed in 2.6.1 too?

[m-bert]

It would be nice if you could share repro to check that. The other thing is, major part of 2.6.1 was fixing issues on web version, so if that didn't work on 2.6.0, 2.6.1 probably won't fix it. If you haven't tried 2.6.0 yet, you can - maybe this will help.