React Native Interception WebView

Package that allows intercepting web requests inside the WebView component.

Compatibility

• Platforms: Android, iOS (Partial)
• Architecture: New Architecture Only
• React: 19+
• React Native: 0.79+
• React Native WebView: 13+

Installation

This package is a native extension of the community react-native-webview package, so you need to install it as well.

yarn add react-native-webview react-native-interception-webview

Usage

import { WebView } from 'react-native-interception-webview';

Documentation

The WebView component in this package inherits all methods and properties from the WebView component from the community, except two: nativeConfig and injectedJavaScriptBeforeContentLoadedForMainFrameOnly. The full list can be found here.

onShouldInterruptRequest

Android only. Function that is called when the WebView intercepts a web request. This callback may return a boolean value. If it returns false or nothing, the web request will continue loading; if it returns true, the web request will be interrupted.

Note that this function blocks the webview thread, so it must execute quickly.

const onShouldInterruptRequest = (event) => {
  const {
    url,
    scheme,
    host,
    path,
    fragment,
    query,
    method,
    requestId
  } = event;

  if (url === 'https://example.com') {
    // Here we interrupt a web request to example.com
    return true;
  }
};

onInterceptRequest

Function that is called when the WebView intercepts a web request.

const onInterceptRequest = (event) => {
  const {
    url,
    scheme,
    host,
    path,
    fragment,
    query,
    method,
    requestId,
  } = event;

  if (url === 'https://example.com') {
    console.log(url);
  }
};

interruptionTimeout

Android only. Property that specifies how much time is allocated for the onShouldInterruptRequest callback to complete. Since onShouldInterruptRequest blocks the webview thread, a deadline must be set. The default value is 5000 (5 sec).

// If onShouldInterruptRequest takes more than 1 sec to complete
// then example.com will continue loading
return (
  <WebView
    source={{ uri: 'https://example.com' }}
    onShouldInterruptRequest={onShouldInterruptRequest}
    interruptionTimeout={1000}
  />
);

skipInterceptionForFileExtensions

Property that specifies a list of file extensions to ignore when calling onShouldInterruptRequest and onInterceptRequest callbacks. This helps prevent unnecessary interceptions, for example when loading images or CSS files. The default value is:

['aac', 'avi', 'avif', 'bmp', 'css', 'eot', 'gif', 'heic', 'heif', 'ico', 'jpeg', 'jpg', 'js', 'm4a', 'm4v', 'mkv', 'mov', 'mp3', 'mp4', 'ogg', 'pdf', 'png', 'svg', 'tiff', 'ttf', 'wav', 'webm', 'webp', 'woff', 'woff2']

You can extend this list. It is also available for import as the SKIP_INTERCEPTION_FOR_FILE_EXTENSIONS constant.

// onShouldInterruptRequest and onInterceptRequest will not be called
// when JavaScript or CSS files are loading but will be called for other web requests
return (
  <WebView
    source={{ uri: 'https://example.com' }}
    skipInterceptionForFileExtensions={['js', 'css']}
    onShouldInterruptRequest={onShouldInterruptRequest}
    onInterceptRequest={onInterceptRequest}
  />
);

Quick Example

import { WebView } from 'react-native-interception-webview';

export default function App() {
  const onShouldInterruptRequest = (event) => {
    const { url } = event;

    if (url.includes('ad')) {
      console.log('Ad blocking');
      return true;
    }
  };

  const onInterceptRequest = (event) => {
    const { url } = event;
    console.log('Log', url);
  }

  return (
    <WebView
      source={{ uri: 'https://example.com' }}
      onShouldInterruptRequest={onShouldInterruptRequest}
      onInterceptRequest={onInterceptRequest}
      interruptionTimeout={1000}
    />
  );
}