Migration Guide

If you are currently using a WebApp with the legacy helper script, it is recommended to migrate to the new plugin-based integration method.

Migration is complete once you delete the scripts added to React Native and Web, and add @hackler/react-native-webview-plugin to React Native.

Key Changes

• On the React Native side, you can manage it more conveniently by adding a webview plugin package instead of adding a script.

• You no longer need to add a bridge script on the Javascript / React side.

• You can use the hooks provided by the Hackle SDK on the Javascript / React side without rewriting hooks.

React Native

1. Delete the previously provided useHackleWebviewManager.ts.

   It is recommended to delete it as conflicts may occur if you do not.

2. Delete the Hackle-related code configured in the React Native WebView.

   1. useHackleWebviewManager hook

   2. injectedJavaScriptBeforeContentLoaded prop

   3. onMessage handler

3. Refer to the WebApp Integration guide to install the plugin and configure the WebView bridge.

4. When performing the first build after installing the plugin, be sure to run a clean build.

Web

1. Delete the previously provided JavaScript bridge code.

   There is nothing else to do on the Web side other than deleting the bridge code.

Verifying the Migration Integration

After completing the above steps, access the Web from the React Native app and trigger an event.

Check the collected event in the Hackle Dashboard. If the SDK of the collected event is displayed as react-native-sdk, the integration is working correctly.

Compatibility Map by Integration Method

React Native	Web (Javascript)	Integrated
Script addition method	No action (or bridge code deleted)	X
Script addition method	Script addition method	O
WebView plugin method	No action (or bridge code deleted)	O
WebView plugin method	Script addition method	O
No action	Script addition method	X