Search code examples
javascripthtmlcssreact-nativereact-native-webview

Is there any way to disable hapticFeedback in react-native-webview


 <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.


Solution

  • 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.