<ScrollView
ref={scrollRef}
horizontal
scrollEnabled={isScroll}
contentContainerStyle={{height: HEIGHT, overflow: 'hidden'}}
style={{
width: metrics.screenWidth - widthOffset,
}}
onScroll={_onScroll}>
<WebView
ref={webviewRef}
automaticallyAdjustContentInsets={false}
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
onLoadEnd={_loadEnd}
bounces={false}
source={{
html: getHtml(final, scale),
}}
style={{
height: HEIGHT,
width: WIDTH,
backgroundColor: 'transparent',
}}
onMessage={_onMessage}
javaScriptEnabled={true}
textZoom={90}
/>
</ScrollView>
also there is
source.replace(
'<img',
'<img ontouchend="window.ReactNativeWebView.postMessage(`imgsrc__`+this.src)"',
)
so the problem is when I scroll this scrollview over the html img it gets the touch and the phone vibrates. Is there any way to disable webview hapticfeedback either from source end(html) or from react-native-webview end ?
I think this is because while scrolling the img tag takes the interaction as longtouch so therefore it enables longtouch in webview.
I have actually found a solution
I did extend react-native-webview and added a custom prop setHapticFeedbackEnabled reference
webview.setHapticFeedbackEnabled(false);
// this is the solution in android;
i have tried many other ways like in html script for window.contextmenu
,long press etc but none worked.
This will disable any touches over Webview & make sure you apply pointerEvents to a View as Webview does not support pointerEvents.
<ScrollView>
<View pointerEvents="none">
<WebView
style={{ height: HEIGHT, width: WIDTH }}
source={{ getHtml(final, scale) }}
/>
</View>
</ScrollView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With