Apply viewportContent prop

.github/ISSUE_TEMPLATE/bug_report.md

@@ -11,7 +11,7 @@ assignees: iou90
 
 **To Reproduce:**
 
-**Source (raw html or url):**
+**Source (static HTML or url):**
 
 **Expected behavior:**
 

README.md

@@ -63,10 +63,10 @@ import { Dimensions } from 'react-native'
 | __source__                       |    -    |                                               `PropTypes.object`                                                | BaseUrl now contained by source. 'web/' by default on iOS; 'file:///android_asset/' by default on Android or uri.                                                                                            |
 | __scalesPageToFit__              |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview which true by default on Android). When scalesPageToFit was enabled, it will apply the scale of the page directly.    |
 | __scrollEnabledWithZoomedin__                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
-| __zoomDisabled__                     |  false   |                                                `PropTypes.bool`                                                 | ZoomDisabled with scalesPageToFit may cause some layout issues on Android, for these conditions, using __customScript__ prop instead to apply custom viewport meta.                                                                        |
+| __viewportContent__                     |  'width=device-width' on iOS   |                                                `PropTypes.string`                                                 | Please note that 'width=device-width' with scalesPageToFit may cause some layout issues on Android, for these conditions, using __customScript__ prop to apply custom viewport meta.                                                                        |
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
 | __showsVerticalScrollIndicator__ |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
-| __originWhitelist__              |  ['*']  |                                      `PropTypes.arrayOf(PropTypes.string)`                                      |  Validate any origin by default cause of most cases using raw html concerns.                                                                                                                                                                                                           |
+| __originWhitelist__              |  ['*']  |                                      `PropTypes.arrayOf(PropTypes.string)`                                      |  Validate any origin by default cause of most cases using static HTML concerns.                                                                                                                                                                                                           |
 
 ## demo
 

autoHeightWebView/index.js

@@ -45,8 +45,8 @@ const AutoHeightWebView = React.memo(
         console.error(error);
         return;
       }
-      const { height, width, zoomin } = data;
-      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomin);
+      const { height, width, zoomedin } = data;
+      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomedin);
       const { height: previousHeight, width: previousWidth } = size;
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
         setSize({

autoHeightWebView/utils.js

@@ -54,12 +54,17 @@ const updateSizeWithMessage = (element, scalesPageToFit) =>
   }
   `;
 
-const disableZoom = `
-  var meta = document.createElement("meta");
-  meta.setAttribute("name", "viewport");
-  meta.setAttribute("content", "width=device-width, user-scalable=no");
-  document.getElementsByTagName("head")[0].appendChild(meta);
-`;
+const setViewportContent = content => {
+  if (!content) {
+    return '';
+  }
+  return `
+    var meta = document.createElement("meta");
+    meta.setAttribute("name", "viewport");
+    meta.setAttribute("content", "${content}");
+    document.getElementsByTagName("head")[0].appendChild(meta);
+  `;
+};
 
 const detectZoomChanged = `
   var zoomedin = false;
@@ -87,7 +92,7 @@ const detectZoomChanged = `
   });
 `;
 
-const getBaseScript = ({ style, zoomDisabled, scalesPageToFit, scrollEnabledWithZoomedin }) =>
+const getBaseScript = ({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
   `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
@@ -102,8 +107,8 @@ const getBaseScript = ({ style, zoomDisabled, scalesPageToFit, scrollEnabledWith
   window.addEventListener('load', updateSize);
   window.addEventListener('resize', updateSize);
   ${domMutationObserveScript}
-  ${zoomDisabled ? disableZoom : ''}
-  ${!zoomDisabled && scrollEnabledWithZoomedin ? detectZoomChanged : ''}
+  ${setViewportContent(viewportContent)}
+  ${scrollEnabledWithZoomedin ? detectZoomChanged : ''}
   updateSize();
   `;
 
@@ -156,11 +161,11 @@ const getScript = ({
   customStyle,
   customScript,
   style,
-  zoomDisabled,
+  viewportContent,
   scalesPageToFit,
   scrollEnabledWithZoomedin
 }) => {
-  let script = getBaseScript({ style, zoomDisabled, scalesPageToFit, scrollEnabledWithZoomedin });
+  let script = getBaseScript({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
   script = appendStylesToHead({ style: customStyle, script });
   customScript && (script = customScript + script);

demo/yarn.lock

@@ -4969,7 +4969,7 @@ react-is@^16.8.1, react-is@^16.8.4:
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
 react-native-autoheight-webview@../:
-  version "1.3.5"
+  version "1.3.6"
   dependencies:
     prop-types "^15.7.2"