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

You can also use expo customize:web then generate the index.html.

1 Like

Exactly what I was looking for :smile: Will there be any way of knowing when your index.html is “out of date”? It might be nice to keep track of when I customized it versus when the default has most recently been changed

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.