Scroll enabled with zoomedin issues (#152)

* Clean up code styles

* Fix https://github.com/iou90/react-native-autoheight-webview/pull/148

* Fix https://github.com/iou90/react-native-autoheight-webview/pull/149

* Upgrade react-native-webview for demo

* Using scaling to fix https://github.com/iou90/react-native-autoheight-webview/pull/149

* Fix scaling, zoomedin undefined issue on Android

* Add usingScale to calculate scale only once per render

* Upgrade react-native-webview to 8.0.4 for demo

autoHeightWebView/index.js

         return;
       }
       const { height, width, zoomedin } = data;
-      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomedin);
+      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
       const { height: previousHeight, width: previousWidth } = size;
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
         setSize({

autoHeightWebView/utils.js

 'use strict';
 
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions } from 'react-native';
 
 const domMutationObserveScript = `
   var MutationObserver =
 
 const updateSizeWithMessage = (element, scalesPageToFit) =>
   `
+  var usingScale = 0;
+  var scaling = false;
+  var zoomedin = false;
   var lastHeight = 0;
   var heightTheSameTimes = 0;
   var maxHeightTheSameTimes = 5;
   var forceRefreshTimeout;
   var checkPostMessageTimeout;
 
-  function updateSize(event) {
+  function updateSize() {
+    if (zoomedin || scaling) {
+      return;
+    }
     if (
       !window.hasOwnProperty('ReactNativeWebView') || 
       !window.ReactNativeWebView.hasOwnProperty('postMessage')
       checkPostMessageTimeout = setTimeout(updateSize, 200);
       return;
     }
+
     clearTimeout(checkPostMessageTimeout);
     height = ${element}.offsetHeight || document.documentElement.offsetHeight;
     width = ${element}.offsetWidth || document.documentElement.offsetWidth;
-    var scale = ${scalesPageToFit ? 'screen.width / window.innerWidth' : '1'};
-    window.ReactNativeWebView.postMessage(JSON.stringify({ width: Math.min(width, screen.width), height: height * scale }));
+
+    if(!usingScale && window.innerWidth) {
+      usingScale = ${scalesPageToFit ? 'screen.width / window.innerWidth' : '1'};
+    }
+
+    window.ReactNativeWebView.postMessage(JSON.stringify({ width: Math.min(width, screen.width), height: height * usingScale }));
 
     // Make additional height checks (required to fix issues wit twitter embeds)
     clearTimeout(forceRefreshTimeout);
+
     if (lastHeight !== height) {
       heightTheSameTimes = 1;
     } else {
 };
 
 const detectZoomChanged = `
-  var zoomedin = false;
   var latestTapStamp = 0;
-  var lastScale = false;
+  var lastScale = 1.0;
   var doubleTapDelay = 400;
   function detectZoomChanged() {
-    var tempZoomedin = (screen.width / window.innerWidth) > 1;
+    var tempZoomedin = (screen.width / window.innerWidth) > (usingScale || 1);
     tempZoomedin !== zoomedin && window.ReactNativeWebView.postMessage(JSON.stringify({ zoomedin: tempZoomedin }));
     zoomedin = tempZoomedin;
   }
+  window.addEventListener('ontouchstart', event => {
+    if (event.touches.length === 2) {
+      scaling = true;
+    }
+  })
   window.addEventListener('touchend', event => {
+    if(scaling) {
+      scaleing = false;
+    }
+
     var tempScale = event.scale; 
     tempScale !== lastScale && detectZoomChanged();
     lastScale = tempScale;
     var timeSince = new Date().getTime() - latestTapStamp;
+
     // double tap   
     if(timeSince < 600 && timeSince > 0) {
       zoomedinTimeOut = setTimeout(() => {
         detectZoomChanged();
       }, doubleTapDelay);
     }
+
     latestTapStamp = new Date().getTime();
   });
 `;
 
-const getBaseScript = ({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
+const getBaseScript = ({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin }) =>
   `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
   scalesPageToFit,
   scrollEnabledWithZoomedin
 }) => {
-  let script = getBaseScript({ style, viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
+  let script = getBaseScript({ viewportContent, scalesPageToFit, scrollEnabledWithZoomedin });
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
   script = appendStylesToHead({ style: customStyle, script });
   customScript && (script = customScript + script);

demo/config.js

 
 import newsletter from "./newsletter";
 
-const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> 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 <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
+const autoHeightHtml0 = newsletter; //`<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;"><a href="https://github.com/iou90/react-native-autoheight-webview">Tags</a> 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 <a href="http://x-squad.com">tags</a> "pets", "marriage", "career change", and "travel tips".</span></p>`;
 
-const autoHeightHtml1 = newsletter; //`Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. 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".`;
+const autoHeightHtml1 = `Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. 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".`;
 
 const style0 = `
     p {

demo/ios/Podfile.lock

     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
   - React-jsinspector (0.61.5)
-  - react-native-webview (8.0.2):
+  - react-native-webview (8.0.4):
     - React
   - React-RCTActionSheet (0.61.5):
     - React-Core/RCTActionSheetHeaders (= 0.61.5)
   React-jsi: cb2cd74d7ccf4cffb071a46833613edc79cdf8f7
   React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
   React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
-  react-native-webview: 99bdfd6c189772b0f15494f728430c23b18b93e4
+  react-native-webview: 3f5aa91c3cb083ea4762e006b9653291a96a777a
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
   React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
   React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

demo/ios/demo.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

demo/package.json

     "react": "16.9.0",
     "react-native": "0.61.5",
     "react-native-autoheight-webview": "../",
-    "react-native-webview": "^8.0.2"
+    "react-native-webview": "^8.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",

demo/yarn.lock

   dependencies:
     prop-types "^15.7.2"
 
-react-native-webview@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.0.2.tgz#1afac4cd859ab24141490e105d1a27e18e3984a9"
-  integrity sha512-Higfj0CCPM9N76S3rQsKHKS8Rw5QA7h7UENrREmMarEN/2saZJ+ko0aIVYOlEJ4P9ZhhRLNH/3mWvzmT4spncw==
+react-native-webview@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-8.0.4.tgz#4951df32bd54f6fa16bc0eda5e6e6762d8b83ba8"
+  integrity sha512-XEatna1wwF43Rg500HaDIC/MS2IAob/PvjkTePCevs9wQz90SwERTjGZNuM2WxH+JwrZrxoilGBOn34vQTTJkw==
   dependencies:
     escape-string-regexp "2.0.0"
     invariant "2.2.4"