added zoomable prop for ios

README.md

@@ -51,6 +51,8 @@ import AutoHeightWebView from 'react-native-autoheight-webview'
     }]}
     // or uri
     source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
+    // disables zoom on ios (true by default)
+    zoomable={false}
     /* 
     other react-native-webview props
     */

autoHeightWebView/index.js

@@ -98,14 +98,16 @@ AutoHeightWebView.propTypes = {
   customStyle: PropTypes.string,
   // webview props
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
-  onMessage: PropTypes.func
+  onMessage: PropTypes.func,
+  zoomable: PropTypes.bool,
 };
 
 let defaultProps = {
   showsVerticalScrollIndicator: false,
   showsHorizontalScrollIndicator: false,
   originWhitelist: ['*'],
-  baseUrl: 'web/'
+  baseUrl: 'web/',
+  zoomable: true,
 };
 
 Platform.OS === 'android' &&

autoHeightWebView/utils.js

@@ -28,13 +28,13 @@ const updateSizeWithMessage = element =>
   `;
 
 // add viewport setting to meta for WKWebView
-const makeScalePageToFit = `
+const makeScalePageToFit = zoomable => `
 var meta = document.createElement('meta'); 
 meta.setAttribute('name', 'viewport'); 
-meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
+meta.setAttribute('content', 'width=device-width, user-scalable=${zoomable ? 'yes' : 'no'}'); document.getElementsByTagName('head')[0].appendChild(meta);
 `;
 
-const getBaseScript = style =>
+const getBaseScript = props =>
   `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
@@ -45,12 +45,12 @@ const getBaseScript = style =>
     }
     document.body.appendChild(wrapper);
   }
-  var width = ${getWidth(style)};
+  var width = ${getWidth(props.style)};
   ${updateSizeWithMessage('wrapper')}
   window.addEventListener('load', updateSize);
   window.addEventListener('resize', updateSize);
   ${domMutationObserveScript}
-  ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
+  ${Platform.OS === 'ios' ? makeScalePageToFit(props.zoomable) : ''}
   updateSize();
   `;
 
@@ -96,8 +96,8 @@ ${script}
 `;
 
 const getScript = props => {
-  const { files, customStyle, customScript, style } = props;
-  let script = getBaseScript(style);
+  const { files, customStyle, customScript } = props;
+  let script = getBaseScript(props);
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
   script = appendStylesToHead({ style: customStyle, script });
   customScript && (script = customScript + script);

index.d.ts

@@ -24,6 +24,7 @@ export interface AutoHeightWebViewProps extends WebViewProps {
     style: ViewStyle;
     customScript: string;
     customStyle: string;
+    zoomable: boolean;
 }
 
 export default class AutoHeightWebView extends Component<Partial<AutoHeightWebViewProps>> {}