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:
- Created 5 years ago
- Comments:13
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
use below code resolve:
Oh yeah. I understood. Thanks.