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

Nagranie.z.ekranu.2024-01-4.o.14.21.44.mov

Android

Nagranie.z.ekranu.2024-01-4.o.14.23.01.mov

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.

[marcocaldera]

I'm having the same issue, posting here for visibility in case someone found a solution.

Will keep looking myself as well.

[m-bert]

Hi! I've come back to this issue and it seems that the problem lies in the fact that Gesture Handler on iOS is designed to use native recognizers. I've looked into view hierarchy in Xcode and there's WKScrollView which seems to somehow still events.

I know it's not the best solution, but have you tried to disable scrolling inside WebView? Maybe that's what you're looking for.

<WebView
  scrollEnabled={false}
  ...
/>

Note

This prop works only on iOS

Warning

This may not work on new architecture (at least it doesn't in my case)