Reputation: 653
I have a static site hosted on S3 with CloudFront distro on top of it.
<WebView
ref={webViewRef}
scrollEnabled={false}
source={{ uri: Config.REMOTE_URL }} // CloudFront URL
sharedCookiesEnabled={true}
onMessage={(event) => receivedMessageFromWebView(event.nativeEvent.data)}
/>
And the way we postMessage()
to the web is something like this
const sendDataToWebView = (dataMap: any) => {
const dataToPost = { type: 'data', data: dataMap };
const postMessageJSCode = `
window.postMessage(${JSON.stringify(dataToPost)}, "*");
true;
`;
if (webViewRef && webViewRef.current) {
webViewRef.current.injectJavaScript(postMessageJSCode);
}
}
And the onMessage
implementation as follows
const receivedMessageFromWebView = (msgData: any) => {
console.log('Data Received from WebView -->', msgData); // <-- Not working
};
What am I missing here?
Upvotes: 0
Views: 6183
Reputation: 777
Rather than window.postMessage
try window.ReactNativeWebView.postMessage
https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#onmessage
Or the documentation is already really details for communicating between native and the webview here: https://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native
Upvotes: 1