Hide mobile browser's address bar on load (IOS / Android) in React

Question

Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, the URL bar minimises:

My project is based on React JS and I am trying to achieve this result on page load (So no user interaction needed, page needs to load with the URL bar minimised. My web-app is made of a single page and no scrolling is possible (Application similar to Google Maps).

What I have tried so far (on an iPhone X):

1. manifest.json > "display": "standalone" > This makes the URL bar disappear only when the page is saved to homepage (Not a good option)
2. window.scrollTo(0, 1); in index.js (So it gets called on load), nothing happening, perhaps triggering only onScroll, but I can't do that.

References: https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

Answer 1

For Safari:

<meta name="apple-mobile-web-app-capable" content="yes">

If content is set to yes, the web application runs in full-screen mode. Source: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

For Chrome:

<meta name="mobile-web-app-capable" content="yes">

It does the same thing as the above one but, this is for android and the above one is for ios.