feat(demo): Update demo to show off how to open html links in phone browser

demo/App.js

@@ -2,7 +2,14 @@
 
 import React, { Component } from 'react';
 
-import { ScrollView, StyleSheet, Text, TouchableOpacity, Platform } from 'react-native';
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Platform,
+  Linking
+} from 'react-native';
 
 import AutoHeightWebView from 'react-native-autoheight-webview';
 
@@ -13,6 +20,8 @@ import {
   autoWidthHtml0,
   autoWidthHtml1,
   autoWidthScript,
+  autoDetectLinkHtml,
+  autoDetectLinkScript,
   style0,
   inlineBodyStyle
 } from './config';
@@ -40,22 +49,42 @@ export default class Explorer extends Component {
 
   changeSource = () => {
     this.setState(prevState => ({
-      widthHtml: prevState.widthHtml === autoWidthHtml0 ? autoWidthHtml1 : autoWidthHtml0,
-      heightHtml: prevState.heightHtml === autoHeightHtml0 ? autoHeightHtml1 : autoHeightHtml0
+      widthHtml:
+        prevState.widthHtml === autoWidthHtml0
+          ? autoWidthHtml1
+          : autoWidthHtml0,
+      heightHtml:
+        prevState.heightHtml === autoHeightHtml0
+          ? autoHeightHtml1
+          : autoHeightHtml0
     }));
   };
 
   changeStyle = () => {
     this.setState(prevState => ({
-      widthStyle: prevState.widthStyle == inlineBodyStyle ? style0 + inlineBodyStyle : inlineBodyStyle,
+      widthStyle:
+        prevState.widthStyle == inlineBodyStyle
+          ? style0 + inlineBodyStyle
+          : inlineBodyStyle,
       heightStyle: prevState.heightStyle == null ? style0 : null
     }));
   };
 
   changeScript = () => {
     this.setState(prevState => ({
-      widthScript: prevState.widthScript === null ? autoWidthScript : null,
-      heightScript: prevState.heightScript === null ? autoHeightScript : null
+      widthScript:
+        prevState.widthScript !== autoWidthScript ? autoWidthScript : null,
+      heightScript:
+        prevState.heightScript !== autoHeightScript ? autoHeightScript : null
+    }));
+  };
+
+  changeTryBrowser = () => {
+    this.setState(_ => ({
+      widthHtml: autoWidthHtml0,
+      heightHtml: autoDetectLinkHtml,
+      widthScript: autoDetectLinkScript,
+      heightScript: autoDetectLinkScript
     }));
   };
 
@@ -79,8 +108,7 @@ export default class Explorer extends Component {
         contentContainerStyle={{
           justifyContent: 'center',
           alignItems: 'center'
-        }}
-      >
+        }}>
         <AutoHeightWebView
           customStyle={heightStyle}
           onError={() => console.log('height on error')}
@@ -94,12 +122,37 @@ export default class Explorer extends Component {
           onSizeUpdated={heightSize => this.setState({ heightSize })}
           source={{ html: heightHtml }}
           customScript={heightScript}
+          onMessage={event => {
+            console.log('onMessage', event.nativeEvent.data);
+            let { data } = event.nativeEvent;
+
+            // maybe parse stringified JSON
+            try {
+              data = JSON.parse(data);
+            } catch (e) {
+              console.log(e.message);
+            }
+
+            if (typeof data === 'object') {
+              const { url } = data;
+              // check if this message concerns us
+              if (url && url.startsWith('http')) {
+                Linking.openURL(url).catch(err =>
+                  console.error('An error occurred', err)
+                );
+              }
+            }
+          }}
         />
         <Text style={{ padding: 5 }}>
           height: {heightSize.height}, width: {heightSize.width}
         </Text>
         <AutoHeightWebView
-          baseUrl={Platform.OS === 'android' ? 'file:///android_asset/webAssets/' : 'webAssets/'}
+          baseUrl={
+            Platform.OS === 'android'
+              ? 'file:///android_asset/webAssets/'
+              : 'webAssets/'
+          }
           style={{
             marginTop: 15
           }}
@@ -133,7 +186,12 @@ export default class Explorer extends Component {
         <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
           <Text>change style</Text>
         </TouchableOpacity>
-        <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
+        <TouchableOpacity onPress={this.changeTryBrowser} style={styles.button}>
+          <Text>try browser links</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={this.changeScript}
+          style={[styles.button, { marginBottom: 100 }]}>
           <Text>change script</Text>
         </TouchableOpacity>
       </ScrollView>

demo/config.js

@@ -26,7 +26,9 @@ const inlineBodyStyle = `
 
 const autoHeightScript = `
 var styleElement = document.createElement('style');
-styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
+styleElement.innerHTML = '${style1
+  .replace(/\'/g, "\\'")
+  .replace(/\n/g, '\\n')}';
 document.head.appendChild(styleElement);
 document.body.style.background = 'cornflowerblue';
 `;
@@ -46,10 +48,29 @@ const autoWidthHtml1 = `
 
 const autoWidthScript = `
 var styleElement = document.createElement('style');
-styleElement.innerHTML = '${style1.replace(/\'/g, "\\'").replace(/\n/g, '\\n')}';
+styleElement.innerHTML = '${style1
+  .replace(/\'/g, "\\'")
+  .replace(/\n/g, '\\n')}';
 document.head.appendChild(styleElement);
 `;
 
+const autoDetectLinkHtml = `
+  <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>
+`;
+
+//https://medium.com/@elhardoum/opening-external-links-in-browser-in-react-native-webview-18fe6a66312a
+const autoDetectLinkScript = `
+!function(){
+  function isUrl(str){
+    return str.startsWith('http');
+  }
+  var e=function(e,n,t){if(n=n.replace(/^on/g,""),"addEventListener"in window)e.addEventListener(n,t,!1);else if("attachEvent"in window)e.attachEvent("on"+n,t);else{var o=e["on"+n];e["on"+n]=o?function(e){o(e),t(e)}:t}return e},n=document.querySelectorAll("a[href]");if(n)for(var t in n)n.hasOwnProperty(t)&&e(n[t],"onclick",function(e){!isUrl(this.href)||(e.preventDefault(),window.postMessage(JSON.stringify({url:this.href})))})
+}();
+`;
+
 export {
   autoHeightHtml0,
   autoHeightHtml1,
@@ -58,5 +79,7 @@ export {
   autoWidthHtml0,
   autoWidthHtml1,
   autoWidthScript,
-  inlineBodyStyle
+  inlineBodyStyle,
+  autoDetectLinkHtml,
+  autoDetectLinkScript
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-autoheight-webview",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {