I am trying to show web page with react-native-webview with local html file. But it doesn't execute javascript tags in html file at the iOS platform, but works on Android.
How I can fix it?
This is a codechip which I am using the WebView.
...
const html = require('./ep-home2')();
...
<WebView
originWhitelist={['*']}
ref={this.webview}
source={{html: html}}
/>
Here is ep-home2.js file.
module.exports = function() {
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">-->
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<title>SADAD</title>
<!-- loader icon -->
<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" />
<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">
<link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/easy-autocomplete.min.css">
<style>
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;
}
}
</style>
<link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/circle.css">
<link rel="stylesheet" href="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/css/animation.css">
</head>
<body>
<span id="status" class="status" style="display: none"></span>
<div class="main-containers" style="top: 0; position: relative;overflow-x: hidden;-webkit-tap-highlight-color: rgba(0,0,0,0);">
</div>
<script type="application/javascript">
// 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 < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 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 < 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 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 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 < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 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 < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></script>
<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"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js" integrity="sha256-DDYBI87lVdSZOudgc6hh30NBPNzbLZqxBOwwmicNeB0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jsonata/jsonata.min.js"></script>
<script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/jsonform.js"></script>
<script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/js/jsonform/2.1.5/jsv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" integrity="sha256-gAx3c/BXS1tVc72JrzzIsPxrs2jW+96PfM+Xwwvb9pk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/2.6.3/async.min.js"></script>
<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"></script>
<script>
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"})
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/sha256.min.js" integrity="sha256-cWzRia+bxBCmFQv+ZjhTVz95Q5VcDIQAWiiZvaRBDeQ=" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js" integrity="sha256-gJWdmuCRBovJMD9D/TVdo4TIK8u5Sti11764sZT1DhI=" crossorigin="anonymous"></script>
<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"></script>
<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"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://s3.us-south.cloud-object-storage.appdomain.cloud/dex-resource-00/layouts/sadad2/js/grnAnimation2.js"></script>
<script>
$(document).ready(function() {
$("body").addClass('all-loaded');
});
</script>
</body>
</html>
`;
};
Above is what I am trying to display on iOS.