Hackler React Native WebView Plugin

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