React Native WebView onMessage doesn't do anything
According to this issue, you need to wait until the React Native postMessage
has replaced the native window.postMessage
(don’t ask me why they are replacing a native function instead of creating a new one).
One solution is to do something like:
function waitForBridge() {
//the react native postMessage has only 1 parameter
//while the default one has 2, so check the signature
//of the function
if (window.postMessage.length !== 1){
setTimeout(waitForBridge, 200);
}
else {
window.postMessage('abc');
}
}
window.onload = waitForBridge;
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);
};
})()`
<WebView
injectedJavaScript={injectedJavascript}
ref={( webView ) => 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.
If you use react-native-webview
after v5.0.0
like me, use window.ReactNativeWebView.postMessage(data)
!
window.postMessage(data, *) has been changed to
window.ReactNativeWebView.postMessage(data)
https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0