@hackler/react-native-webview-plugin

Hackle WebView bridge plugin for React Native.

Requirements

• react-native >= 0.74.0
• react-native-webview >= 13.13.0
• @hackler/react-native-sdk >= 4.0.0 < 5.0.0
• iOS 13.0+, Android API 24+

Installation

npm install @hackler/react-native-webview-plugin
# or, using yarn:
# yarn add @hackler/react-native-webview-plugin

Quick Start

Wrap your <WebView> with <HackleWebViewBridge>. It must be exactly one direct <WebView> child.

import { WebView } from 'react-native-webview';
import { HackleWebViewBridge } from '@hackler/react-native-webview-plugin';

function MyWebView() {
  return (
    <HackleWebViewBridge>
      <WebView source={{ uri: 'https://your-website.com' }} />
    </HackleWebViewBridge>
  );
}

With Configuration Options

import { WebView } from 'react-native-webview';
import { HackleWebViewBridge } from '@hackler/react-native-webview-plugin';

function MyWebView() {
  return (
    <HackleWebViewBridge
      automaticScreenTracking
      automaticEngagementTracking
      automaticRouteTracking>
      <WebView
        source={{ uri: 'https://your-website.com' }}
        onMessage={handleMessage}
        ref={webViewRef}
      />
    </HackleWebViewBridge>
  );
}

Configuration Options

| Option | Type | Default | Description | | ----------------------------- | --------- | ------- | -------------------------------------------- | | automaticScreenTracking | boolean | false | Automatically collect $page_view events | | automaticEngagementTracking | boolean | false | Automatically collect engagement events | | automaticRouteTracking | boolean | true | Automatically collect page route information | | style | ViewStyle | { flex: 1 } | Applied to the container view that wraps your WebView |

Migrating from 1.x

createHackleWebViewConfig and the nativeConfig prop are gone.

// before (1.x)
const config = createHackleWebViewConfig({ automaticScreenTracking: true });
<WebView source={{ uri }} nativeConfig={config} />

// after (2.x)
<HackleWebViewBridge automaticScreenTracking>
  <WebView source={{ uri }} />
</HackleWebViewBridge>

Option names and defaults are unchanged. The container adds one view layer, so give it the layout style your WebView used to receive (or rely on the flex: 1 default).