CODEWITHSUNDEEP
javascriptreact-nativereact-native-webview
YOUDEV
YOUDEV

Reputation: 1

react-native-webview this.webView.postMessage not working

The previous version does not work as it is new.

"react-native-webview": "^9.0.2" "react-native": "0.62.0",

2. webview options
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
startInLoadingState={true}
allowUniversalAccessFromFileURLs={true}
onMessage={this.respondToOnMessage}

3. react-native code
this.webView.postMessage( "Post message from react native" );

4. web code

function receiveMessage(e) {
    callbackFunction(JSON.parse(e.data));
}
function RNPostMessage(data) {
    window.ReactNativeWebView.postMessage(data);
}
window.addEventListener('message', receiveMessage, true);

5. react-native error msg
D:\dev\projects\mobile-app\react-native\yc_attend\node_modules\react-devtools-core\dist\backend.js:32 Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'postMessage' of undefined
TypeError: Cannot read property 'postMessage' of undefined

I want to know the solution to this...

Upvotes: 0

Views: 6910

Answers (2)

İlker
İlker

Reputation: 522

you must use it like that.

<WebView
    source={{ uri: currentUrl }}
    injectedJavaScript="window.ReactNativeWebView.postMessage(document.title)"
    onMessage={event => setTitle(event.nativeEvent.data)}
 />

If you want to different props of webview you can look https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md

Upvotes: 1

Rushabh Gedam
Rushabh Gedam

Reputation: 310

You must try to do injectJavascript rather than this.webview.postMessage(). i've did it before also & reached to get my data in webview. Try Using window.postMessage in react-native's inject Javascript. There's prop in react-native-webview to inject javascript.

Upvotes: 2

Related Questions