window.ReactNativeWebView.postMessage causes error on webview side

See original GitHub issue

##VERSION

"dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.1",
    "react-native-webview": "git+https://github.com/react-native-community/react-native-webview.git",
  },

I’m using laravel php framework for Webview side which is located on localhost. The communication between react native side and webview are all fine. But I got this error when opened website with PC browser. ReactNativeWebViewBridge.js:91 rnBridge send failed Cannot read property 'postMessage' of undefined

This is source code on webview side

....
var msgObj = {
                   targetFunc: targetFunc,
                   data: data || {},
                   msgId: guid(),
               };

               var msg = JSON.stringify(msgObj);

               promiseChain = promiseChain.then(function () {
                   return new Promise(function (resolve, reject) {
                       console.log("sending message " + msgObj.targetFunc);

                       promises[msgObj.msgId] = {resolve: resolve, reject: reject};
                       callbacks[msgObj.msgId] = {
                           onsuccess: success,
                           onerror: error
                       };

                       window.ReactNativeWebView.postMessage(msg);  // For react-native-webview
                   })
               }).catch(function (e) {
                   console.error('rnBridge send failed ' + e.message);
               });
....

Source for native side

return (
	      	<SafeAreaView style={styles.container}>
		        <WebView
		        	ref={webview => {this.myWebView = webview;}}
			        useWebKit={true}	// WKWebView
			        source={{uri: URL_HOME}}
			        javaScriptEnabled={true}
			        cacheEnabled={false}
			        startInLoadingState={true}
			        onMessage={this.onWebViewMessage}
		       />
            />
	       	</SafeAreaView>
	    );

How to remove this error ?

I tried using window.postMessage(msg, "*"); and then injectedJavaScript with

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

but the communication of react native and webview did not work.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:13

github_iconTop GitHub Comments

7reactions
ixrecommented, Jul 7, 2019

use below code resolve:

function postMessage(message,targetOrigin){
    (window["ReactNativeWebView"]||window).postMessage(message,targetOrigin);
}
3reactions
nagaokashicommented, Mar 6, 2019

Oh yeah. I understood. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

window.ReactNativeWebView.postMessage not working in ...
I tried window.ReactNativeWebView.postMessage("hello") in React JS, but the onMessage is not being invoked in React Native Webview.
Read more >
Fixing React Native WebView's postMessage for iOS
The rn-webview package works by directing window.postMessage traffic to history.pushState instead. While React Native's iOS implementation cannot handle window.
Read more >
How To Use Postmessage In A React Native Webview?
A function that is invoked when the webview calls window.postMessage. Setting this property will inject a postMessage global into your webview but will...
Read more >
React Native WebView postMessage does not work-React ...
window.WebViewBridge = { onMessage: this._onMessage, }; const event = new Event('WebViewBridge'); window.dispatchEvent(event); // The data is not a string.
Read more >
react native webview postmessage example - Code Grepper
if(navigator.appVersion.includes('Android')){ document.addEventListener("message", function (data) { alert("you are in android OS"); } ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found