fix react hooks using

autoHeightWebView/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 import { WebView } from 'react-native-webview';
 
-import { getMemoInputProps, getMemoResult, getWidth, isSizeChanged } from './utils';
+import { getMemoResult, getWidth, isSizeChanged } from './utils';
 
 const AutoHeightWebView = forwardRef((props, ref) => {
   let webView = useRef();
@@ -20,7 +20,7 @@ const AutoHeightWebView = forwardRef((props, ref) => {
     injectJavaScript: script => webView.current.injectJavaScript(script)
   }));
 
-  const { style, onMessage, onSizeUpdated } = props;
+  const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
 
   const [size, setSize] = useState(() => ({
     height: style && style.height ? style.height : 0,
@@ -48,7 +48,10 @@ const AutoHeightWebView = forwardRef((props, ref) => {
     onMessage && onMessage(event);
   };
 
-  const { source, script } = useMemo(() => getMemoResult(props), [getMemoInputProps(props)]);
+  const { currentSource, script } = useMemo(
+    () => getMemoResult({ source, baseUrl, files, customStyle, customScript, zoomable }),
+    [source, baseUrl, files, customStyle, customScript, zoomable]
+  );
 
   const { width, height } = size;
   useEffect(
@@ -58,8 +61,9 @@ const AutoHeightWebView = forwardRef((props, ref) => {
         height,
         width
       }),
-    [width, height]
+    [width, height, onSizeUpdated]
   );
+
   return (
     <WebView
       {...props}
@@ -74,7 +78,7 @@ const AutoHeightWebView = forwardRef((props, ref) => {
         style
       ]}
       injectedJavaScript={script}
-      source={source}
+      source={currentSource}
     />
   );
 });
@@ -96,10 +100,11 @@ AutoHeightWebView.propTypes = {
   style: ViewPropTypes.style,
   customScript: PropTypes.string,
   customStyle: PropTypes.string,
+  zoomable: PropTypes.bool,
   // webview props
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
   onMessage: PropTypes.func,
-  zoomable: PropTypes.bool,
+  source: PropTypes.object
 };
 
 let defaultProps = {
@@ -107,7 +112,7 @@ let defaultProps = {
   showsHorizontalScrollIndicator: false,
   originWhitelist: ['*'],
   baseUrl: 'web/',
-  zoomable: true,
+  zoomable: true
 };
 
 Platform.OS === 'android' &&

autoHeightWebView/utils.js

@@ -31,10 +31,12 @@ const updateSizeWithMessage = element =>
 const makeScalePageToFit = zoomable => `
 var meta = document.createElement('meta'); 
 meta.setAttribute('name', 'viewport'); 
-meta.setAttribute('content', 'width=device-width, user-scalable=${zoomable ? 'yes' : 'no'}'); 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, zoomable}) =>
+const getBaseScript = ({ style, zoomable }) =>
   `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
@@ -95,9 +97,8 @@ ${script}
 </script>
 `;
 
-const getScript = props => {
-  const { files, customStyle, customScript, style, zoomable } = props;
-  let script = getBaseScript({style, zoomable});
+const getScript = ({ files, customStyle, customScript, style, zoomable }) => {
+  let script = getBaseScript({ style, zoomable });
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
   script = appendStylesToHead({ style: customStyle, script });
   customScript && (script = customScript + script);
@@ -113,25 +114,19 @@ export const isSizeChanged = ({ height, previousHeight, width, previousWidth })
     return;
   }
   return height !== previousHeight || width !== previousWidth;
-}
-
-export const getMemoInputProps = props => {
-  const { files, customStyle, customScript, style, source, baseUrl } = props;
-  return [files, customStyle, customScript, style, source, baseUrl];
 };
 
 export const getMemoResult = props => {
   const { source, baseUrl } = props;
   const script = getScript(props);
+  let currentSource = baseUrl ? { baseUrl } : {};
   if (source.html) {
-    let currentSource = { html: getInjectedSource({ html: source.html, script }) };
-    baseUrl && Object.assign(currentSource, { baseUrl });
-    return { source: currentSource };
+    Object.assign(currentSource, { html: getInjectedSource({ html: source.html, script }) });
+    return { currentSource };
   } else {
-    let currentSource = Object.assign({}, source);
-    baseUrl && Object.assign(currentSource, { baseUrl });
+    Object.assign(currentSource, source);
     return {
-      source: currentSource,
+      currentSource,
       script
     };
   }