CODEWITHSUNDEEP
androidioswebviewreact-nativehybrid-mobile-app
Amal p
Amal p

Reputation: 3042

Disable zoom on web-view react-native?

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>

Upvotes: 47

Views: 52640

Answers (7)

gregoryperez777
gregoryperez777

Reputation: 111

I was also find me with this problem and I resolved using

setBuiltInZoomControls={false} like prop in WebView

example

<WebView
   /*all prop to use*/ 
   setBuiltInZoomControls={false}
/>

I hope that to be help

Upvotes: 7

thinklinux
thinklinux

Reputation: 1377

If you are using WKWebView - scalesPageToFit prop does not work. You can check this issue here that will lead you to this one

Now to accomplish what you want you should use the injectedJavascript prop. But there is something else as described here

Be sure to set an onMessage handler, even if it's a no-op, or the code will not be run.

This took me some time to discover. So in the end you have something like this:

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

<WebView
  source={{ uri }}
  scrollEnabled={false}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={() => {}}
/>

Upvotes: 18

shahonseven
shahonseven

Reputation: 1172

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">

Upvotes: 77

ganesh konathala
ganesh konathala

Reputation: 317

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

Upvotes: 10

Amal p
Amal p

Reputation: 3042

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
 />

Upvotes: 32

jmwicks
jmwicks

Reputation: 563

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>

Upvotes: 2

Ismail Iqbal
Ismail Iqbal

Reputation: 2580

Try scalesPageToFit={false} more info in here

Upvotes: 14

Related Questions