Tip: Hacky way to add custom css or scripts

If you’d like to add a script or style to your HTML, you can append it to the end of your body.

Here’s an example with Google Places Autocomplete. The existing react native library wasn’t working for it because it used the web-service API which didn’t allow for CORS. We needed to import the javascript SDK, as well as add some custom styles:

// import google places autocomplete javascript sdk
let script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places");
script.setAttribute("async", "");
script.setAttribute("defer", "");
document.body.appendChild(script);

// fix style for results container
let style = document.createElement("style");
style.setAttribute("type", "text/css");
style.appendChild(document.createTextNode(`
  .pac-container { 
    flex-direction: column;
    min-height: 10%;
  }
`));
document.body.appendChild(style);

Interesting. Thanks for sharing @raphaelrk!

1 Like