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

Question

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

Zarathustra

If your assumption about the long-press event is correct you could (at least for Android) try adding android:hapticFeedbackEnabled="false" to your Manifest.xml see here: https://mcmap.net/q/709670/-how-to-completely-remove-mobile-browser-long-press-vibration – Footwear

thanks but putting in Manifest doesn't solve the issue. I had to pass the prop natively to the webview – Zarathustra

Answer 1

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.

Zarathustra

Can you show us example? – Foggy

Answer 2

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>

Accouterment

If i disable pointerEvents then nothing can be touched inside webview. so sorry not accepted – Zarathustra