add auto height related data to config.js & add auto with feature for demo

demo/App.js

@@ -10,21 +10,28 @@ import {
   autoHeightHtml0,
   autoHeightHtml1,
   autoHeightScript,
-  autoHeightStyle0,
   autoWidthHtml0,
   autoWidthHtml1,
   autoWidthScript,
-  autoWidthStyle0
+  style0,
+  inlineBodyStyle
 } from './config';
 
 export default class Explorer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      html: autoHeightHtml0,
-      script: null,
-      webViewStyle: null,
-      size: {
+      heightHtml: autoHeightHtml0,
+      heightScript: null,
+      heightStyle: null,
+      heightSize: {
+        height: 0,
+        width: 0
+      },
+      widthHtml: autoWidthHtml0,
+      widthScript: null,
+      widthStyle: inlineBodyStyle,
+      widthSize: {
         height: 0,
         width: 0
       }
@@ -33,27 +40,40 @@ export default class Explorer extends Component {
 
   changeSource = () => {
     this.setState(prevState => ({
-      html: prevState.html === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
+      widthHtml: prevState.widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
+      heightHtml: prevState.heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
     }));
   };
 
   changeStyle = () => {
     this.setState(prevState => ({
-      webViewStyle: prevState.webViewStyle == null ? autoHeightStyle0 : null
+      widthStyle: prevState.widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
+      heightStyle: prevState.heightStyle == null ? style0 : null
     }));
   };
 
   changeScript = () => {
     this.setState(prevState => ({
-      script: prevState.script === null ? autoHeightScript : null
+      widthScript: prevState.widthScript === null ? autoWidthScript : null,
+      heightScript: prevState.heightScript === null ? autoHeightScript : null
     }));
   };
 
   render() {
-    const { html, size, webViewStyle, script } = this.state;
+    const {
+      heightHtml,
+      heightSize,
+      heightStyle,
+      heightScript,
+      widthHtml,
+      widthSize,
+      widthStyle,
+      widthScript
+    } = this.state;
     return (
       <ScrollView
         style={{
+          paddingTop: 45,
           backgroundColor: 'lightyellow'
         }}
         contentContainerStyle={{
@@ -62,19 +82,42 @@ export default class Explorer extends Component {
         }}
       >
         <AutoHeightWebView
-          customStyle={webViewStyle}
-          onError={() => console.log('on error')}
-          onLoad={() => console.log('on load')}
-          onLoadStart={() => console.log('on load start')}
-          onLoadEnd={() => console.log('on load end')}
+          customStyle={heightStyle}
+          onError={() => console.log('height on error')}
+          onLoad={() => console.log('height on load')}
+          onLoadStart={() => console.log('height on load start')}
+          onLoadEnd={() => console.log('height on load end')}
           onShouldStartLoadWithRequest={result => {
             console.log(result);
             return true;
           }}
-          onSizeUpdated={size => this.setState({ size })}
-          source={{ html }}
-          customScript={script}
+          onSizeUpdated={heightSize => this.setState({ heightSize })}
+          source={{ html: heightHtml }}
+          customScript={heightScript}
         />
+        <Text style={{ padding: 5 }}>
+          height: {heightSize.height}, width: {heightSize.width}
+        </Text>
+        <AutoHeightWebView
+          style={{
+            marginTop: 15
+          }}
+          customStyle={widthStyle}
+          onError={() => console.log('width on error')}
+          onLoad={() => console.log('width on load')}
+          onLoadStart={() => console.log('width on load start')}
+          onLoadEnd={() => console.log('width on load end')}
+          onShouldStartLoadWithRequest={result => {
+            console.log(result);
+            return true;
+          }}
+          onSizeUpdated={widthSize => this.setState({ widthSize })}
+          source={{ html: widthHtml }}
+          customScript={widthScript}
+        />
+        <Text style={{ padding: 5 }}>
+          height: {widthSize.height}, width: {widthSize.width}
+        </Text>
         <TouchableOpacity onPress={this.changeSource} style={styles.button}>
           <Text>change source</Text>
         </TouchableOpacity>
@@ -82,11 +125,8 @@ export default class Explorer extends Component {
           <Text>change style</Text>
         </TouchableOpacity>
         <TouchableOpacity onPress={this.changeScript} style={styles.button}>
-          <Text>change script (have to change source to reload on android)</Text>
+          <Text>change heightScript</Text>
         </TouchableOpacity>
-        <Text style={{ padding: 5 }}>
-          height: {size.height}, width: {size.width}
-        </Text>
       </ScrollView>
     );
   }

demo/config.js

@@ -4,42 +4,48 @@ const autoHeightHtml0 = `<p style="font-weight: 400;font-style: normal;font-size
 
 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”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.`;
 
-const autoHeightStyle0 = `
+const style0 = `
     p {
         font-size: 25px !important;
     }
 `;
 
-const autoHeightStyle1 = `
+const style1 = `
     p {
         font-size: 12px !important;
     }
 `;
 
+const inlineBodyStyle = `
+    body {
+    display: inline-block 
+    }
+`;
+
 const autoHeightScript = `
 var styleElement = document.createElement('style');
-styleElement.innerHTML = '${autoHeightStyle1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
+styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
 document.head.appendChild(styleElement);
 document.body.style.background = 'cornflowerblue';
 `;
 
-const autoWidthHtml0 = ``;
-
-const autoWidthHtml1 = ``;
+const autoWidthHtml0 = `<p style="display: inline-block;background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">hey</p>`;
 
-const autoWidthStyle0 = ``;
+const autoWidthHtml1 = `<p style="display: inline-block;background-color: transparent !important;font-size: 35px;">hey</p>`;
 
-const autoWidthStyle1 = ``;
-
-const autoWidthScript = ``;
+const autoWidthScript = `
+var styleElement = document.createElement('style');
+styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
+document.head.appendChild(styleElement);
+`;
 
 export {
   autoHeightHtml0,
   autoHeightHtml1,
-  autoHeightStyle0,
+  style0,
   autoHeightScript,
   autoWidthHtml0,
   autoWidthHtml1,
   autoWidthScript,
-  autoWidthStyle0
+  inlineBodyStyle
 };