title: React Native WebView postMessage does not work
body: <p>I can't get React Native WebView postMessage to work. The React Native app successfully receives the post message sendt from the web app. But the web app does not receive messages sendt from the React Native app.</p>
  
  <p><strong>My simple web app</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;button&gt;Send post message from web&lt;/button&gt;
  &lt;div&gt;Post message log&lt;/div&gt;
  &lt;textarea style="height: 50%; width: 100%;" readonly&gt;&lt;/textarea&gt;
  
  &lt;script&gt;
  var log = document.querySelector("textarea");
  
  document.querySelector("button").onclick = function() {
      console.log("Send post message");
  
      logMessage("Sending post message from web..");
      window.postMessage("Post message from web", "*");
  }
  
  window.addEventListener("message", function(event) {
      console.log("Received post message", event);
  
      logMessage(event.data);
  }, false);
  
  function logMessage(message) {
      log.append((new Date()) + " " + message + "\n");
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This web app is hosted at: <a href="https://popping-heat-6062.firebaseapp.com/">https://popping-heat-6062.firebaseapp.com/</a></p>
  
  <p><strong>My simple React Native app</strong></p>
  
  <pre><code>import React, {Component} from "react";
  import {AppRegistry, Text, View, TouchableHighlight, WebView} from "react-native";
  
  export default class WevViewApp extends Component {
  
      constructor( props ) {
          super( props );
  
          this.webView = null;
      }
  
      onMessage( event ) {
          console.log( "On Message", event.nativeEvent.data );
      }
  
      sendPostMessage() {
          console.log( "Sending post message" );
          this.webView.postMessage( "Post message from react native" );
      }
  
      render() {
          return (
              &lt;View style={{flex: 1}}&gt;
                  &lt;TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() =&gt; this.sendPostMessage()}&gt;
                      &lt;Text style={{color: 'white'}}&gt;Send post message from react native&lt;/Text&gt;
                  &lt;/TouchableHighlight&gt;
                  &lt;WebView
                      style={{flex: 1}}
                      source={{uri: 'https://popping-heat-6062.firebaseapp.com'}}
                      ref={( webView ) =&gt; this.webView = webView}
                      onMessage={this.onMessage}
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  
  AppRegistry.registerComponent( 'WevViewApp', () =&gt; WevViewApp );
  </code></pre>
  
  <p><strong>Expected result</strong></p>
  
  <ol>
  <li>Clicking the "Send post message from web" button sends
  a post message to the React Native app and is logged in debugger
  window </li>
  <li>Clicking the "Send post message from React Native" button
  sends a post message to the web app and is printed out in the web
  textarea</li>
  </ol>
  
  <p><strong>Actual result</strong></p>
  
  <ol>
  <li>Web app <strong>successfully</strong> sends sends message to React Native app and is logged in the debugger window</li>
  <li>React Native app <strong>unsuccessfully</strong> sends message to web app and is not printed out in the web textarea</li>
  </ol>
  
  <p>Does anyone know why the web app is not receiving the messages?</p>
  
  <p>Tested with both Android and iOS.</p>
  
  <p>Related documentation: <a href="https://facebook.github.io/react-native/docs/webview.html">https://facebook.github.io/react-native/docs/webview.html</a></p>
  
  <hr>
  
  <p><strong>Edit</strong>: Experienced a behaviour that may pinpoint the problem.</p>
  
  <p>When testing the 'Send post message from web' button directly in a web browser the textarea logs that it has sendt the message and also that is received it's own message.</p>
  
  <pre><code>Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
  Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Post message from web
  </code></pre>
  
  <p>when trying the same in the WebView from the React Native app the textarea only prints out</p>
  
  <pre><code>Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
  </code></pre>
  
  <p>Does the WebView hijack the window.postMessage method and inject a custom one?</p>
  
  <p>This is mentioned in the <a href="https://facebook.github.io/react-native/docs/webview.html#onmessage">documentation</a>:</p>
  
  <blockquote>
    <p>Setting this property will inject a postMessage global into your
    webview, but will still call pre-existing values of postMessage.</p>
  </blockquote>
  
  <p>Maybe this is false and this is where the problem is at?</p>