Android: Block vertical ScrollView gestures when panning/pinching horizontally inside a WebView (Clarification or Issue)

[peterpme]

Hi there,

I've been trying to figure out how to prevent vertical scrolling inside of a ScrollView. I've been following many of @Gaeron's post (below) and while I believe his scenarios have been fixed, I still think there's problems working with a WebView:

• requireExternalGestureToFail and blocksExternalGesture don't work reliably #3326
• blocksExternalGesture does not work with PagerView #3268
• blocksExternalGesture with Gesture.Native() does not block a ScrollView #3267

I've upgraded to 2.22.0 after reading an issue about how WebView panning has been fixed in native (which it has!) but I'm still struggling to figure this scenario out:

<ScrollView>
    <GestureDetector>
        <Webview />
    </GestureDetector>
</ScrollView>

I previously thought I could use something like

const scrollview = Gesture.Native().requireExternalGestureToFail(webviewPanning)

But that didn't do anything, on the contrary, it stopped the Webview from working as well. I created this Snack that includes what I'm trying to get done but no variation of these seems to help:

  const webview = Gesture.Native()
    .blocksExternalGesture(scrollview)
    .shouldActivateOnStart(true)
    .shouldCancelWhenOutside(true)
    .disallowInterruption(true);

What am I doing wrong?

Ultimately, this is what I came up with. It works but I feel like I should be able to do this using the gesture responder exclusively. Am I wrong? Any help would be appreciated. Thank you!

function PanningWebviewExample() {
  const scrollViewRef = useRef<ScrollView>(null);
  const webview = Gesture.Native()
    .shouldActivateOnStart(true)
    .disallowInterruption(true);

  // Function to handle scrolling
  const handleScroll = (translationY: number) => {
    if (scrollViewRef.current) {
      scrollViewRef.current.scrollTo({
        y: 420,
        animated: true,
      });
    }
  };

  const pan = Gesture.Pan()
    .maxPointers(2)
    .onUpdate((event) => {
      "worklet";
      const { translationY, translationX, velocityY, velocityX } = event;

      // Minimum vertical movement required (in points)
      const VERTICAL_THRESHOLD = 30;

      // Ratio of vertical to horizontal movement required
      // Higher = more vertical movement needed compared to horizontal
      const VERTICAL_RATIO_THRESHOLD = 3;

      // Minimum velocity for the gesture (points per second)
      const VELOCITY_THRESHOLD = 300;

      const verticalRatio =
        Math.abs(translationY) / (Math.abs(translationX) || 0.1);
      const hasMinimumVerticalMovement =
        Math.abs(translationY) > VERTICAL_THRESHOLD;
      const isVerticalGesture = verticalRatio > VERTICAL_RATIO_THRESHOLD;
      const hasSignificantVelocity = Math.abs(velocityY) > VELOCITY_THRESHOLD;
      const isDownward = translationY < 0;

      if (
        isVerticalGesture &&
        hasMinimumVerticalMovement &&
        hasSignificantVelocity &&
        isDownward
      ) {
        runOnJS(handleScroll)(translationY);
      }
    });

  const gesture = Gesture.Simultaneous(webview, pan);
  return (
    <ScrollView
      ref={scrollViewRef}
      horizontal={false}
      bounces={true}
      directionalLockEnabled={true}
      showsVerticalScrollIndicator={false}
      style={{ flex: 1 }}
      contentContainerStyle={{ paddingBottom: 16 }}
    >
    <GestureDetector gesture={gesture}>
      <WebView source={{uri: 'https://google.com'}} />
        </GestureDetector>
    </ScrollView>
  );
};

Thank you!