Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 571
Harish Jangra Avatar asked Feb 06 '20 06:02

Harish Jangra


2 Answers

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.

like image 127
Harish Jangra Avatar answered Oct 23 '22 19:10

Harish Jangra


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>
like image 24
Aaleen Mirza Avatar answered Oct 23 '22 19:10

Aaleen Mirza