android – Disable zoom on web-view react-native?-ThrowExceptions

Exception or error:

How to disable zoom on react-native web-view,is there a property like hasZoom={false}(just an example) that can be included in the below web-view tag that can disable zooming.
It has to be working on both android and ios.

<WebView
     ref={WEBVIEW_REF}
     source={{uri:Environment.LOGIN_URL}}
     ignoreSslError={true}
     onNavigationStateChange={this._onNavigationStateChange.bind(this)}
     onLoad={this.onLoad.bind(this)}
     onError={this.onError.bind(this)}
 ></WebView> 
How to solve:

Thought this might help others, I solved this by adding the following in the html <head> section:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

###

For those who want a clear idea:

const 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); `

 <WebView
  source={{ html: params.content.rendered }}
  scalesPageToFit={isAndroid() ? false : true}
  injectedJavaScript={INJECTEDJAVASCRIPT}
  scrollEnabled
 />

###

Try scalesPageToFit={false} more info in here

###

Little hacky stuff but it works

const INJECTEDJAVASCRIPT = 'const meta = document.createElement(\'meta\'); meta.setAttribute(\'content\', \'width=device-width, initial-scale=1, maximum-scale=0.99, user-scalable=0\'); meta.setAttribute(\'name\', \'viewport\'); document.getElementsByTagName(\'head\')[0].appendChild(meta); '



<WebView
        injectedJavaScript={INJECTEDJAVASCRIPT}
        scrollEnabled
        ref={(webView) => {
          this.webView = webView
        }}
        originWhitelist={['*']}
        source={{ uri: url }}
        onNavigationStateChange={(navState) => {
          this.setState({
            backButtonEnabled: navState.canGoBack,
          })
        }}
      />

Note
initial-scale=1, maximum-scale=0.99, user-scalable=0

###

I was able to disable zooming, text selection and other pointer events by wrapping WebView in a View and setting a few props:

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>

###

For anyone in the future, I solved this by adding the following css :

*:not(input) {
  user-select: none;
}

The above basically disable text selection on all elements, which during my testing disallowed zooming on webpage. FYI: I haven’t dived deep into details, just stating its effects.

###

Put this attribute to Webview pointerEvents="none" , or wrap the Webview by other view with this attribute.

Leave a Reply

Your email address will not be published. Required fields are marked *