Panning gesture cannot working with Webview component

[LarenDorr]

Description

Unable to detect panning gestures for the Webview(react-native-webview) component. Only onFinalize event is triggered in vertical panning. Horizontal panning works normally. Example:

export default function App() {
  const gesture = Gesture.Pan()
    .onStart(e => {
      console.log('onStart');
    })
    .onUpdate(e => {
      console.log(`onUpdate`);
    })
    .onEnd(() => {
      console.log('onEnd');
    })
    .onFinalize(e => {
      console.log('onFinalize');
    });
  return (
    <View style={styles.container}>
      <GestureDetector gesture={gesture}>
        <View style={{ flex: 1 }}>
          {/* For webview, only onFinalize event is triggered in vertical panning, horizontal panning works normally.  */}
          <WebView source={{ uri: 'https://github.com/software-mansion/react-native-gesture-handler' }} />
          {/* For view, all normal  */}
          <View style={{ height: 200 }}></View>
        </View>
      </GestureDetector>
    </View>
  );
}

Steps to reproduce

Above code.

Snack or a link to a repository

https://snack.expo.dev/XvDJr8BQq

Gesture Handler version

2.8.0

React Native version

0.70.5

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[Darren120]

any solution?

[syned01]

Same problem here Can't recognize gestures from WebView on IOS, Android works fine

[m-bert]

Hi! I've just looked into it. First of all, I'm pretty sure that the problem lies in scrolling, so horizontal panning also doesn't work (if you have a component that has horizontal scroll). You can see that in the videos below:

iOS

https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/b982456b-a3ea-4be3-97a1-ea20120bf162

Android

https://github.com/software-mansion/react-native-gesture-handler/assets/63123542/23501ffb-37d1-41b5-b092-72a5f60263df

As you can see on iOSwe can see onFinalize log with state 1, which means that gesture has failed. On the other hand, gesture on android ends successfully.

Can't recognize gestures from WebView on IOS, Android works fine

It looks like it's a bit more complicated. In the case above, is it true that "Android works fine"? I have yet to find whether this difference is caused by Gesture Handler logic, or is it difference in webview implementations.

The other question is, what is expected behavior in the case above, should it be only scrolling, only panning, or both of them active at the same time? Right now on native platforms if you wrap items with Pan into ScrollView, Pan will cancel scrolling.