> For the complete documentation index, see [llms.txt](https://docs.hackle.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hackle.io/en/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md).

# 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.

{% hint style="info" %}
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.
  {% endhint %}

### 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](broken://pages/rwmmt43ZbuVoLFenKauB) 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

<table><thead><tr><th width="200">React Native</th><th width="220">Web (Javascript)</th><th width="100">Integrated</th></tr></thead><tbody><tr><td>Script addition method</td><td>No action (or bridge code deleted)</td><td><strong>X</strong></td></tr><tr><td>Script addition method</td><td>Script addition method</td><td><strong>O</strong></td></tr><tr><td>WebView plugin method</td><td>No action (or bridge code deleted)</td><td><strong>O</strong></td></tr><tr><td>WebView plugin method</td><td>Script addition method</td><td><strong>O</strong></td></tr><tr><td>No action</td><td>Script addition method</td><td><strong>X</strong></td></tr></tbody></table>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.hackle.io/en/development-guide/react-native/webapp-integration/react-native-web-app-plugin-migration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.