How to enable swipe down gesture to dismiss WebView in BottomSheet

1k Views Asked by At

I have a react-native-bottom-sheet that can be dismissed by swiping down. When I add a react-native-webview (WebView) to the BottomSheet, I am no longer able to dismiss the BottomSheet by swiping down. The swipe gesture is only being handled by the WebView.

Other scrollable content works great by putting them in a BottomSheetScrollView, but since the WebView handles the scrolling, the BottomSheetScrollView isn't gonna work for this application.

Is there a way to imitate the scroll behavior of the BottomSheetScrollView in the WebView component? Can I somehow pass a ref to either the WebView or the BottomSheet to tell one or the other to have priority of the swipe gesture?

Below is a simplified version of my code:

import React, { useMemo } from 'react';
import { View } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { WebView } from 'react-native-webview';

const ModalView = () => {
  const snapPoints = useMemo(() => ['85%'], []);

  return (
    <BottomSheet
      snapPoints={ snapPoints }
      enablePanDownToClose={ true }
    >
      <View style={{ flex: 1 }}>
        <WebView
          source={{ uri: 'https://www.google.com' }}
        />
      </View>
    </BottomSheet>
  );
}

0

There are 0 best solutions below