Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting white screen when trying to load JS file On android devices

See original GitHub issue

Hello and thank you for taking the time to report a bug. This is a community repository, meaning that it’s everyone’s responsibility to address bugs and send pull requests. Maintainers will be here to help/guide you if you have questions. Please search in the opened issues before submitting a new one. Issues with no activity for a long time will be closed.

Bug description: when trying to load intercom JS api, i got always a white screen.

To Reproduce:

const template = email =>
  `
  <!DOCTYPE html>
  <html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript">
    var APP_ID = 'XXXXXX';
    window.intercomSettings = {
      app_id: 'XXXXXX',
    };
    (function() {
      var w = window;
      var ic = w.Intercom;
      if (typeof ic === 'function') {
        ic('reattach_activator');
        ic('update', w.intercomSettings);
      } else {
        var d = document;
        var i = function() {
          i.c(arguments);
        };
        i.q = [];
        i.c = function(args) {
          i.q.push(args);
        };
        w.Intercom = i;
        var l = function() {
          var s = d.createElement('script');
          s.type = 'text/javascript';
          s.async = true;
          s.src = 'https://widget.intercom.io/widget/' + 'qpap2gle';
          var x = d.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
        };
        if (document.readyState === 'complete') {
          l();
        } else if (w.attachEvent) {
          w.attachEvent('onload', l);
          window.onload = l;
        } else {
          w.addEventListener('load', l, false);
        }
      }
    })();

    window.Intercom('show');
    window.Intercom('boot', {
      app_id: 'XXXXXX',
    });
  </script>
  </head>
  <body></body>
</html>

`;

const IntercomWebview = ({  navigation }) => {

  return (
      <WebView
        source={{ html: template() }}
        startInLoadingState
        useWebKit={true}
        style={{
          backgroundColor: 'green',
          width: Dimensions.get('window').width,
          height: Dimensions.get('window').height,
        }}
        onError={e => console.log('e', e)}
      />
  );
};

Expected behavior: It should load intercom messanger

Environment:

react-native version: 0.59.8,
react-native-webview version:5.8.2

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

jpagandcommented, Sep 20, 2019

I had the same problem and this is the error I managed to log: Failed to read the 'cookie' property from 'Document': Access is denied for this document

I was then able to fix it adding this code before initialising intercom:

if(!document.__defineGetter__) {
    Object.defineProperty(document, 'cookie', {
        get: function(){return ''},
        set: function(){return true},
    });
} else {
    document.__defineGetter__("cookie", function() { return '';} );
    document.__defineSetter__("cookie", function() {} );
}

Credit to: https://stackoverflow.com/a/53725491/1753600

1reaction

zhouping3commented, Aug 12, 2019

I encountered the same situation Environment: expo: 33 react-native version: 0.59.8, react-native-webview version:5.8.2