title: Hide mobile browser's address bar on load (IOS / Android) in React
body: <p><strong>Safari</strong> and <strong>Chrome</strong> on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, the URL bar <strong>minimises</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/EwbmE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EwbmE.png" alt="enter image description here"></a></p>
  
  <p>My project is based on <strong>React</strong> JS and I am trying to achieve this result on page load (So no user interaction needed, page needs to load with the <strong>URL bar minimised</strong>. My web-app is made of a <strong>single page</strong> and <strong>no scrolling</strong> is possible (Application similar to Google Maps). </p>
  
  <p>What I have tried so far (on an iPhone X): </p>
  
  <ol>
  <li><strong>manifest.json</strong> > "display": "standalone" > This makes the URL bar disappear only when the page is saved to homepage (Not a good option)</li>
  <li><strong>window.scrollTo(0, 1)</strong>; in index.js (So it gets called on load), nothing happening, perhaps triggering only onScroll, but I can't do that. </li>
  </ol>
  
  <p>References: <a href="https://developers.google.com/web/fundamentals/native-hardware/fullscreen/" rel="noreferrer">https://developers.google.com/web/fundamentals/native-hardware/fullscreen/</a></p>