0

I’m using react-native-webview and attempting to post a message from JavaScript to RN.

I’m using the window.ReactNativeWebView.postMessage() method but cannot get beyond some issue with ReactNativeWebView not being recognised, with the following error:

Cannot read property 'postMessage' of undefined

I’m using the following:

  • "react": "16.8.3",
  • "react-native": "0.59.8",
  • "react-native-webview": "^5.12.0",

This looks so straight forward so I don’t know where I’m going wrong.

MoO
  • 125
  • 1
  • 1
  • 9

1 Answers1

0

Declare and use the reference value.

 onLoadEnd() {
   this.webview.postMessage("yourmessage");
  }

 <WebView
          ref={webview => (this.webview = webview)}
          onLoadEnd={() => this.onLoadEnd()}
          ...
        />

Your webview_uri should have a message-receiver just like React-native's.

webpage example

document.addEventListener("message", function(event) {
    console.log("Received post message", event);

    logMessage(event.data);
}, false);
hong developer
  • 13,291
  • 4
  • 38
  • 68
  • Thank you very much. I thought that I had tried this but, with all the combintion of efforts, I'm not 100%. I shall give it a go and follow what you have provided. Many thanks. – MoO Jun 19 '19 at 06:53
  • I hope you will pay a lot of attention to Reat-native. I need a developer like you. If my answer was helpful, could you choose an answer? – hong developer Jun 19 '19 at 06:59
  • Still no luck for me, hong develop. I no longer get any errors but the post message is never received by the WebView. I'm using react-native-webview 5.12.0 and so am referring to the implementation described by @osrpt, in [this post](https://stackoverflow.com/questions/47619813/react-native-webview-onmessage-doesnt-do-anything) – MoO Jun 19 '19 at 22:12
  • Is there a listener in your uri that listens to messages? – hong developer Jun 20 '19 at 01:44
  • Yes: `onMessage={() => this.onMessage()}` – MoO Jun 20 '19 at 05:05
  • Or tested directly: `onMessage={() => console.log("onMessage")}` – MoO Jun 20 '19 at 05:05
  • I mean, is there a place to receive messages from a web page? – hong developer Jun 20 '19 at 05:06
  • Ouch! How crazy of me. This inow seems so glaringly obvious. I've been adding the message handler to RN, not the contents of the WebView - useful for messages from the WebView but hopeless in my scenario. Very optimistic this will now work - can't wait to give it a go! Thank you very much for your persistence, hong develop. – MoO Jun 20 '19 at 07:08
  • Yeah, I hope you to try and choose my answer if this works. – hong developer Jun 20 '19 at 07:18
  • Thanks hong develop. That works well. I'm unfortunately not able to get a message back from the WebView. I've prepared the detail, and all code used, but don't know how to post on this forum. I can't alter my original question, as the new question is different. I can't express myself in these comments. And I can't answer my own question because Stack Overflow won't allow a new question. I shall try to ask the updated question on another forum which provides that ability to discuss a query further, and then link to it in these comments. Thank you very much for getting me this far! – MoO Jun 24 '19 at 07:38
  • Hi hong develop, I've now added my new issue to this post, in case you were interested. Thank you for everything, regardless! https://stackoverflow.com/questions/56737292/how-can-i-send-a-message-from-the-webview-to-react-native – MoO Jun 24 '19 at 13:09
  • I see. So if the answer to this question helped you, can you choose my answer? – hong developer Jun 24 '19 at 14:09