How to Zoom out in WebView in react-native?

Question

I am using "WebView" in react-native for rendering a web page. The web page doesn't have mobile-friendly UI.

When I open it in Chrome Browser, it looks like below. AND I WANT TO RENDER IT LIKE BELOW

But When I render below code, it looks like the image shown below. Please see that I have tried different props automaticallyAdjustContentInsets = {false} , scalesPageToFit={false}. But it's not giving me the desire output.

render(){
    const URL  = "https://stellarterm.com";
    return(
          <WebView 
             source={{URL}}
          />

Result

Please feel free to suggest any solution if you have. Any third party library will also be okay.

Answer 1

Your site has page width set in meta already <meta name="viewport" content="width=1080">

So you will need to override that with injectedJavaScript

injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `} scalesPageToFit={false}

Answer 2

The user-scalable property on the selected answer's injection must be set to 1 to enable manual screen scaling.