Embedded WebViews are not interactive on Android

Bug

WebView is not interactive on Android (works fine on iOS) even with NativeViewGestureHandler. Cannot scroll, and tapping works occasionally but usually just selects text. Perhaps related to WebView moving out of react-native and into its own library? See https://github.com/software-mansion/react-native-gesture-handler/issues/648.

Environment info

Library	Version
@gorhom/bottom-sheet	^2
react-native	0.63.4
react-native-reanimated	^1.13.2
react-native-gesture-handler	^1.10.1
react-native-webview	^11.4.3

Steps To Reproduce

1. Embed a webview into a bottom sheet component
2. Try scrolling or tapping items in the webview

Describe what you expected to happen:

1. WebView gestures should work

Reproducible sample code

<BottomSheet index={1} snapPoints={[0, '85%']}>
  <NativeViewGestureHandler disallowInterruption={true}>
    <WebView
      originWhitelist={['*']}
      scalesPageToFit={true}
      source={{
        uri: 'https://news.ycombinator.com/',
      }}
      contentMode="mobile"
    />
  </NativeViewGestureHandler>
</BottomSheet>

Android (doesn’t work):

https://user-images.githubusercontent.com/695981/122829982-8b603000-d29c-11eb-8bf5-04f3aca6a0de.mov

iOS (does work):

https://user-images.githubusercontent.com/695981/122830019-9adf7900-d29c-11eb-9006-f726f5775ce3.mov

[enestatli]

My workaround for such cases using waitFor prop as below

...

const gestureRef = useRef(null);

...

<BottomSheet waitFor={gestureRef} ref={bottomSheetRef}>
        <NativeViewGestureHandler ref={gestureRef}>
              <WebView source={{ uri: 'https://www.google.com' }} />
        </NativeViewGestureHandler>
</BottomSheet>

[hadus07]

I have a hacky solution that works! You need to set nestedScrollEnabled on your WebView. However, it disables the pull to dismiss feature. In order to recreate this behavior you need to do the following:

const [nestedScrollEnabled, setNestedScrollEnabled] = useState(true)

---

const injectedJavaScript = `
	let lastScrollTop = 0

	window.addEventListener('touchstart', function(e) {
		window.ReactNativeWebView.postMessage('enable_scroll')
	})

	window.addEventListener('touchend', function() {
		let st = window.pageYOffset || document.documentElement.scrollTop
		if (st <= lastScrollTop && window.scrollY === 0) {
			window.ReactNativeWebView.postMessage('disable_scroll')
		}
		lastScrollTop = st <= 0 ? 0 : st
	}, false)
`

---

function onMessage(e) {
	if (e.nativeEvent.data === 'enable_scroll') {
		setNestedScrollEnabled(true)
	} else if (e.nativeEvent.data === 'disable_scroll') {
		setNestedScrollEnabled(false)
	}
}

---

<RNWebView
	{...props}
	onMessage={onMessage}
	injectedJavaScript={injectedJavaScript}
	nestedScrollEnabled={nestedScrollEnabled}
/>

Let me know if you refine this solution. Happy coding!