react native webview postmessage doesn't trigger onmessage

Question

React Native Version : 0.60

Library used : react-native-webview (version : 9.0.1)

Issue :

When I send postMessage (this.webView.postMessage('somedata')) from my react-native event handler to webview, the onMessage is not triggered. But onMessage does get triggered on events sent by the webview.

Solutions tried :

Added both document.eventListener and window.eventListener. Still the onMessage is NOT trigged when I postMessage from react-native.

Any help would be greatly appreciated.

Code :

  // On Click, the following function will run
  
  _sendPostMessage = () => {
    //data sent to webview
    this.webView.postMessage("getAuthToken");
  }
  
  // Inside render() function
  
<WebView
  ref={(webView) => this.webView = webView}
  style={styles.webView}
  source={{ uri: event.ticket_form_url, headers: headers }}
  injectedJavaScript={jsCode}
  onMessage={this.onMessage}
  renderLoading={this._renderActivityIndicator}
  startInLoadingState={true}
/>

// Injected javscript code below

    var jsCode = `
      (function() {
        window.postMessage = function(data) {
          window.ReactNativeWebView.postMessage(data);
        };
      })()
      (function() {
        var originalPostMessage = window.postMessage;

        var patchedPostMessage = function(message, targetOrigin, transfer) {
          originalPostMessage(message, targetOrigin, transfer);
        };

        patchedPostMessage.toString = function() {
          return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
        };

        window.postMessage = patchedPostMessage;
      })();

      window.addEventListener("message", function(event) {
        var uat = ''

        if (window.userAuthenticationToken) {
          uat = window.userAuthenticationToken()
        }

        window.postMessage('setAuthToken,' + uat)
      });

      document.addEventListener("message", function(event) {
        var uat = ''

        if (window.userAuthenticationToken) {
          uat = window.userAuthenticationToken()
        }

        window.postMessage('setAuthToken,' + uat)
      });

      `;

// onMessage

  onMessage = (event) => {
    //data received from webview
    console.log('Reached onMessage', event.nativeEvent.data);
    var response = event.nativeEvent.data
    var data = response.split(',')
 }

score 0 · Answer 1 · answered Jul 12 '20 at 14:38

Hello you must use post message as injectedJavascript. For example,

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

You can use this package for webview for beauty UI. https://github.com/ilkerkesici/react-native-beauty-webview

react native webview postmessage doesn't trigger onmessage

1 Answers1