Webview not receiving post message data from web

Question

I am loading a Vue web app under react native web view. once i click on a button in web view. it needs to get detected in react native . is there any possibilities for that ?

Answer 1

You can use

window.postMessage("Click in Vue"); on button click in Vue js to post a message form html page to react-native

The window.postMessage() method safely enables cross-origin communication between Window objects; e.g., between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

You can get this message in Webview component like this:

<WebView
   onMessage={(message) => this.onMessage(message)}
/>

In the onMessage method you can get data like this:

onMessage(message) {
   console.log(message.nativeEvent.data);
}

Update

It seems that react-native-webview has changed the way it calls postMessage so now you should do it like: window.ReactNativeWebView.postMessage("Click in Vue");

Read more here