title: React Native - External javascript library not working in Webview
body: <p>I'm trying to use, in my React Native application, the Webview component to simulate the functionality of an HTML web screen. The javascript code snippet below works normally in a web application, the callback passed to PagSeguroDirectPayment.onSenderHashReady receives the senderHash at the appropriate time.</p>
  <pre><code>    PagSeguroDirectPayment.setSessionId(${sessionId});
      PagSeguroDirectPayment.onSenderHashReady(function(response){
          var senderHash = response.senderHash; 
          window.ReactNativeWebView.postMessage(&quot;SENDER HASH: &quot; + senderHash);
      }, function (error) {
          window.alert(&quot;Error: &quot; + error);
      });
  </code></pre>
  <p>But when that same javascript code is injected into the Webview, the callbaxk is never called. The javascript snippet window.ReactNativeWebView.postMessage is not executed.</p>
  <p>Can anyone help me to solve this problem?</p>
  <p>Follow the complete code:</p>
  <pre><code>import React, { Component } from 'react';
  import { 
      StyleSheet, 
      View,
      Text,
      TouchableOpacity
  } from 'react-native';
  import { Navigation } from 'react-native-navigation';
  import WebView from 'react-native-webview';
  
  
  const HTML = `
      &lt;html&gt;
      &lt;head&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type=&quot;text/javascript&quot; src=&quot;https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  `;
  
  const script = (sessionId) =&gt; {
      return `
              PagSeguroDirectPayment.setSessionId(${sessionId});
              PagSeguroDirectPayment.onSenderHashReady(function(response){
                  var senderHash = response.senderHash; 
                  window.ReactNativeWebView.postMessage(&quot;SENDER HASH: &quot; + senderHash);
              }, function (error) {
                  window.alert(&quot;Error: &quot; + error);
              });
  
          true; // note: this is required, or you'll sometimes get silent failures
      `;
  }
  
  export default class WebviewTestScreen extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              sessionId: null
          }
      }
  
      static options() {
          return {
              topBar: {
                  title: {
                      text: 'Pagamento'
                  }
              }
          };
      }
  
      componentDidMount() {
          this.navigationEventListener = Navigation.events().bindComponent(this);
      }
  
      injectJavaScript() {
          PagseguroService.createSession()
              .then(sessionId =&gt; {
                  this.setState({sessionId: sessionId});
                  this.webref.injectJavaScript(script(sessionId));
              })
              .catch(error =&gt; {
                  console.log('Error', error);
              });
      }
  
      render() {
  
          return (
              &lt;View style={styles.container}&gt;
                  &lt;WebView
                      ref={(r) =&gt; (this.webref = r)}
                      source={{html : HTML}}
                      onMessage={(event) =&gt; {
                          console.log(event.nativeEvent.data);
                      }}
                      javaScriptEnabledAndroid={true}
                      javaScriptEnabled={true}
                      originWhitelist={['*']}
                  &gt;
                  &lt;/WebView&gt;
                  &lt;View&gt;
                      &lt;TouchableOpacity style={[styles.button]} onPress={this.injectJavaScript.bind(this)}&gt;
                          &lt;Text style={styles.textButton}&gt;Test&lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
  
              &lt;/View&gt;
          );
      }   
      
  }
  
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          paddingTop: 0,
          backgroundColor: '#fff'
      },
      button:{
          width:&quot;90%&quot;,
          borderRadius:10,
          height: 50,
          alignItems:&quot;center&quot;,
          justifyContent:&quot;center&quot;,
          margin: 20,
          marginTop: 30,
          backgroundColor: '#0095ff'
      },
      textButton:{
          color:&quot;white&quot;
      }
  });
  </code></pre>