React Native and H5 Interaction: Communication Methods and Code Examples

This guide demonstrates how to achieve interaction between React Native and H5 (web) pages through the WebView component, including receiving messages from H5, sending messages from React Native, and handling native calls.

React Native receiving messages from H5

<code>// Receive message from H5
onMessage = (e) => {
  Log("WebView onMessage received H5 param:", e.nativeEvent.data);
  let params = e.nativeEvent.data;
  params = JSON.parse(params);
  Log("WebView onMessage after JSON parse:", params);
};

onLoadEnd = (e) => {
  Log("WebView onLoadEnd e:", e.nativeEvent);
  let data = { source: "from rn" };
  this.web && this.web.postMessage(JSON.stringify(data)); // send message to H5
};

<WebView
  ref={(webview) => { this.web = webview; }}
  style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}
  source={require("../data/testwebview.html")}
  onLoadEnd={this.onLoadEnd}
  onMessage={(e) => this.onMessage(e)}
  javaScriptEnabled={true}
  startInLoadingState={true}
  renderError={(e) => { return <View />; }}
/>
</code>

H5 sending messages to React Native

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;title&gt;text webview&lt;/title&gt;
    &lt;script type="application/javascript"&gt;
      // Communication can only transfer strings
      function test() {
        // Send message to RN
        let params = { msg: "h5 to rn", source: "H5" };
        window.postMessage(JSON.stringify(params)); // send to RN
      }

      window.document.addEventListener("message", function (e) {
        // Register event to receive data
        const message = e.data; // string
        console.log("WebView message:", message);
        window.postMessage(message);
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;chuchur&lt;/h1&gt;
    &lt;button onclick="test()"&gt;单击&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

Important migration notes

If your WebView is imported from react-native , the built‑in component will be removed; you should switch to react-native-webview and use window.ReactNativeWebView.postMessage(message) for communication.

<code>import { WebView } from "react-native"; // will be removed
// to
import { WebView } from "react-native-webview";
</code>

Native calling H5 methods (iOS example)

<code>[wkWebView evaluateJavaScript:@"jsMethodName()" completionHandler:^(id _Nullable response, NSError * _Nullable error) {
    if (!error) {
        NSLog(@"%@", response); // success
    } else {
        NSLog(@"%@", error.localizedDescription); // failure
    }
}];
</code>

H5 calling native methods

<code>// App side (iOS)
[wkWebView.configuration.userContentController addScriptMessageHandler:(id<WKScriptMessageHandler>)scriptMessageHandler name:@"xxx"];

- (void)setWebViewAppearance {
    // implementation
}

// H5 side
var handler = {
    callHander: function (json) {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // iOS
            window.webkit.messageHandlers.xxx.postMessage(JSON.stringify(json));
        }
        if (/(Android)/i.test(navigator.userAgent)) { // Android
            window.xxx.postMessage(JSON.stringify(json));
        }
    }
};

function setAppAppearance() {
    handler.callHander({
        'body': "setWebViewAppearance",
        'buttons': [{ "text": "分享", "action": "" }],
        'title': "这是webView的标题"
    });
}

setAppAppearance();
</code>

Common error

<code>WKJavaScriptExceptionMessage=ReferenceError: Can't find variable xxx
// The method must be attached to window, e.g., window.xxx = function() {} for Vue, mounted: window.xxx = this.xxx
</code>

For more details, refer to the discussion at GitHub .