CODEWITHSUNDEEP
typescriptreact-nativewebviewpostmessagereact-native-webview
Shadab Mehdi
Shadab Mehdi

Reputation: 653

React Native WebView onMessage() is not triggered

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

Answers (1)

P. Brew
P. Brew

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

Related Questions