Merge branch 'scalesPageToFit' into scrollWhenZoomin

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,25 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: iou90
+
+---
+
+**Bug description:**
+
+**To Reproduce:**
+
+**Source (raw html or url):**
+
+**Expected behavior:**
+
+**Screenshots/Videos:**
+
+**Environment:**
+ - OS:
+ - OS version:
+ - react-native version:
+ - react-native-webview version:
+ - react-native-autoheight-webview version:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,16 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: feature request
+assignees: iou90
+
+---
+
+**Is your feature request related to a problem? If so, Please describe.**
+
+**Describe the solutions you came up with**
+
+**Platform targeting (iOS/Android)**
+
+**Additional context**

README.md

@@ -62,7 +62,7 @@ import { Dimensions } from 'react-native'
 | files                        |    -    | `PropTypes.arrayOf(PropTypes.shape({ href: PropTypes.string, type: PropTypes.string, rel: PropTypes.string }))` | Using local or remote files. To add local files: Add files to android/app/src/main/assets/ (depends on baseUrl) on android; add files to web/ (depends on baseUrl) on iOS.                                   |
 | 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 instead of using viewport meta script.    |
-| scrollableWhenZoomin                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
+| scrollEnabledWithZoomedin                     |  false   |                                                `PropTypes.bool`                                                 | Making the webview scrollable on iOS when zoomed in even if scrollEnabled is false.                                                                        |
 | zoomable                     |  true   |                                                `PropTypes.bool`                                                 | Only works on iOS when disable scalesPageToFit, in other conditions, using custom scripts to create viewport meta to disable zooming.                                                                        |
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
 | showsVerticalScrollIndicator |  false  |                                                `PropTypes.bool`                                                 | False by default (different from react-native-webview).                                                                                                                                                      |
@@ -71,7 +71,7 @@ import { Dimensions } from 'react-native'
 ## demo
 
 ```
-npx react-native run-ios/anroid
+npx react-native run-ios/android
 ```
 
 You may have to use yarn to install the dependencies of the demo and remove "demo/node_modules/react-native-autoheight-webview/demo" manually, cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105) and "yarn install" ignores "files" from local dependencies (https://github.com/yarnpkg/yarn/issues/2822).

autoHeightWebView/index.js

@@ -12,7 +12,7 @@ import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
 
 const AutoHeightWebView = React.memo(
   forwardRef((props, ref) => {
-    const { style, onMessage, onSizeUpdated, scrollableWhenZoomin, scrollEnabled, source } = props;
+    const { style, onMessage, onSizeUpdated, scrollEnabledWithZoomedin, scrollEnabled, source } = props;
 
     if (!source) {
       return null;
@@ -46,7 +46,7 @@ const AutoHeightWebView = React.memo(
         return;
       }
       const { height, width, zoomin } = data;
-      !scrollEnabled && scrollableWhenZoomin && setScrollable(zoomin);
+      !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(zoomin);
       const { height: previousHeight, width: previousWidth } = size;
       isSizeChanged({ height, previousHeight, width, previousWidth }) &&
         setSize({
@@ -54,9 +54,9 @@ const AutoHeightWebView = React.memo(
           width
         });
     };
-
-    const currentScrollEnabled = scrollEnabled === false && scrollableWhenZoomin ? scrollable : scrollEnabled;
-
+    
+    const currentScrollEnabled = scrollEnabled === false && scrollEnabledWithZoomedin ? scrollable : scrollEnabled;
+    
     const { currentSource, script } = reduceData(props);
 
     const { width, height } = size;
@@ -105,7 +105,7 @@ AutoHeightWebView.propTypes = {
   customScript: PropTypes.string,
   customStyle: PropTypes.string,
   zoomable: PropTypes.bool,
-  scrollableWhenZoomin: PropTypes.bool,
+  scrollEnabledWithZoomedin: PropTypes.bool,
   // webview props
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
   onMessage: PropTypes.func,

autoHeightWebView/utils.js

@@ -91,7 +91,7 @@ const detectZoomChanged = `
   });
 `
 
-const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollableWhenZoomin }) =>
+const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin }) =>
   `
   ;
   if (!document.getElementById("rnahw-wrapper")) {
@@ -107,7 +107,7 @@ const getBaseScript = ({ style, zoomable, scalesPageToFit, scrollableWhenZoomin
   window.addEventListener('resize', updateSize);
   ${domMutationObserveScript}
   ${makeScalePageToFit(zoomable, scalesPageToFit)}
-  ${scrollableWhenZoomin ? detectZoomChanged : ''}
+  ${scrollEnabledWithZoomedin ? detectZoomChanged : ''}
   updateSize();
   `;
 
@@ -155,8 +155,8 @@ const getInjectedSource = ({ html, script }) => `
   </script>
 `;
 
-const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit, scrollableWhenZoomin }) => {
-  let script = getBaseScript({ style, zoomable, scalesPageToFit, scrollableWhenZoomin });
+const getScript = ({ files, customStyle, customScript, style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin }) => {
+  let script = getBaseScript({ style, zoomable, scalesPageToFit, scrollEnabledWithZoomedin });
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
   script = appendStylesToHead({ style: customStyle, script });
   customScript && (script = customScript + script);

index.d.ts

@@ -26,7 +26,7 @@ export interface AutoHeightWebViewProps extends WebViewProps {
   customScript: string;
   customStyle: string;
   zoomable: boolean;
-  scrollableWhenZoomin: boolean;
+  scrollEnabledWithZoomedin: boolean;
 }
 
 export default class AutoHeightWebView extends Component<Partial<AutoHeightWebViewProps>> {}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-autoheight-webview",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "An auto height webview for React Native, even auto width for inline html",
   "main": "autoHeightWebView",
   "types": "index.d.ts",