How can I send a message from the WebView to React Native?

Question

I’ve successfully managed to send a message from React Native (RN) to a WebView.

What I’m struggling with, is getting the message back from the WebView to RN. There’s no errors showing - it’s just that the message never gets through.

Here is the code which I’m using:

React Native Code

<WebView
  ref={webview => (this.webview = webview)}
  source={{ uri: "http://www.my-web-site"}}
  onLoadEnd={() => this.onLoadEnd()}
  onMessage={this.onMessage}
  cacheEnabled={false}
  originWhitelist={['*']}
  javaScriptEnabled={true}
/>

onLoadEnd() {
  this.webview.postMessage("RN message");
}

onMessage(message) {
  console.log("I can’t see this message!");
}

WebView Code

document.addEventListener("message", function (event) {
  setTimeout(function(){document.postMessage("WebView message")}, 3000);
}, false);

Answer 1

Please make sure that the data for each receiver is in and use the data that You need.

And always check the prescribed documents to see how to use parameters and grammar before using them.

RN

onLoadEnd() {

  this.webview.postMessage("sendmessage");
}

onMessage(event) {
  alert(event.nativeEvent.data);
}

WebView Code

    document.addEventListener("message", function (event) {
        window.postMessage(event.data);
    });

React-native version 5.0 or later

window.ReactNativeWebView.postMessage(event.data);

Answer 2

Oh, at last, I finally came across the answer. It was a line of code which I had originally been trying to use to send a message from RN to the WebView. Turns out, it was the code required for sending from the WebView to RN:

WebView Code

document.addEventListener("message", function (event) {
  window.ReactNativeWebView.postMessage(event.data);
}, false);

RN Code

<WebView onMessage={event => console.log(event.nativeEvent.data)} />

Answer 3

This works.

React Native

<WebView source={{ ... }}
         containerStyle={{ ... }}
         onMessage={ e => { console.log(e.nativeEvent.data) } }
/>

WebView

if(window.ReactNativeWebView) {
   // send data object to React Native (only string)
   window.ReactNativeWebView.postMessage(JSON.stringify(dataObject))
}

Answer 4

If you want to send complete object from webview to react-native android app then you need to stringify your object first

// Reactjs webapp

  onClickSendObject = (item) => {
    if(window.ReactNativeWebView) {     
       window.ReactNativeWebView.postMessage(JSON.stringify(item))
    }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

In react-native app use onMessage (for functional component)

<WebView
  ref={webview => (this.webview = webview)}
  source={{ uri: "give source url i.e your webapp link"}}
  onMessage={m => onMessage(m.nativeEvent.data)} // functional component and for class component use (this.onMessage) 
  cacheEnabled={false}
  originWhitelist={['*']}
  javaScriptEnabled={true}
/>

// onMessage function

const onMessage = (m) => {
    const messageData = JSON.parse(m);
    console.log(messageData)
}