React Native WebView onMessage doesn't do anything

Question

I\'m trying to use the onMessage listener. The website is executing a postMessage (window.postMessage(\"Post message from web\");) but react native\'s webview o

Answer 1

This solved my problem.

let postMessage = window.parent.postMessage;
if(window.ReactNativeWebView) {
    postMessage = window.ReactNativeWebView.postMessage;
}
postMessage('hey');

https://github.com/react-native-community/react-native-webview/issues/323#issuecomment-511824940

Answer 2

For anyone still confused about this... It is because communication between React Native and Webview has been completely rewritten. Yes, window.postMessage(data, *) has been changed to window.ReactNativeWebView.postMessage(data), but to answer this question specifically, the solution, i.e., what you need to support window.postMessage from your web view, is to pass the following prop per https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0:

const injectedJavascript = `(function() {
      window.postMessage = function(data) {
    window.ReactNativeWebView.postMessage(data);
  };
})()`

<WebView
  injectedJavaScript={injectedJavascript}
  ref={( webView ) => this.webView = webView}
  onMessage={this.onMessage}
  source={{uri: 'https://app.sodge.co/login/response.html'}}
/>

Then you can call window.postMessage("Post message from web", "*") within your script tag (or whereever else) as usual.

UPDATE: The above answer only supports the old functionality of window.postMessage on Android - something not mentioned in the docs. For iOS, simply use the library, https://github.com/CharlesStover/react-native-web-view. Include the web view as you would normally - without the injected javascript. iOS does not support messages or injected javascript between native and webview. For more information, and to understand the hack to get around this, check out https://medium.com/@Charles_Stover/fixing-react-native-webviews-postmessage-for-ios-10e2320b2f14.

Answer 3

If you use react-native-webview after v5.0.0 like me, use window.ReactNativeWebView.postMessage(data)!

window.postMessage(data, *) has been changed to

window.ReactNativeWebView.postMessage(data)

https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0

Answer 4

According to this issue, you need to wait until the React Native postMessage has replaced the native window.postMessage (don’t ask me why they are replacing a native function instead of creating a new one).

One solution is to do something like:

function waitForBridge() {

   //the react native postMessage has only 1 parameter
   //while the default one has 2, so check the signature
   //of the function

   if (window.postMessage.length !== 1){
     setTimeout(waitForBridge, 200);
   }
   else {
     window.postMessage('abc');
   }
}

window.onload = waitForBridge;