Disable zoom on web-view react-native?

Question

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 bel

Answer 1

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={() => {}}
/>