React Native WebView postMessage does not work

Question

I can\'t get React Native WebView postMessage to work. The React Native app successfully receives the post message sendt from the web app. But the web app does not receive m

Answer 1

Version 5 of react-native-webview changes how this behavior works. You now want:

window.ReactNativeWebView.postMessage(data);

Answer 2

I had the same problem and fixed it by adding the event listener to the document instead of the window. Change:

window.addEventListener("message", ...

to:

document.addEventListener("message", ...

Answer 3

Add browser specific event listeners

In Android

 document.addEventListener("message", function(event) {
       alert("This is a Entry Point Working in Android");
       init(event.data)
  });

In iOS

 window.addEventListener("message", function(event) {
       alert("This is a Entry Point Working in iOS");
       init(event.data)
  });

Answer 4

Actually the listener works differently in different OSs such as iOS and Android. So you should use document.addEventListener for Android and window.addEventListener for iOS.

if(navigator.appVersion.includes('Android')){
            document.addEventListener("message", function (data) {
               alert("you are in android OS");
            });
        }
else {
            window.addEventListener("message", function (data) {
               alert("you are in android OS");               
             });
        }