Browse Source

added zoomable prop for ios

Pavel T 5 years ago
parent
commit
b6b1ba5c5b
4 changed files with 14 additions and 9 deletions
  1. 2
    0
      README.md
  2. 4
    2
      autoHeightWebView/index.js
  3. 7
    7
      autoHeightWebView/utils.js
  4. 1
    0
      index.d.ts

+ 2
- 0
README.md View File

@@ -51,6 +51,8 @@ import AutoHeightWebView from 'react-native-autoheight-webview'
51 51
     }]}
52 52
     // or uri
53 53
     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>` }}
54
+    // disables zoom on ios (true by default)
55
+    zoomable={false}
54 56
     /* 
55 57
     other react-native-webview props
56 58
     */

+ 4
- 2
autoHeightWebView/index.js View File

@@ -98,14 +98,16 @@ AutoHeightWebView.propTypes = {
98 98
   customStyle: PropTypes.string,
99 99
   // webview props
100 100
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
101
-  onMessage: PropTypes.func
101
+  onMessage: PropTypes.func,
102
+  zoomable: PropTypes.bool,
102 103
 };
103 104
 
104 105
 let defaultProps = {
105 106
   showsVerticalScrollIndicator: false,
106 107
   showsHorizontalScrollIndicator: false,
107 108
   originWhitelist: ['*'],
108
-  baseUrl: 'web/'
109
+  baseUrl: 'web/',
110
+  zoomable: true,
109 111
 };
110 112
 
111 113
 Platform.OS === 'android' &&

+ 7
- 7
autoHeightWebView/utils.js View File

@@ -28,13 +28,13 @@ const updateSizeWithMessage = element =>
28 28
   `;
29 29
 
30 30
 // add viewport setting to meta for WKWebView
31
-const makeScalePageToFit = `
31
+const makeScalePageToFit = zoomable => `
32 32
 var meta = document.createElement('meta'); 
33 33
 meta.setAttribute('name', 'viewport'); 
34
-meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);
34
+meta.setAttribute('content', 'width=device-width, user-scalable=${zoomable ? 'yes' : 'no'}'); document.getElementsByTagName('head')[0].appendChild(meta);
35 35
 `;
36 36
 
37
-const getBaseScript = style =>
37
+const getBaseScript = props =>
38 38
   `
39 39
   ;
40 40
   if (!document.getElementById("rnahw-wrapper")) {
@@ -45,12 +45,12 @@ const getBaseScript = style =>
45 45
     }
46 46
     document.body.appendChild(wrapper);
47 47
   }
48
-  var width = ${getWidth(style)};
48
+  var width = ${getWidth(props.style)};
49 49
   ${updateSizeWithMessage('wrapper')}
50 50
   window.addEventListener('load', updateSize);
51 51
   window.addEventListener('resize', updateSize);
52 52
   ${domMutationObserveScript}
53
-  ${Platform.OS === 'ios' ? makeScalePageToFit : ''}
53
+  ${Platform.OS === 'ios' ? makeScalePageToFit(props.zoomable) : ''}
54 54
   updateSize();
55 55
   `;
56 56
 
@@ -96,8 +96,8 @@ ${script}
96 96
 `;
97 97
 
98 98
 const getScript = props => {
99
-  const { files, customStyle, customScript, style } = props;
100
-  let script = getBaseScript(style);
99
+  const { files, customStyle, customScript } = props;
100
+  let script = getBaseScript(props);
101 101
   script = files && files.length > 0 ? appendFilesToHead({ files, script }) : script;
102 102
   script = appendStylesToHead({ style: customStyle, script });
103 103
   customScript && (script = customScript + script);

+ 1
- 0
index.d.ts View File

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