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>
);
}