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

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);
  };
})()`

 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.