CODEWITHSUNDEEP
react-nativereact-native-webview
MoO
MoO

Reputation: 145

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

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);

Upvotes: 8

Views: 17483

Answers (5)

Motiur Rehman
Motiur Rehman

Reputation: 36

(window["ReactNativeWebView"] || window).postMessage('hello motiur dear','*');

Upvotes: 0

HaryanviDeveloper
HaryanviDeveloper

Reputation: 1135

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)
}

Upvotes: 1

gopher166
gopher166

Reputation: 137

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))
}

Upvotes: 3

MoO
MoO

Reputation: 145

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)} />

Upvotes: 3

hong developer
hong developer

Reputation: 13924

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);

Upvotes: 8

Related Questions