Hit slop not working in React Native WebView on Android

Question

when using 'react-native-webview' on Android. Although the 'hitSlop' functionality works as expected on iOS, it seems to be unsupported or not functioning correctly on Android.

I've implemented hit slop to enlarge the touch area of certain components within my application. However, when these components are rendered inside a react-native-webview component on Android devices, the hit slop doesn't take effect.

import WebView from 'react-native-webview';

....

<WebView

hitSlop={{ top: 0, bottom: 0, left: 20, right: 20 }}

source={sourcePath}

style={styles.webviewStyle}

/>

Is there a known workaround or solution to address this discrepancy and enable hit slop functionality within the react-native-webview component on Android?

Thank you in advance

Answer 1

• The hitSlop prop is not supported by the Android WebView implementation. This means that the hitSlop functionality will not work as expected when using the WebView component on Android devices.

• You can wrap the WebView component in a Touchable component (e.g TouchableOpacity or TouchableWithoutFeedback) and apply the hitSlop prop to the Touchable component. This will create an invisible touchable area around the WebView component that will respond to touch events.

  import React from 'react';
  import { TouchableOpacity } from 'react-native';
  import WebView from 'react-native-webview';
  
  const App = () => {
   const sourcePath = require('./path/to/your/webview/source');
  
   return (
    <TouchableOpacity
      hitSlop={{ top: 0, bottom: 0, left: 20, right: 20 }}
      onPress={() => console.log('Tapped outside WebView')}
    >
      <WebView
        source={sourcePath}
        style={styles.webviewStyle}
      />
    </TouchableOpacity>
   );
  };