title: React Native iOS WebView execute javascript tag in local html
body: <p>I am trying to show web page with <strong><em>react-native-webview</em></strong> with local html file. But it doesn't execute javascript tags in html file at the iOS platform, but works on Android.</p>
  
  <p>How I can fix it?</p>
  
  <p>This is a codechip which I am using the WebView.  </p>
  
  <pre><code>...  
  const html = require('./ep-home2')();  
  ...  
  
  &lt;WebView
     originWhitelist={['*']}
     ref={this.webview}
     source={{html: html}}
  /&gt;
  </code></pre>
  
  <p>Here is ep-home2.js  file.  </p>
  
  <pre><code>module.exports = function() {
        return `
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
      &lt;!--    &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;--&gt;
          &lt;meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /&gt;
          &lt;title&gt;SADAD&lt;/title&gt;
          &lt;!-- loader icon --&gt;
          &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video-js.min.css" integrity="sha256-kflKPH4F0cGv0BJg6I6+pb5nIO01FMeoK7qWoz1NayE=" crossorigin="anonymous" /&gt;
          &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/easy-autocomplete.min.css"&gt;
  
          &lt;style&gt;
  
            body {
                opacity: 0;
            }
  
            body.all-loaded {
                opacity: 1;
            }
              html {
                  touch-action: manipulation;
              }
  
              /*body {background: #FFFFFF;}*/
              .con {
                  display: block;
              }
              .preloader p {
                color: #fff;
                padding-top: 20px;
              }
  
              .fade-in {
                animation: fadeIn ease 250ms;
              }
              @keyframes fadeIn {
                0% {
                  opacity:0;
                }
                100% {
                  opacity:1;
                }
              }
          &lt;/style&gt;
  
          &lt;link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/circle.css"&gt;
          &lt;link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/animation.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;span id="status" class="status" style="display: none"&gt;&lt;/span&gt;
  
      &lt;div class="main-containers" style="top: 0; position: relative;overflow-x: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);"&gt;
      &lt;/div&gt;
  
          &lt;script type="application/javascript"&gt;
  
              // Create Base64 Object
              var Base64 = {
  
                  _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  
  
                  encode: function(input) {
                      var output = "";
                      var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
                      var i = 0;
  
                      input = Base64._utf8_encode(input);
  
                      while (i &lt; input.length) {
  
                          chr1 = input.charCodeAt(i++);
                          chr2 = input.charCodeAt(i++);
                          chr3 = input.charCodeAt(i++);
  
                          enc1 = chr1 &gt;&gt; 2;
                          enc2 = ((chr1 &amp; 3) &lt;&lt; 4) | (chr2 &gt;&gt; 4);
                          enc3 = ((chr2 &amp; 15) &lt;&lt; 2) | (chr3 &gt;&gt; 6);
                          enc4 = chr3 &amp; 63;
  
                          if (isNaN(chr2)) {
                              enc3 = enc4 = 64;
                          } else if (isNaN(chr3)) {
                              enc4 = 64;
                          }
  
                          output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
  
                      }
  
                      return output;
                  },
  
  
                  decode: function(input) {
                      var output = "";
                      var chr1, chr2, chr3;
                      var enc1, enc2, enc3, enc4;
                      var i = 0;
  
                      input = input.replace(/[^A-Za-z0-9\\+\\/\\=]/g, "");
  
                      while (i &lt; input.length) {
  
                          enc1 = this._keyStr.indexOf(input.charAt(i++));
                          enc2 = this._keyStr.indexOf(input.charAt(i++));
                          enc3 = this._keyStr.indexOf(input.charAt(i++));
                          enc4 = this._keyStr.indexOf(input.charAt(i++));
  
                          chr1 = (enc1 &lt;&lt; 2) | (enc2 &gt;&gt; 4);
                          chr2 = ((enc2 &amp; 15) &lt;&lt; 4) | (enc3 &gt;&gt; 2);
                          chr3 = ((enc3 &amp; 3) &lt;&lt; 6) | enc4;
  
                          output = output + String.fromCharCode(chr1);
  
                          if (enc3 != 64) {
                              output = output + String.fromCharCode(chr2);
                          }
                          if (enc4 != 64) {
                              output = output + String.fromCharCode(chr3);
                          }
  
                      }
  
                      output = Base64._utf8_decode(output);
  
                      return output;
  
                  },
  
                  _utf8_encode: function(string) {
                      string = string.replace(/\\r\\n/g, "\\n");
                      var utftext = "";
  
                      for (var n = 0; n &lt; string.length; n++) {
  
                          var c = string.charCodeAt(n);
  
                          if (c &lt; 128) {
                              utftext += String.fromCharCode(c);
                          }
                          else if ((c &gt; 127) &amp;&amp; (c &lt; 2048)) {
                              utftext += String.fromCharCode((c &gt;&gt; 6) | 192);
                              utftext += String.fromCharCode((c &amp; 63) | 128);
                          }
                          else {
                              utftext += String.fromCharCode((c &gt;&gt; 12) | 224);
                              utftext += String.fromCharCode(((c &gt;&gt; 6) &amp; 63) | 128);
                              utftext += String.fromCharCode((c &amp; 63) | 128);
                          }
  
                      }
  
                      return utftext;
                  },
  
                  _utf8_decode: function(utftext) {
                      var string = "";
                      var i = 0;
                      var c = 0;
                      var c1 = 0;
                      var c2 = 0;
                      var c3 = 0;
  
                      while (i &lt; utftext.length) {
  
                          c = utftext.charCodeAt(i);
  
                          if (c &lt; 128) {
                              string += String.fromCharCode(c);
                              i++;
                          }
                          else if ((c &gt; 191) &amp;&amp; (c &lt; 224)) {
                              c2 = utftext.charCodeAt(i + 1);
                              string += String.fromCharCode(((c &amp; 31) &lt;&lt; 6) | (c2 &amp; 63));
                              i += 2;
                          }
                          else {
                              c2 = utftext.charCodeAt(i + 1);
                              c3 = utftext.charCodeAt(i + 2);
                              string += String.fromCharCode(((c &amp; 15) &lt;&lt; 12) | ((c2 &amp; 63) &lt;&lt; 6) | (c3 &amp; 63));
                              i += 3;
                          }
  
                      }
  
                      return string;
                  }
  
              }
  
          &lt;/script&gt;
  
          &lt;script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pubsub-js/1.7.0/pubsub.min.js" integrity="sha256-QF0bsKIv/J8eC1vj+f/xSmLSME+ztgCsUVYSR6hdHjE=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js" integrity="sha256-DDYBI87lVdSZOudgc6hh30NBPNzbLZqxBOwwmicNeB0=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/jsonform.js"&gt;&lt;/script&gt;
          &lt;script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/js/jsonform/2.1.5/jsv.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" integrity="sha256-gAx3c/BXS1tVc72JrzzIsPxrs2jW+96PfM+Xwwvb9pk=" crossorigin="anonymous"&gt;&lt;/script&gt;    
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.3/async.min.js"&gt;&lt;/script&gt;
  
          &lt;script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/bcc-main-multi-layout-post-message-bypass.js"&gt;&lt;/script&gt;
  
  
          &lt;script&gt;
              function keyboardShown() {
                  jQuery('.activecampaign .hidable').addClass('hidden');
                  //Move it 6p
                  let tl1 = gsap.to(".logo", {duration: .25, marginTop: "1vh", scale: .55});
                  let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 0, display: "none"});   
              }
  
              function keyboardHidden() {
                  jQuery('.activecampaign .hidable').removeClass('hidden');
                  let tl2 = gsap.to(".logo", {duration: .25, marginTop: "7vh", scale:.95});
                  let tl3 = gsap.to(".logReg h2", {duration: .25, opacity: 1, display: "block"})
  
              }
  
          &lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"&gt;&lt;/script&gt;
      &lt;!--   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js" integrity="sha256-cWzRia+bxBCmFQv+ZjhTVz95Q5VcDIQAWiiZvaRBDeQ=" crossorigin="anonymous"&gt;&lt;/script&gt;--&gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.2.11/jspdf.plugin.autotable.min.js" integrity="sha256-k9mQGbAO6sNi3ZtGGmZBOK8/00BJZQ5H2FyWfI3/3SA=" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js" integrity="sha256-aS5HnZXPFUnMTBhNEiZ+fKMsekyUqwm30faj/Qh/gIA=" crossorigin="anonymous"&gt;&lt;/script&gt;        
  
           &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"&gt;&lt;/script&gt;
           &lt;script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/grnAnimation2.js"&gt;&lt;/script&gt;
  
         &lt;script&gt;
  
           $(document).ready(function() {
              $("body").addClass('all-loaded');
          });
          &lt;/script&gt;
  
  
  
      &lt;/body&gt;
      &lt;/html&gt;
      `;
      };
  </code></pre>
  
  <p>Above is what I am trying to display on iOS.  </p>